리액트에서 "children"이란 무엇일까? children은 prop일 뿐이다. const Parent = ({ children }) => { return {children}; }; 즉 아래의 코드 (1), (2)는 같다. // (1) // (2) 그렇다면 Element를 prop으로 넘긴다는 것은 어떤 뜻일까? 아래의 두 코드는 같은 뜻이다. 모두 리액트 element를 생성, 할당하고 있다. const children = const children = React.createElement(Child, null, null); element가 변경되면 위와 같은 재생성 및 재할당과정이 일어난다. 그렇다면 리액트 element란 무엇인가? 바로 아래와 같은 객체일 뿐이다. { type: Child, pro..
3주차 주제 스터디를 진행하다가 이런 논란(?)이 있었다. 아래와 같은 코드에서, context가 바뀔 때 자식 컴포넌트가 모두 리렌더링 되는 것이 아니라, context가 쓰이는 컴포넌트만 리렌더링 되는 것이었다...! 그리고 정말 이상하게도 리렌더링 여부를 확인하기 위한 console.log()는 동작하지 않았지만, React devtools의 하이라이팅은 동작해서 혼란이 가중되었다. (리렌더링 된거다 vs 아니다) 스터디가 끝나고 이러한 현상(context가 쓰이는 컴포넌트만 리렌더링, but 하이라이팅은 모든 자식 컴포넌트)이 일어나는 이유를 이해하기 위해 아래 내용들을 다시 공부해 봐야겠다고 생각했다. 1. useContext 2. children Props 3. React devtools 이번..
성능 최적화를 위해 리렌더링을 줄이자! 라고 하면서, React.memo()나 useMemo()를 남발하고 있지는 않았나 되돌아보자. 리액트에서 "렌더링"이란 무엇인지 정확히 알고, 최적화를 어떻게 시킬 수 있는지 알아보자! 리액트의 렌더링이란? 아래 과정 중 Render phase를 리액트에서 렌더링이라고 부른다. Trigger phase 0️⃣ 최초 진입 시 0️⃣ state, 부모의 state 의 변경 각 컴포넌트에서 state의 변경 시 dirty check ➡️ batch 추가 Render phase 1️⃣ render() 호출 (클래스형 컴포넌트) 또는 함수 컴포넌트 호출 (함수형 컴포넌트) 2️⃣ 가상 DOM 재조정 이전 가상 DOM과 현재 가상 DOM을 비교 (Diffing Algorith..
1. 가상 돔(Virtual DOM) 이란? 웹페이지가 표시해야 할 DOM을 일단 메모리에 저장하고, 리액트가 실제 변경에 대한 준비가 완료됐을 때 실제 브라우저의 DOM에 적용 이러한 가상 돔은, 파이버(Fiber)라는 아키텍처로 구성되어 있다. 2. 리액트 파이버(React Fiber) 하나의 element에 파이버 하나가 생성되는 1:1 관계 파이버가 하는 일 작업을 작은 단위로 분할한 다음, 우선순위를 매긴다. 이러한 작업을 일시 중지하고 나중에 다시 시작할 수 있다. 이전에 했던 작업을 다시 재사용하거나 필요하지 않은 경우에는 폐기할 수 있다. ⏩️ 이러한 작업들이 모두 비동기로 일어난다. 파이버 구현체의 주요 속성 tag: element 1:1 매칭 정보 (리액트 컴포넌트, DOM노드, .....
리액트 라이프 사이클이란? 리액트 컴포넌트의 탄생, 변화, 죽음 클래스형 컴포넌트의 라이프 사이클 1. Mount 컴포넌트가 화면에 추가될 때 Render phase constructor() getDerivedStateFromProps() render Commit phase 리액트가 DOM 업데이트 componentDidMount() 2. Update 컴포넌트가 새로운 prop, 상태를 받을 때 Render phase New props, setState(), forceUpdate() shouldComponentUpdate() 에서 true 반환하는 경우 + forceUpdate() render Pre-Commit Phase getSnapShotBeforeUpdate() Commit phase 리액트가 D..
