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 도서를 공부하며 정리한 내용입니다. JSX란?JSX는 XML과 유사한 내장형 구문, 리액트에 종속적이지 않은 독자적인 문법JSX는 자바스크립트 표준 코드가 아닌 페이스북이 임의로 만든 새로운 문법, 반드시 트랜스파일러를 거쳐야 비로소 자바스크립트 런타임이 이해할 수 있는 의미 있는 자바스크립트 코드로 변환됨.JSX의 정의JSX는 기본적으로 JSXElement. JSXAttributes, JSXChildren, JSXStrings라는 4가지 컴포넌트를 기반으로 구성됨. JSXElementJSX를 구성하는 가장 기본 요소HTML요소와 비슷한 역할을 함.JSXElement의 형태JSXOpeningElement / JSXClosingElementJSXSelfClo..
