컴포넌트
개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구분한다. 때로는 큰 조각일 수 있다.
컴포넌트를 사용하는 이유:
- UI구축을 쉽게 만들어준다.
하나를 만들어놓고 반복되는 컴포넌트를 여러곳에서 사용한다.
컴포넌트가 어떤식으로 동작할지, 어떻게 생길지 선언해준다.
우리는 컴포넌트가 어떤식으로 동작할지, 어떻게 생길지 선언한다.
선언이라는 말에 집중할 필요가있다. 이전까지 사용했던 자바스크립트에서는 DOM API를 이용해 요소를 하나하나 불러와서 명령하는 방식이였다면, 리액트는 우리가 UI를 선언하고 render함수를 호출하면 리액트가 알아서 내부에 숨겨둔 로직으로 화면에 그려준다. 이를 추상화라고한다.
명령형 프로그래밍이 나쁘다는 것이 아니라 파일 사이즈가 작기 때문에 효율적일 수 있다. 하지만 복잡한 UI시스템에서는 관리가 어렵다는 단점이있다.
렌더링
컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업
props와 state를 가지고 컴포넌트에 동적인 요소를 보여질 변수들을 반영하여 화면에 보여지게 해달라고 요청하는 작업
- 렌더링 단계
Triggering렌더링을 일으킨다 > UI을 주문하고 주방으로 전달한다.
Rendering렌더링을 한다 > 주방에서 컴포넌트가 UI를 만들고 준비하는 것
Commiting렌더링 결과 > 리액트가 준비된 UI를 서빙하는 것
⭐렌더링 트리거
- 렌더링은 언제 일어날까?
1.리액트 앱을 실행했을 때
- 컴포넌트 내부 state가 변경되었을 때
- 컴포넌트에 새로운 props가 들어올때
- 상위 부모 컴포넌트에서 2번,3번의 이유로 렌더링이 되었을 때
리액트 앱이 실행되고 첫 렌더링이 일어나면 루트 컴포넌트에서 시작하여 하위 컴포넌트로 쭉 훑으며 컴포넌트가 반환하는 JSX결과물을 DOM요소에 변환한다.
리렌더링
첫 렌더링은 자동으로 일어난다. 리액트 앱이 실행되면 리액트는 전체 컴포넌트들을 렌더링하고 결과를 DOM에 반영해 브라우저에 반영한다.
컴포넌트 상태가 변화가 생기면 리렌더링이 발생한다.
리렌더링은 음식점 손님이 첫 주문이후에 추가로 음식을 주문하는 것과 같다.
새로운 주문이 일어난다는 것 컴포넌트는 새로운 요리를 만든다.
새롭게 만들어진 요리(렌더링결과)를 손님에게 서빙한다.
⭐리렌더링을 한줄로 요약하면 만약 한 페이지에서 30개 중에서 17개가 변경됬다면 화면을 17번 깜빡이지 않고 한번에 17개의 변경사항을 반영한다는 것이다.
하루를 마치며
오늘은 개인과제를 제출하고 복습하는 날이였다. 이번 개인과제는 동기부여를 준 좋은 과제였다. 결과물을 떠나서 스스로 생각하고 코드를 짠다는 것을 나도 할 수 있을 것같다는 느낌을 받았고 두려웠던 마음이 조금은 사라진 것 같다. 이 마음을 얻은 것만으로도 만족한다. 하지만 주차가 거듭될수록 난이도도 어려워 질터라 복습하고 또 복습해야한다. 다음주 월요일에는 타임어택 코딩도 하게되어 주말에 더 열심히 해야한다.
