배운 개념 정리
DOM
- Document Object Model
- 하나하나의 요소들 Element
- 모든 Element를 담고 있는 문서 Document
- Document에 들어가 있는 Element들을 트리 형태로 표현한 것
- 개발자들은 DOM이 제공하는 API(getElementById(), querySelector() 등)를 통해 DOM 구조에 접근해서 원하는 Element의 구조, 스타일 등을 입맛에 맞게 바꿀 수 있다 = DOM 조작
DOM 조작 과정
- 브라우저가 현재 페이지의 HTML을 탐색해서 해당 Element를 찾고 해당 Element와 자식Element를 제거함
- 새롭게 수정된 Element들로 교체함
- css와 레이아웃 등을 새로 계산해서 다시 브라우저에 그려줌
Virtual DOM (가상 돔)
- 리액트는 가상 돔을 사용해서 실제 돔을 조작하는 것을 매우 빠르게 할 수 있다.
- 실제 돔과 같은 내용을 담은 복사본이라고 할 수 있다.
- 실제 돔이 아닌 자바스크립트 객체의 형태로 메모리 안에 저장되어 있다.
- 실제 돔과 다르게 브라우저에 있는 문서에 직접적으로 접근 불가
- 화면에 보여지는 내용 직접 수정 불가
- 실제 브라우저 화면에 접근하는 게 아니기 때문에 가벼운 작업
Virtual DOM 조작 과정
- 리액트는 항상 두 개의 가상 돔 객체를 가지고 있음
- 첫번째 가상 돔 : 렌더링 이전 화면 구조를 나타냄
- 두번째 가상 돔 : 렌더링 이후에 보이게 될 화면 구조를 나타냄
- 렌더링이 발생될 상황(state변경)에 놓일 때마다 렌더링 이후의 모습이 보일 가상 돔을 생성 (실제 브라우저에 그려지기 전)
- 첫번째 가상 돔과 비교해서 정확히 어떤 Element가 변했는지 찾아냄 (Diffing)
- “Batch Update”를 수행. 변경된 모든 Element들을 집단으로 실제 돔에 한 번에 적용시키는 것
- 이 과정을 Reconciliation : 재조정이라고 칭한다.
props
컴포넌트끼리의 정보교환 방식
부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터.
- props는 반드시 위에서 아래 방향으로 흐른다. 즉, 부모 → 자식방향으로만 흐른다.(단방향)
- props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.
-
데이터를 전달해 주기 위한 용도로만 쓰이는 컴포넌트가 많아지면 props가 밑까지 가기위해서 계속 드릴처럼 아래로 내려오는 현상을 prop drilling이라고 한다.
-
중간에 오류가 나면 찾기가 어려워 유지 보수 측면에서 매우 어려워진다.
-
여는 태그 닫는 태그 사이에 어떤 값을 주면 컴포넌트는 자동적으로 children이라는 props를 가지고 있다.
State
- State : 컴포넌트 내부에서 바뀔 수 있는 값
(UI로의 반영을 위해서, 렌더링을 다시 하기 위해서) - state를 만들 때는 useState()를 사용한다.
- 상태 값을 변경하기 위해서는 this.setState 메소드를 호출해야 한다.
- setState 메소드를 호출하면 React는 상태가 변경된 컴포넌트를 감지하고, 변경된 부분만 다시 렌더링한다.
회고
드디어 리액트를 공부한다!
아직 입문 단계라서 UI가 바뀌는 것도 재밌고 모든 게 흥미롭다.
물론 어렵긴한데 언제나 그랬듯이 반복이 답인 듯하다.
우선 todoList 만드는 건 끝냈고 블로그에 정리하면서 다시 코드 읽어봐야겠다.
주중 목표
todoList 만들기
5주차 강의 DOM 듣기
리액트 입문 강의 다시 듣기
LV.2 과제 페어 시작
