컴포넌트 렌더링

컴포넌트 렌더링 과정

1. React 컴포넌트 리렌더링 케이스
   1. React 컴포넌트는 아래의 4가지 상황에서 리렌더링 된다
   2. 내부 상태값(state) 변경
   3. 부모가 전해준 속성(props) 변경
   4. 중앙 상태값(redux stor 등) 변경
   5. 부모 컴포넌트가 리렌더링되는 경우, 자식 컴포넌트도 리렌더링
2. state 변경이 있을 때
   • react에서 유동적인 데이터를 저장하기 위해서 state 라는 것을 이용한다. 이때 state 값을 바꿔주기 위해서 state를 직접 조작해서는 안되고 setState() 메서드를 이용해 주어야한다. 왜냐하면 리액트는 state의 변경이 감지되면 리렌더링을 해주는데 메서드를 사용하지 않고 직접 바꿔주게 되면 리액트가 state의 변경을 감지하지 못하게 된다.
3. 새로운 props 들어올 때
   • 전달받은 props값이 업데이트 됬다면 리 렌더링 된다.
4. 부모 컴포넌트가 렌더링 될때
   • 새로운 prop이 들어오지 않더라도 부모컴포넌트가 리렌더링 된다면 자식컴포넌트 역시 리렌더링이 된다.
5. React 리렌더링 과정
   • 함수 컴포넌트 재호출
   • 구현부 실행
     • props취득, Hook 실행, 내부 변수 및 함수 재생성
     • 단, 각 Hook의 특성에 따라 기존에 메모리에 저장한 내용을 적절히 활용한다
   • return 실행
     • 렌더링 시작
   • 렌더 단계(Render Phase)
     • 새로운 가상DOM 생성 후, 이전 가상 DOM과 비교하여, 달라진 부분을 탐색하고, 실제 DOM에 반영할 부분을 결정한다.
   • 커밋 단계(Commit Phase)
     • 달라진 부분만 실제 DOM에 반영한다.
   • useLayouyEffect
     • 브라우저가 화면에 Paint 하기 전에, useLayoutEffect에 등록해둔 effect(부수효과함수)가 동기로 실행된다
     • 이때, state, redux store등의 변경이 있다면 한번 더 리렌더링 된다.
   • paint
     • 브라우저가 실제 DOM을 화면에 그린다. didUpdate가 완료된다.
   • useEffect
     • update되어 화면이 그려진 직후, useEffect에 등록해둔 effect(부수효과함수)가 '비동기'로 실행된다.
     • effect에 return부분이 있다면, 구현부보다 먼저 실행된다.