리액트가 화면에 앱을 그리는 방법은 좀 다르다

렌더링렌더링.. 그 놈의 렌더링

플젝하다가..

내가 짠 코드에 state나 일반 변수들 이러저리 쓰다보니,

객체에 값이 없다(undefined)는 빨간 메시지를 종종 보게 된다.

리액트의 라이프싸이클을 생각않고 막 쓴거라 할 수 있겠다.

기억을 더듬을겸 관련 내용을 몇 장에 걸쳐 간단히 정리해본다.

---

렌더링?

렌더링 === (가장 최신 상태의)컴포넌트 호출 === 함수 호출

컴포넌트가 그려지는 과정을 알아야하는데

컴포넌트가 그려지려면 바로 이 렌더링이 필수적이다.

렌더링은 다음과 같은 경우에 일어난다. 

• 앱 초기 실행 시(initial execution)
• state값이 변경 될 때(re-rendering)

앱 초기 실행시

: 리액트에서 우리가 짠 코드는 모두 App컴포넌트에 담겨 html에 root 엘리먼트에 렌더된다.

앱을 처음 실행하면 App컴포넌트와 그 아래 자식 컴포넌트들이 렌더링(호출)된다.

App은 최상위 컴포넌트니까 자연히 작성한 컴포넌트들이 모두 렌더링된다.

 

state값이 변경 될 때

: 리액트는 state의 setter함수에 의해 state의 변경을 감지한다.

state값이 변경되면 해당 컴포넌트와 자식 컴포넌트들이 재호출 된다.

컴포넌트는 함수니까 그 안에 변수 선언문, 함수 등이 다시 불러지는거다.

 

컴포넌트가 마운트되는 (화면에 보여지는) 과정

1. 렌더링 발생(trigger a render)
   - 최초 앱 실행 시
   - state 변경 시  
2. 렌더링 실행(react renders your components)
3. DOM에 변경사항 반영(react commit this change to the DOM)
   - 리액트는 최소변경 사항만 DOM에 반영한다. 이때 virtual DOM이라는 중요한 놈이 나온다.
4. 브라우저가 화면에 그리기(paint)
    - 반영된 DOM을 따라 브라우저가 우리의 앱을 화면에 어떻게 그릴지 레이아웃도 잡고 계산도 하며 바쁘다.

---

이렇게 정리하다보니 머릿속에 두루뭉술 알고 있는 개념들이 떠올랐다.

SPA를 구현하기 위한 가장 대표적인 방법인 CSR.

리액트는 SPA를 구현하기 위한 JS 프레임 워크이다.

또..

SSR은 각 주소마다 html을 서버에서 내려준다.

CSR은 react js랑 static 파일 잔뜩 넣은 html 하나주고 유저와 애플리케이션의 모든 인터렉션을 클라단에서 처리한다.

이 정도 떠올라서 그냥 되는대로 끄적여봤다.

끝