React 이해하기 (1)

React Dom

index.tsx

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>
  document.getElementById('root')
);

리액트의 좋은 점은 리액트 Dom에 있다고 할 수 있다. 처음에 <div class='root'></div>안에 포함된 부분을 렌더링 한 후에는 기존에 렌더링된 엘리먼트들과 변경된 엘리먼트만 자동으로 비교하여 업데이트 한다는 것이다.

경험에 비추어 볼 때 특정 시점에 UI가 어떻게 보일지 고민하는 이런 접근법은 시간의 변화에 따라 UI가 어떻게 변화할지 고민하는 것보다 더 많은 수의 버그를 없앨 수 있습니다. 출처 : https://ko.reactjs.org/

React 처럼 생각하기

1. UI를 계층별로 component 구성하기

2. 정적인 버전을 만들어 보기

3. UI에 대한 완전하지만 최소한의 state 구성하기

   ex) todo리스트는 리스트만 필요하지 todo 개수에 대한 정보는 state에 저장할 필요가 없다 왜냐하면 todo리스트의 길이를 가져오면 되기 때문이다.

4. 그리고 state가 어디에 존재해야 하는지 생각해보자.

   • state를 기반으로하는 모든 컴포넌트 찾기
   • 공통 소유 컴포넌트 찾기
   • 공통으로 state를 소유하는 컴포넌트들은 최상위 컴포넌트에 state를 저장해야 합니다.
   • state를 저장할 적절한 컴포넌트를 찾지 못한다면 state를 보관하는 최상위 컴포넌트를 생성하는 것도 좋은 방법입니다.

5. 역방향 데이터 추적해보기

• 참고사이트

  https://ko.reactjs.org/