React - 특징, JSX

React 

• 자바스크립트 라이브러리
• 오직 V(view)만 신경 쓰는 라이브러리
• Component 기반의 UI 라이브러리
• 선언형 프로그래밍
• Virtual DOM 사용 

초기 렌더링 
render() {...}
맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요한데 리액트에서는 render 함수 사용
- 컴포넌트가 어떻게 생겼는지 정의
- 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환
- HTML 마크업 후 실제 페이지의 DOM 요소 안에 주입 

컴포넌트
특정 부분이 어떻게 생길지 정하는 선언체 

=> 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 호출한다.
      render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 
      현재 render 함수가 만든 컴포넌트 정보를 비교. 
      두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트함.

 

 

 

JSX

: 자바스크립트의 확장 문법 

 

- JSX 코드의 변환 과정 

아래의 JSX 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을사용하여 일반 자바스크립트 형태의 코드로 변환된다. 

 

function App() {
   return (
      <div>
         Hi <b> react <b>
      </div>   
   );
};

 

위의 코드는 다음과 같이 변환된다. 

function App() {
   return React.createElement("div", null, "Hi ", React.createElement("b", null, "react");
}

=> 자바스크립트로 요소들을 일일이 생성할 필요 없이, JSX를 사용하는 것이 가독성이 높고, 작성하기 쉽다. 

 

 

 

- 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 

아래와 같은 형태의 코드는 제대로 작동하지 않는다. 
요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류 발생

function App() {
   return (
      <h1>안녕!</h1>
      <h2>반가워</h2>
   )
}

export default App;

 

 

해결 방법
컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문에 하나의 요소로 꼭 감싸 주어야 함. 

function App() {
   return (
      <div>
         <h1>안녕!</h1>
         <h2>반가워</h2>
      </div>   
   )
}

export default App;

 

 

* div 요소가 아닌 다른 형태로도 표현이 가능

방법 1) 
<Fragment>
   <h1>안녕!</h1>
   <h2>반가워</h2>
</Fragment>



방법 2) 
<>
   <h1>안녕!</h1>
   <h2>반가워</h2>
</>

 

 

 

- 자바스크립트 표현 

JSX 내부에서 { }를 사용하여 자바스크립트 표현식을 쓸 수 있다. 

function App() {
   const name = "다루";
   return (
      <>
         <h1>{name} 안녕!</h1>
      </>
   );
}

export default App;