milliwonkim의 블로그

밑의 코드는 useState 소스코드를 간소화해서 useState의 원리를 설명하는 코드입니다. Object.assign을 이용해서 새 객체를 생성해서 state에 할당합니다. 따라서 state의 불변성을 보장합니다. let currentState; // current state value function useState(initialState) { // set current state to the initial state if it hasn't been set yet if (!currentState) { currentState = initialState; } function setState(newState) { // create a new state object by merging the current..

불변성 메모리 영역의 값을 변경할 수 없는 것 리액트의 불변성을 지켜야하는 이유는 다음과 같습니다. 1. 효율적인 상태업데이트(얕은 비교 수행) 리액트는 상태비교 시, 얕은 비교를 수행(이전 참조값과 현재 참조값만 비교)(객체의 모든 부분을 비교하는 것이 아님) => 따라서 계산 리소스 줄여줌 const App = () => { const [state, setState] = useState({}) const handleClick = (key, value) => { // 얕은 비교를 수행 setState({ ...state, [key]: value }) } return handleClick(key, value)}>{state} } 원시타입은 바로 값을 setState에 넣어줘도 되지만, 참조타입인 객체의 ..

visibility는 이미 DOM에는 등록이됐지만, 실제로는 UI가 보이지 않게합니다. display: none은 해당 엘리먼트가 DOM에서 완전히 제거됩니다. 그러면 엘리먼트가 다시 표시돼야할 때, DOM에 추가 렌더링이 필요하게 돼서 visibility에 비해 성능에 부담을 줄 수 있습니다. 성능에 부담을 줄 수 있는 이유는 다음과 같습니다. visibility: hidden의 경우, 엘리먼트가 브라우저에서 숨겨져도 레이아웃 계산에 참여합니다. 반면에 display: none의 경우, 레이아웃 계산에서 해당 엘리먼트를 제외하고 계산하기 때문에, 엘리먼트를 다시 표시할 때 돔 렌더링 비용이 더 많이 들어갈 수 있습니다. 하지만, 최적화의 경우 성능차이가 미미하므로 가독성, 유지보수성을 우선시 할 필요도..

Context API Redux Recoil 값을 전달하는 원리 컴포넌트 트리를 따라서 데이터 전달 값을 관리하는 원리 설명 Context 객체의 데이터가 변경되면, Context Provider 내부의 모든 컴포넌트들이 재렌더링 (Context를 구독하지 않는 컴포넌트들도 재렌더링) 중앙 데이터 저장소에서 값을 관리하다가 store의 상태가 변경되면, redux의 해당 데이터를 구독하고 있는 컴포넌트들만 다시 재렌더링 atom 단위로 상태값 관리 (의존성을 가질 수 있고, 이를 통해 상태값이 변경되면 의존하는 다른 atom이 자동으로 업데이트) atom은 RecoilRoot 컴포넌트 내에서 정의됨 상태를 트리로 관리 단일 상태 트리(Single State Tree) => 컴포넌트 간 의존성 그래프 =..

리액트 훅은 클로저 개념을 사용합니다. 클로저는 함수가 속한 렉시컬 스코프에서 선언된 변수에 대한 참조를 유지하는 함수입니다. 렉시컬 스코프란 변수의 유효범위를 결정하는데 사용되는 스코프의 종류 중 하나입니다. 함수를 어디에 정의했는지에 따라 해당 함수의 변수 스코프가 결정됩니다. // 렉시컬 스코프 때문에 innerFunction 안에서는 outerVariable에 접근 가능합니다. // innerFunction 함수가 outerFunction 함수 내부에서 정의됐으므로 // outerFunction의 함수 스코프에 접근 가능합니다. function outerFunction() { const outerVariable = "outer"; function innerFunction() { console.lo..

리액트 소스코드는 크게 세 부분으로 나뉩니다. React Core Component 리액트 컴포넌트의 기본동작을 구현 컴포넌트의 state, props를 관리하고, 라이프사이클 메서드 제공 createElement 가상 DOM 요소를 생성 JSX 문법 사용 시, 이 함수를 이용해서 가상 DOM 요소를 생성합니다. diff algorithm 가상 돔요소 변경을 비교하고, 변경된 부분만 실제 DOM에 반영합니다 React Renderer 실제 돔 렌더링 작업 수행 리액트 코어와 분리, React DOM, React Native 등의 다양한 렌더러 제공 React Reconciler 가상돔 구현 후, 변경된 부분만 실제 DOM에 반영 React Renderer와 분리돼있으며, 리액트 코어와 함께 가상 돔 구현..

Bad Case - setInterval 콜백에서 setCount(count + 1)을 호출할 때, count 변수는 useState 훅에서 설정한 초기 값을 참조합니다. 이는 useEffect 콜백함수가 컴포넌트 마운트 시 한 번만 호출되기 때문에 count의 초기 값이 클로저에 의해 캡쳐됩니다. import React, { useEffect, useState } from "react"; const App = () => { const [count, setCount] = useState(0); useEffect(() => { let i = 0; const interval = setInterval(() => { console.log("i: ", i++); // 이렇게 할 경우, count의 이전 값인 0을..

create-react-app을 설치하면 React의 StrictMode가 있습니다. 이로 인해 콘솔을 보면 같은 콘솔이 2번씩 찍히게 됩니다. 그러면 컴포넌트가 2번 렌더링된다고 보일 수 있습니다. React.StrictMode를 사용하는 것 자체는 컴포넌트 재랜더링을 트리거하지 않습니다. React.StrictMode는 엄격 모드에서 컴포넌트를 실행시키기 때문에, 개발 중에 컴포넌트가 더 자주 재랜더링될 수 있습니다. 이는 엄격 모드가 추가적인 검사 및 경고를 도입하여, 더 많은 재랜더링이 트리거될 수 있기 때문입니다. 그러나 이러한 추가적인 재랜더링은 React.StrictMode 자체 때문이 아니라, 실행되는 검사 및 경고 때문입니다. React.StrictMode가 추가적인 재렌더링을 하지는 않..

function useEffect(callback, dependencies) { const previousDependencies = useRef(dependencies); // Call the callback function if dependencies have changed if (!areDependenciesEqual(previousDependencies.current, dependencies)) { callback(); } // Update the previous dependencies // useRef를 이용해서 이전 값을 기억하기 때문에 // previousDependencies가 바뀌어도 리렌더링 되지 않습니다. previousDependencies.current = dependencies; ..

React의 useLayoutEffect와 useEffect는 모두 컴포넌트의 상태를 감지하고 변경에 따른 동작을 수행하는 React Hook입니다. 하지만, 이 두 Hook은 수행되는 시점에서 차이가 있습니다. useEffect는 브라우저가 렌더링 작업을 수행한 후에 비동기적으로 수행됩니다. 이는 컴포넌트가 렌더링 된 후에 일어난 변화에 대한 동작을 수행할 때 사용됩니다. 반면에, useLayoutEffect는 useEffect와 비슷하지만, 브라우저가 렌더링을 수행하기 전에 동기적으로 수행됩니다. 이는 렌더링이 발생하기 전에 상태 변경에 대한 동작을 수행해야 할 때 사용됩니다. 결과적으로, useLayoutEffect는 렌더링 전에 실행되기 때문에 일반적으로 더 빠르게 동작합니다. 그러나 이로 인해 ..