25분 React 문서 중 관심가는 챕터 읽고, 문제로 하나 뽑아보기
핵심 주제
등장배경과 철학, virtualDOM, 재조정(reconciliation), LifeCycle, ReactHook 주의사항! 등장배경과 철학
[ Q1. React에서 강조하고 있는 3가지 특징은? ] - 링크
1) 선언형 2) 컴포넌트 기반 3) 라이브러리로 anywhere
(1) 선언형
- View에 대한 선언형으로 작성
- 데이터 변경에 따른 최적화 및 렌더링 고려하지 않아도 됨
(2) 컴포넌트 기반
- 상태를 가지는 컴포넌트를 통해 복잡한 UI를 구성할 수 있다
- DOM과 분리된 상태를 가짐
(3) 라이브러리로 anywhere
- 라이브러리로, 다른 기술 스택에 영향주지 않음 (유연성)
- React Native등 앱 개발도 가능
[Q2. 단방향으로 데이터 흐름을 제어하는 이유] 링크
흐름: 등장배경 > 장점- 선언형프로그래밍을 위해 ⇒
함수형 === 선언형 동일?⇒ 안 동일 - 명령형(for문) ↔ 선언형(고차함수)
정확도?
준혁: (뇌피셜) 리액트의 함수형 패러다임과 흐름이 같기 때문에 이해하기 쉽다
공홈: 데이터 흐름을 명시적으로 보이게 만들어서 프로그램이 어떻게 동작하는지 파악
! VirtualDOM
[Q1. VirtualDOM이란 -공식문서]
흐름: virtualDOM 은 - 다. ⇒ react에서는 virtualDOM을 통해 ~ 한다.준혁: javascript Object로 DOM을 표현한 것- react에서는 상태의 변화를 감지하고, 변화들을 모아서 1tick에 업데이트를 할 수 있도록 렌더링 최적화도 해준다.
- 실제 DOM은 변화가 발생할 때마다 reflow, repaint가 발생한다. virtual dom은 변화들을 모아 reflow, repaint를 최소화 해준다.
인수: 실제 DOM 구조를 객체의 트리로 만든 것창민: html dom을 메모리 상에서 표현한 것수경: Virtual DOM은 React, Vue와 같은 선언적 웹 프레임워크에서 사용되는 DOM을 표현한 객체이다. 비효율적인 렌더링과 최적화 및 유지보수가 어려워지는 문제를 해결하기 위해 나온 기술이다.
- [Q1.1 virtualDOM을 통해 결국 하고자 하는 것은?
정리필요] - 재조정 과정을 통한 reflow, repaint 횟수 최소화
- 변화가 발생한 부분만 리렌더링
- 선언적 API를 가능하게 함 (UI상태를 알리면 DOM이 그 상태와 일치하도록 함)
- React트리 === virtualDOM ??
- virtualDOM은 하나의 트리 형태의 객체
- 재조정 과정에서 virtualDOM을 순회하며 변화여부를 체크할 때 사용
- 선언적 API를 가능하게 함
- UI 상태 선언 → virtualDOM을 통한 재조정 과정 → 상태와 DOM의 일치
내용
! 재조정
[Q1. 리액트의 내부 작동 원리를 재조정 (Reconciliation) 개념과 함께 설명하세요. ]
흐름: 가상 돔과 실제 돔이랑 동기화 시키는 과정이다.+ diffing알고리즘 언급- 가상 돔에서 변한 파트(비교 알고리즘을 통해 얻고)를 실제 돔에 옮겨야 하는데 ⇒ 동기화, 일치시킨다
준혁: 이전에 반환된 가상 dom과 현재 가상 dom 트리를 비교하여 변화가 있는 부분을 찾아 dom을 업데이트를 하는 과정
인수: (꼬리질문) 변한 부분을 어떻게 react에서 감지하나요? (diffing알고리즘)
[Q2. 비교 알고리즘] 출처
흐름: 이전에 반환된 트리와 현재 반환된 트리를 비교하는 과정이다. > 세부 트리 비교 과정
- 변화를 찾기 위해서 diffing 알고리즘을 사용한다
질답질문 : attribute가 변화했다는 것 === props의 변화
- 시간복잡도 (
O(N^3) → O(N)) - [ 2가지원칙 ]
- 서로 다른 타입의 엘리먼트는 서로 다른 트리를 가진다고 간주하여 더 이상 비교하지 않음
- key prop을 통해, 변경되지 않을 자식 엘리먼트를 표시
[Q3. 데이터의 불변성을 지켜야 하는 이유] -링크
흐름: 2가지수경: 2가지- 1) 어떤 값이 변경되었는지 알아야하기 때문에
- 2) 리렌더링 할 때 값이 아니라 참조 값을 비교하기 때문에 → 얕은 비교 (비교 최적화)
- 1) 변경 전 값이 필요한 경우가 있기 때문에
- 2) 변화를 감지하기 위해 필요하다. → 리렌더링 여부 결정을 위해
- react에서 참조 비교(얕은 비교)를 통해 리렌더링여부를 결정하기 때문에
공홈 참고! LifeCycle
[Q1. 라이프사이클과 각 사이클의 역할]
[Q1.] React의 라이프사이클 중 Render단계와 Commit 단계의 차이를 말씀해주세요.
To 준혁님준혁 render는 순수한 단계, Commit 단계는 DOM과 연결되어 sideEffect를 처리하는 단계꼬리 Render단계에서 하는 일은 무엇인가요? constructor() render() 공홈 constructor() ⇒ state를 초기화, 인스턴스에 이벤트 바인딩render() ⇒ ReactElement 반환하는 역할, boolean, null인수 Render → [재조정] → Commit 추측[Q2.] React에서 말하는 SideEffect란 무엇인가요?
To anyone흐름 SideEffect - - 다. ~~ 대표적인 사례들이 해당된다.공신력문서: VDOM에 변경점을 만들거나(추가, 수정, 삭제..) 혹은 변경점을 만들어낼 수도 있는 작업(라이프 사이클)질문 setState는 sideEffect 인가요?답변 setState는 lifecycle을 돌게 만드므로, sideEffect에 가깝다고 할 수 있다.
[Q3.] 함수컴포넌트에서 lifecycle을 대응하는 방법은 무엇인가요?
To 수갱님흐름 (심플&두괄식) useEffect로 가능 ⇒ 사례 [시점3개 예를]수갱 useEffect로 가능- 생성 → 최초1번만 실행하고 싶다면, 의존성 배열 []
- 업데이트 → useEffect의 의존성 배열에 감시값(?)을 추가함으로
- 제거 → return
질문 라이프사이클, 라이프사이클메서드는 무엇인가요?- 모든 컴포넌트는 여러 종류의 “생명주기 메서드”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다.
[정말 좋은 자료]
! ReactHook
[Q1. hook의 등장배경은 무엇인가요?]
To 창민님흐름 몇가지 이유가 있다. ⇒ 첫째는 - .⇒ 기존 문제 → 해결방법,이점창민 상태 관련 로직을 재사용하기 위해- 구체적으로 조금 더 해준다면? ex가 있다면?
답변- 기존은 부모에서 상태 로직을 처리하는 함수를 넘겨준다 → 단점
- → hook은 독립적으로가능
다른이유공홈생명주기 메서드를 기반으로 쪼개는 것 보다는, Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있습니다.
(부가적인) 장점- this를 대체할 수 있다.
함정카드 가능성
나의 hook 사용 경험과 느낀점
[Q2.] Hook의 내부 동작원리를 아시나요?
[Q3.] 세부 Hooks 사례들
- useCallback
- useMemo
경험, 언제, 왜 ,어떻게, 얼마나 효과, … , ..
기타
[Q1. props drilling이란]
[Q2. 상태 관리 라이브러리들의 등장 배경]
[Q3. React에서 key를 지정해야하는 이유] - key선택하기