각 챕터에 대해 실습 내용을 정리하는 Next.js 기반의 React 프로젝트를 생성한다. 기존 템플릿 소스를 사용하여 시작할 예정.
실습 대상
- JSX
- Virtual DOM
- Reconciliation
- 자주 묻는 질문과 유용한 패턴
- 서버 사이드 리액트
- 리액트 동시성
- 프레임워크(Next.js)
- 리액트 서버 컴포넌트
생략
1장 [입문자를 위한 지식] 챕터는 리액트 이전의 역사를 다루므로, 아래 간단한 요약으로 마치고 실습 생략
8장 [프레임워크]의 Remix와 10장 [리액트 대체제] 생략. 프레임워크는 Next.js로 고정.
11장 [마치며]는 에필로그라 생략
1장 요약
1.1 리액트는 왜 필요한가요?
업데이트: 사용자의 상호작용에 따라 새 페이지로 렌더링되고 로딩되기까지 기다리지 않고 즉시 업데이트되어 내용을 확인할 수 있도록
당시의 어려움
1. 성능: 페이지 레이아웃을 다시 계산하는 reflow 작업에서 성능 병목
2. 신뢰성: 상태를 여러 곳에서 추적하여 일관되게 유지하는 데 어려움
3. 보안: XSS와 CSRF 악용을 방지하기 위해 HTML과 JS 소스를 모두 소독(sanitize: 사용자 입력 등의 데이터에서 문제가 될 만한 부분을 제거)해야만 했음
1-2 리액트 이전의 세계
버튼 클릭 시, 발생하는 4개의 상태에 따라 사용자 인터페이스를 업데이트하는 예시
먼저 필요한 상태를 결정한다
1. 클릭 전
2. 클릭했지만 대기 중
3. 클릭 후 성공
4. 클릭 후 실패
결정했다면, 다음과 같은 순서로 업데이트한다
1. 호스트 환경(브라우저)에서 엘리먼트 탐색 API로 버튼을 찾기
2. 버튼에 이벤트 리스너 추가
3. 이벤트에 반응하여 상태 업데이트 (client-only)
4. 페이지에서 벗어날 때, 다시 리스너 제거하고 모든 상태 초기화 (client-only)
1과 3 상태를 표현하기 위해 data-liked 속성을 사용하는 것은 단순히 클라이언트 사이드에서의 변경 예시이므로, 데이터베이스 반영을 위해서는 네트워크 통신이 필요. 요청 실패로 인해 상태 번호 4번에 해당하는 부분을 적용하기 위해서는 data-failed 속성도 필요. 추가로 2번의 대기 상태도 고려하려면 data-pending 속성도 필요.
<button id="likeButton"
data-pending="false"
data-liked="false"
data-failed="false"
>
좋아요
</button> 뿐만 아니라, 네트워크 요청이 처리 중인 경우에는 버튼을 비활성화하거나, 디바운싱 또는 스로틀링을 활용해서 짧은 시간 내 여러 번의 요청이 대기열에 쌓여 이상하게 처리되거나 서버 과부하를 방지해야 한다.
- 디바운싱
- 스로틀링
(p.34, 🚧 작업 중)
