리액트에서 "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..
