[React] 3. { }의 파워

코드를 작성할때마다 "데이터 바인딩" 과정은 복잡하기도 하고 코드를 읽을때도 골치가 아프다,

 

모든 코드는 '분할 관리'가 제일 중요한데 이러한 직관성이 부족하면 코드의 길이도 문제고 보기에도 불편하다.

 

React에서는 JS + HTML을 의미하는 JSX라는 문법을 사용하는데 이를 통해 JS의 간편함과 HTML의 직관성을 모두 활용 가능하다.

 

** 데이터 바인딩이란? **

 데이터 바인딩이란??? ==> 서버든지 어디서든지 데이터를 가져와서 html에 박아넣는 과정을 데이터 바인딩이라 한다.

ex) 날짜가 변경될때마다 모든 사이트의 시계를 변경하는 업무는 지옥이니 서버에서 값만 변경해주면 모든 페이지에서 알아서 업데이트 되는거라고 보면된다.

 

 

React에서는 {변수} , {함수()} , {이미지} , {style}까지 모든 변수를 {}안에 넣어서 사용가능하다.

ex)

import "./App.css"; import logo from './logo.svg'; function App() {   let posts = '강남 고기 맛집';   let style1={ color : 'blue', fontSize : '30px'};   // 그냥 만들어본 함수() 함수 내부에 함수를 만들수 있다 JS   function 함수(){     return 100   }   return (     // JS return에 HTML를 써넣을 수 있다 JSX <div className="App">       <div className="black-nav">         //맨 위의 let posts = '강남 고기 맛집';으로 만든 변수를 그대로 갖가 쓸수 있다.         <div className={posts}>개발 Blog</div>         {/* html의 style을 사용하려면 Object 형식으로 작성해야 하고 font-size처럼 뭔가 뒤에 붙는건 사용할수 없다. */}         {/* 또한 얘도 마찬가지로 {}로 붙여넣을수 있음 */}         <div style={ { color : 'blue', fontSize : '30px'} }>개발 Blog</div>       </div>       //style도 {} Object 형식으로 작성해놓은것을 바로 사용 가능하다.       <div style={style1}>         //해당 변수를 여러번 재활용 할수도 있고 직접 표시되는 내용에도 사용할 수 있다.         <h4>{posts}</h4>         // 함수도 변수처럼 {}를 사용하면 자동 실행되게 할 수 있다.         <h4>{ 함수() }</h4>       // image는 직접 경로를 써도 되지만 import로 이미지를 가져오고 import 명으로 사용가능하다.       <img src={ logo } />       </div>    </div>   ); }