주로 사용하는 단어
hook - 함수 컴포넌트 안에서 상태, 수명주기 메서드 같은 리액트 기능을 사용할 수 있게 하는 특수한 함수
재조정 - 새로운 가상 DOM과 이전 가상 DOM을 비교하는 과정
DOM - 문서를 객체로 모델링한것 (Document object model)
디핑 알고리즘 - 새 트리와 이전 트리를 노드별로 비교해 트리의 어느 부분이 변경되었는지 알아내는 작업
재조정 (reconciliation) - 가상 DOM을 주어진 호스트 환경에서 현실로 만드는 것
파이버 (Fiber) - 특정 시점에 존재하는 실제 컴포넌트 트리를 나타내는 리액트의 내부 데이터 구조
메모화 (Memoization) - 이전에 계산된 결과를 캐싱해서 함수의 성능을 최적화하는 기법
SSR (Server-side rendering) - 서버에서 렌더링을 하여 화면을 보여주는 방식
하이드레이션 (Hydration) - 서버에서 생성되어 클라이언트로 전송되는 정적 HTML에 이벤트 리스너와 여러 자바스크립트 기능을 추가하는 프로세스
1장 - 입문자를 위한 지식
리액트의 핵심가치 :
컴포넌트 기반 아키텍쳐, 선언적 프로그래밍 모델, 가상 DOM, JSX, 광범위한 생태계, 플랫폼을 가리지 않는 특성, 메타의 지원
1. 리액트를 만들게 된 동기가 무엇인가?
- UI 복잡성과 확정성 문제를 해결하기 위해서
2. 리액트가 MVC나 MVVM 같은 이전 패턴보다 개선된 점은 무엇인가?
- 모델에 신경쓰지 않고 View 만 신경씀 (새롭게 렌더링 하기 때문)
3. 플럭스 아키텍처의 특징은 무엇인가?
- 단방향 데이터 흐름, 단일 정보 출처, 관심사 분리에 중점을 두어 개발, 테스트, 디버깅이 더 쉬운 app을 작성할 수 있게 도와줌
4. 선언적 프로그래밍 추상화의 장점은 무엇인가?
- 무엇을 나타내야 하는지를 밝히는 선언적 프로그래밍 추상화는 가독성과 유지보수 측면에서 장점을 가짐
5. 효율적인 UI업데이트를 위한 가상 DOM의 역할은 무엇인가?
- 실제 DOM에서 필요한 부분만 업데이트해 DOM 조작 횟수를 최소화 함
2장 - JSX
1. JSX란 무엇이며, 장단점은 무엇인가?
- JSX는 자바스크립트의 확장 구문이며 장점은 더 쉬운 읽고 쓰기, 향상된 보안, 강력한 타이핑, 컴포넌트 기반 아키텍처, 광범위한 사용이고 단점은 학습 곡선 가중, 전용 도구 필요, 관심사 혼합, 자바스크립트 호환성 부족이 있음
2. JSX와 HTML의 차이점은 무엇인가?
- 중괄호를 사용해 표현식을 삽입, 카멜케이스로 속성을 작성, 엘리먼트나 컴포넌트는 첫문자를 대문자로 작성
3. 텍스트 문자열은 어떻게 기계어가 되는가?
- 토큰화 -> 구문분석(파싱) -> 코드 생성
4. JSX 표현식이란 무엇이며 어떤 장점이 있는가?
- 중괄호 안에 실행 코드를 넣는 것으로 장점은 엘리먼트 트리 내부에서 코드를 실행할 수 있다는 점
3장 - 가상 DOM (Virtual DOM)
1. DOM이란 무엇이며, 가상 DOM과 어떻게 다른가?
- DOM이란 문서를 객체로 모델링한 것이며, 실제 DOM은 노드 객체로 구성되지만 가상 DOM은 설명 역할을 하는 평범한 JS 객체로 구성됨
2. 문서 조각이란 무엇이며, 리액트의 가상 DOM과 어떤 점에서 비슷하고 다른가?
- 문서 조각이란 DOM 노드를 저장하는 가벼운 컨테이너로 기본 DOM에 영향을 주지 않고 여러 가지 업데이트를 수행할 수 있는 임시 저장소 역할이다.
비슷한 점은 업데이트 방식이며 다른 점은 가상 DOM은 추상화된 복사본을 메모리에 유지하고 변경사항을 적용
3. DOM에서 문제가 되는 사안은 무엇인가?
- 실제 DOM에서는 성능, 브라우저 간 호환성, 보안 취약성 등의 문제가 있음
4. 사용자 인터페이스를 더 빠르게 업데이트하는 데 가상 DOM이 어떻게 활용되나?
- 디핑 알고리즘을 이용해 새 트리를 이전 트리와 비교하여 실제 DOM에 적용해야 하는 변경 횟수의 최소화를 목표로 작동한다.
5. 리액트의 렌더링은 어떻게 작동하나? 이로 인해 잠재되었던 어떤 문제가 발생할 수 있는가?
- 리액트는 컴포넌트 상태가 변경되면 컴포넌트와 모든 자손 컴포넌트를 리렌더링하는데, 이로 인해 불필요한 렌더링이 일어날 수 있다.
4장 - 재조정
1. 리액트의 재조정이란 무엇인가?
- 리액트의 가상 DOM을 가지고 주어진 호스트 환경에서 현실로 만드는 것
2. 파이버 데이터 구조의 역할은 무엇인가?
- 리액트 애플리케이션에서 컴포넌트 인스턴스와 그 상태를 표현하며, 조정 과정에서 필요에 따라 업데이트되고 재배치됨
3. 왜 트리가 두 개 필요한가?
- 현재의 파이버를 포함하는 트리와 작업용 파이버를 포함하는 트리가 존재해야함
4. 애플리케이션이 업데이트되면 어떻게 하는가?
- 작업용 트리에 적용된 변경점을 실제 DOM에 커밋하고 현재 트리에서 작업용 트리로 전환하고 기존의 작업용 트리를 새로운 현재 트리로 만듦
5장 - 자주 묻는 질문과 유용한 패턴
1. 리액트에서 메모화란 무엇이며, 컴포넌트 렌더링을 최적화하는 데 어떻게 사용할까?
- 리액트에서 메모화란 이전에 계산된 결과를 캐싱해서 함수의 성능을 최적화하는 기법이며, 불필요한 렌더링을 방지해서 컴포넌트 렌더링을 최적화 할 수 있음
2. 리액트에서 상태 관리를 위해 useReducer를 사용하면 어떤 우세한 점이 있으며, useReducer는 useState와 어떻게 다른가?
- useReducer를 사용하면 복잡한 상태를 관리할 수 있다는 점에서 우세하며, 컴포넌트를 깔끔하고 단순하게 유지하고, 이벤트의 진단 로그를 추적하는 데 사용할 수 있음
3. React.lazy와 suspense 컴포넌트를 사용하는 리액트 애플리케이션에서 지연 로딩을 어떻게 구연할 수 있나?
- 페이지가 완전히 읽어 들여질 때까지 초기 실행에 필수적이지 않은 자바스크립트의 로딩을 미루는 것
4. 리액트에서 메모화를 사용할 때 발생할 수 있는 잠재적 문제는 무엇이며 어떻게 완화할 수 있을까?
- 불필요한 함수 생성은 가비지 컬렉션을 자주 유발할 수 있기 때문에 무분별한 메모화를 사용하지 않음으로 완화할 수 있음
5. 리액트에서 컴포넌트에 프롭으로 전달된 함수를 메모화하기 위해 useCallback 훅을 어떻게 사용할 수 있을까?
useMemo와 사용하여 불필요한 함수 재생성을 방지하여 최적화하는 것으로 useCallback 훅을 사용할 수 있음
6장 - 서버 사이드 리액트
1. 리액트 애플리케이션에서 서버 사이드 렌더링을 사용할 때 유리한 주요 장점은 무엇인가?
- seo (검색 엔진 최적화), 성능, 보안의 측면에서 장점을 가짐
2. 리액트에서 하이드레이션은 어떻게 작동하며 왜 중요한가?
- 서버에서 생성되어 클라이언트로 전송되는 정적 html에 이벤트 리스너와 여러 자바스크립트 기능을 추가하는 프로세스로 사용자 경험이 자연스럽고 인터랙티브한 웹 애플리케이션을 만들 수 있음
3. 재개 가능성이란 무엇인가? 하이드레이션보다 좋다고 주장하는 근거는 무엇인가?
- 전체 애플리케이션이 서버에서 렌더링되어 브라우저로 스트리밍되는 것으로 인터랙티브 시간이 짧아지고 사용자 경험치 향상될 수 있다는 것이 근거로 활용됨
4. 클라이언트 사이드 렌더링의 주요 장점과 약점은 무엇인가?
- 서버 트래픽을 감소 시키고 빠른 인터렉션을 제공하고 새로고침이 발생하지 않는 것이 장점이고, 첫 페이지 로딩 속도가 SSR에 비해 다소 느리고 SEO에 대한 보완이 필요하다는 것이 약점임
5. 리액트에서 renderToReadableStream과 renderToPipeableStream api의 주요 차이점은 무엇인가?
- renderToPipeableStream은 Node.js 네이티브 스트림 대신 브라우저에서 읽을 수 있는 스트림을 반환함
7장 - 리액트 동시성
1. 리액트 파이버 재조정자는 무엇이며, 복잡한 고성능 애플리케이션을 처리하는 데 어떻게 도움이 되나?
- 파이버라고 하는 작고 관리하기 쉬운 작업 단위로 분할해 처리하는 것으로 렌더링 작업을 일시적으로 중지하거나 재개하거나 우선순위를 설정해 중요도에 따라 업데이트를 지연하거나 예약하는 것으로 응답성을 향상시키고 중요도에 따라 작업을 진행할 수 있음
2. 리액트에서 업데이트 및 지연의 개념을 설명하고 부하가 많은 상황에서도 원활한 사용자 경험을 유지하는 데 어떻게 도움이 되나?
- 업데이트와 지연을 통해 특정 상태 업데이트를 다른 업데이트보다 먼저 처리하는 것으로 높은 부하를 받는 상황에서도 원활한 사용자 경험을 유지함
3. 리액트의 렌더 레인이란 무엇이며, 업데이트 실행을 어떻게 관리하는가? 또한 비트마스크를 사용해 여러 우선순위를 처리하는 방법은?
- 렌더 레인은 리액트가 업데이트에 우선순위를 설정하고 실행을 효과적으로 관리하기 위해 사용하는 메커니즘으로 컴포넌트가 업데이트되거나 새 컴포넌트가 렌더 트리에 추가되면 해당 업데이트의 우선순위에 따라 앞서 설명한 레인을 할당함. 비트마스크를 사용하여 높은 숫자를 우선순위를 높게 처리함
4. 리액트에서 useTransition과 useDeferredValue 훅을 사용하는 목적과 각 훅의 유리함은?
- useTransition 훅은 새로운 상태로 전환할 때 해당 상태가 준비되기까지 시간이 걸려도 UI가 응답성을 잃지 않게 하고, useDeferredValue 훅은 사용자 경험이 나빠지는 것을 방지하기 위해 덜 중요한 컴포넌트의 업데이트를 지연함. 새 값 계산에 시간이 오래 걸리는 경우에는 useDeferredValue 훅을 사용하면 매끄럽게 동작함
5. useDeferredValue를 사용하는 것이 부적절한 상황은 언제인가? 또 이 훅을 사용할 때 고려할 장단점은?
- 사용자가 즉각적인 반응을 기대할 만한 업데이트에는 지연하면 안됨.
장점은 응답성 개선과 선언적 우선순위 결정, 리소스 활용도 향상이 있고 단점으로는 즉각적인 피드백을 받지 못하는 것처럼 느껴질 수 있음
8장 - 프레임 워크
1.Next.js나 Remix 같은 리액트 프레임워크를 사용하는 주된 이유와 이때 얻는 장점은 무엇인가?
- 미리 정의된 구조와 일반적인 문제에 대한 해결책을 제공하기 때문에 반복 작성해야 하는 코드에 얽매이지 않을 수 있고 프로세스를 가속화하고 코드베이스의 품질을 개선할 수 있음
2. 리액트 프레임워크를 사용할 때 생기는 장단점이나 불리한 점에는 어떤 것이 있나?
- 구조와 일관성, 성능 최적화, 커뮤니티와 생태계는 장점이고 학습곡선, 의존과 서약, 유연성과 규칙이 오히려 단점이 될 수 있음
3. 프레임워크로 해결되는 일반적인 문제에는 어떤 것이 있나?
- 서버 렌더링, 라우팅, 데이터 패치
4. 프레임워크는 이러한 문제들을 어떻게 해결하나?
- 각 프레임워크들은 자신들만의 고유한 기술을 통해 서버 렌더링, 동적 라우팅, 데이터 패치를 해결함
9장 - 리액트 서버 컴포넌트
1. 리액트 서버 컴포넌트의 주된 가치는 무엇인가?
- 성능을 더 잘 예측할 수 있고 안전한 서버 환경에서 실행되므로 안전하게 작업을 수행할 수 있음, 비동기로 동작할 수 있기 때문에 클라이언트로 전송하기 전에 서버 컴포넌트의 동작이 완료될 때까지 기다릴 수 있음
2. 클라이언트 컴포넌트가 서버 컴포넌트를 가져올 수 있나? 그렇게 답변한 이유는?
- 없음. 서버 컴포넌트는 오직 서버에서만 실행되기 때문에 클라이언트 환경에서는 사용할 수 없는 요소를 포함할 수 있음 (클라이언트 컴포넌트는 브라우저를 포함해 양쪽 모두에서 실행됨)
3. 서버 컴포넌트와 기존 클라이언트 전용 리액트 애플리케이션 사이에는 어떤 트레이드오프가 있나?
- 부작용이 있는 훅은 서버 컴포넌트에서 사용할 수 없고 서버 환경은 인터랙티브하지 않고 DOM이나 Window 객체도 없음
4. 모듈 참조란 무엇이며, 리액트는 재조정과정에서 모듈 참조를 어떻게 처리하는가?
- 트리의 이 지점에 도착하면 특정 모듈을 사용해야한다고 알려 주는 것, 클라이언트 번들에 있는 실제 모듈로 교체함
5. 서버 액션은 어떤 방식으로 리액트 애플리케이션의 접근성을 향상시키는가?
- 폼에서 서버 액션을 호출하면 자바스크립트 번들이 전부 로드되기 전에 폼을 사용하고 전송할 수 있고, 서버에서 작동하며 빌드 시점에 실행될 수 있는 특징을 이용해 애플리케이션의 접근성을 향상시킴
10장 - 리액트 대체제
1. 리액트, 뷰, 스벨트, 솔리드, 앵귤러의 반응형 모델은 각각 어떻게 다른가? 이러한 차이가 라이브러리/프레임워크의 성능과 개발 경험에 어떤 영향을 미치는가?
뷰) 과하게 도드라지지 않는 반응형 시스템, 객체 속성의 읽기 및 쓰기를 가로챔
앵귤러) 가상 DOM 비교 대신 변경 감지라는 시스템을 사용
스벨트) 선언적 컴포넌트를 효율적인 명령형 코드로 변환하는 컴포넌트를 사용해 DOM을 정교하게 업데이트함
솔리드) 리액트와 유사하나 반응형 특성에 기반한다는 점이 다름, 가상 DOM을 사용하는 대신 세분화된 반응형 시스템을 사용
각 모델들의 장점과 단점이 다르기 때문에 프로젝트에 따라 선택적으로 채택하는 것이 좋아보임
2. 성능을 극대화하는 퀵의 고유한 접근 방식은? 지금 까지 살펴본 라이브러리/프레임워크와 접근 방식이 어떻게 다른가?
- 웹 페이지를 컴포넌트의 집합으로 보고 네트워크를 통해 독립적으로 읽어 들이고 필요에 따라 상호 작용할 수 있는 대상으로 취급함. 이를 통해 페이지의 초기 접근 시간을 크게 단축해 사용자 경험을 향상 시킴
3. 리액트는 전통적인 의미의 반응형이 아니다. 이를 푸시 기반 반응형 모델과 비교하라
- 리액트는 새 상태와 함께 함수가 다시 실행되어야 뷰가 업데이트되는데 (자동적으로 반응하지 않음)
4. 리액트 컴파일러란 무엇인가? 시그널과 비교하면?
- 리액트의 규칙을 강제하고 애플리케이션의 수명 주기 내내 변하지 않을 값을 똑똑하게 메모화해 자동으로 최적화된 리액트 코드로 변환함. 트리를 순회할 필요 없이 UI의 반응형 부분만 업데이트되는 점이 시그널과는 다름.
마치며
서점을 구경하다가 이 책을 발견하고 가벼운 마음으로 구매하여 읽어봤는데 리액트와 프론트엔드 생태계 전반에 대해 잘 이해하지 못했거나 알고있던 내용이 아닌 새로운 내용들을 접하게 되어서 정말 선택을 잘 했다고 생각한다.
그러나 아직 이 책에서 이해가 완벽하게 되지 않은 부분들이 있지만 앞으로 실제 프로젝트를 더 경험하거나 직무에서 이 부분이 이걸 설명하는 내용이었구나라고 떠올릴 수 있다면 이 책을 통해 많은 것을 얻었다고 생각할 것 같다.
앞으로 좋은 프론트엔드 개발자가 되기 위해 리액트에서 그치지 않고 프로젝트의 상황과 팀의 색깔에 따라 여러가지 라이브러리 혹은 프레임워크를 결정할 수 있을 수 있도록 다양한 경험과 도전이 나에게 필수적이라는 것 또한 깨닫는 경험이었다.
