* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다.* 몰랐거나, 헷갈리는 부분들만 정리되어있습니다. 책에는 더 자세히 나와있습니다useCallback인수로 넘겨받은 콜백 자체를 기억함function Child = memo((num, onChange) => { return ( {num} 버튼 )})function Parent = () => { const [total, setTotal] = useState(0); const [total2, setTotal2] = useState(0); const [toggled, setToggled] = useState(true); const [toggeld2, setToggled2] = useState(true); ..
useState내부에 선언된 함수가 함수의 실행이 종료된 이후에도 지역변수인 값을 계속 참조할 수 있도록 리액트는 클로저를 활용하는것을 짐작할 수 있음.게으른 초기화useState에 변수 대신 함수를 넘기는 것을 게으른 초기화라고 한다.const [count, setCount] = useState( () => Number.parseInt(window.localStorage.getItem(cacheKey)))useState의 초깃값이 복잡하거나 무거운 연산을 포함하고 있을 때 사용 해당 함수는 오로지 state가 처음 만들어질때만 사용됨. (리렌더링 시 해당 함수는 무시됨)주로 localStorage, sessionStorage에 대한 접근. map, filter, find같은 배열에 대한 접근 혹은 초깃..
* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다. 메모이제이션리액트에서 제공하는 useMemo, useCallback, memo 등은 리액트에서 발생하는 렌더링을 최소한으로 줄이기 위해서 제공주장 1: 섣부른 최적화는 독이다. 꼭 필요한 곳에만 메모이제이션을 추가하자메모이제이션도 어디까지나 비용이 드는 작업이므로 쵲거화에 대한 비용을 지불 할 때는 항상 신중해야 됨.대부분 가벼운 작업 자체는 메모이제이션해서 자바스크립트 메모리 어딘가에 두었다가 그것을 다시 꺼내오는 것보가 매번 작업을 수행해 결과를 반환하는 것이 더 빠를수도 있음.값을 비교하고 렌더링 혹은 재계산이 필요한지 확인하는 비용결과물을 저장해 두었다가 다시 꺼내와야한다는 두가지 비용주장 2: 렌더링 과정의 비..
* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다. 렌더링은 어떻게 일어나는가?리액트의 렌더링은 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정을 의미리액트의 렌더링이란?리액트의 렌더링이란 리액트 어플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props, state 의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에게 제공할 것이지 계산하는 일련의 과정을 의미.리액트의 렌더링이 일어나는 이유렌더링이 발생하는 시나리오 최초 렌더링리렌더링useState()의 두번째 배열 요소의 setter 가 실행되는 경우useReducer()의 두번째 배열 요소인 dispatch가 실행되는 경우컴포넌트의 key props가..
* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다. 리액트 파이버 작업순서리액트 파이버의 작업 순서는 복잡한 UI 업데이트를 효율적으로 관리하기 위해 설계됨.크게 렌더 단계 (Render Phase)와 커밋 단계(Commit Phase)로 이루어짐.이 과정을 통해 리액트는 컴포넌트 트리를 재조정하고 실제 DOM을 업데이트함 1. 렌더 단계(Render Phase)순수 계산 단계 = DOM을 실제로 변경하지 않고 어떤 변경이 필요한지 결정이 단계는 중단될 수 있으며, 우선순위 높은 작업이 있을 경우 해당 작업을 먼저 처리 할 수 있음.리액트는 beginWork() 함수를 실행함각 컴포넌트의 Fiber Node를 순회하며 업데이트 시작새로운 props, state, cont..
* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다. DOM과 브라우저 렌더링 과정DOM은 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.브라우저의 렌더링 과정브라우저가 사용자가 요청한 주소를 방문해 HTML 파일 다운로드 받음브라우저의 렌더링 엔진은 HTML을 파싱해 DOM 노드로 구선된 트리(DOM)를 만든다.2번 과정에서 CSS파일을 만나면 해당 CSS 파일도 다운로드 받음브라우저 렌더링 엔진은 이 CSS 파일도 파싱해 CSS 노드로 구성된 트리(CSSOM)를 만든다브라우저는 2번과정에서 사용자 눈에 보이는 노드만 순회하면서 방문함. display: none 방문X눈에보이는 노드를 대상으로 해당 노드에 대한..
![]()
* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다. JSX란?JSX는 XML과 유사한 내장형 구문, 리액트에 종속적이지 않은 독자적인 문법JSX는 자바스크립트 표준 코드가 아닌 페이스북이 임의로 만든 새로운 문법, 반드시 트랜스파일러를 거쳐야 비로소 자바스크립트 런타임이 이해할 수 있는 의미 있는 자바스크립트 코드로 변환됨.JSX의 정의JSX는 기본적으로 JSXElement. JSXAttributes, JSXChildren, JSXStrings라는 4가지 컴포넌트를 기반으로 구성됨. JSXElementJSX를 구성하는 가장 기본 요소HTML요소와 비슷한 역할을 함.JSXElement의 형태JSXOpeningElement / JSXClosingElementJSXSelfClo..
