728x90 배움 기록47 [React] useMemo와 useCallback 개념 정리 (+ 리렌더링, 메모이제이션, useEffect ...) useMemo와 useCallback의 개념에 대해 정리해보겠습니다 기본적으로 useMemo와 useCallback은 리렌더링을 최적화하는데 도움이 되도록 만들어진 Hook이다. 📌 리렌더링 (re-rendering) ? React는 Virtual DOM을 사용하고 있다. 따라서 리렌더링이 되는 조건에 충족되는 상황이라면, 이전의 Virtual DOM과 현재의 Virtual DOM을 비교하여 변경된 값에 대해 DOM 트리를 업데이트 해준다. 위에서 언급한 리렌더링이 되는 조건은 다음과 같다. 자신의 state가 변경될 때 부모 컴포넌트로부터 새로운 props가 들어올 때 / 변경될 때 부모 컴포넌트가 리렌더링될 때 📌 메모이제이션 (memoization) ? 과도한 리렌더링은 성능 저하의 원인이 된다. .. 2023. 3. 5. [React] Redux Toolkit 사용법 (+ TypeScript 세팅) Redux Toolkit (+TypeScript) 세팅 방법에 대해 정리해보겠습니다 회사에서 프로젝트를 진행하던 중 Redux를 통해 state를 관리하기 위해 세팅해보기로 했다.개인 프로젝트를 진행할 때 Redux Toolkit에 편리함을 느꼈어서 해당 툴을 사용하고자 했다. 📌 Redux Toolkit ?Redux Toolkit은 Redux를 만든 곳에서 공식적으로 효율적인 Redux 개발을 위해 만들어진 툴킷이다.Redux보다 코드가 간결하고 더 개선되어 유지 관리가 쉽기 때문에 사용을 강력히 권장하고 있다. 📌 Redux Toolkit이 제공하는 것| store.jsimport { configureStore, createSlice } from '@reduxjs/toolkit';// news.. 2023. 2. 12. [React] forwardRef 사용법 (useRef, useImperativeHandle...) (함수형 컴포넌트에서) 부모 컴포넌트에서 자식 컴포넌트 안의 DOM element에 접근하고 싶다면? forwardRef를 사용해야 한다. 회사에서 프로젝트를 진행하던 중, 부모 컴포넌트에서 자식 컴포넌트 안의 함수를 사용해야 하는 경우가 생겼다. 자식 컴포넌트에서 부모 컴포넌트의 함수를 사용하려면 props를 사용하면 되었지만 그 반대의 경우는 경험해 본 적이 없어서 어떤 방식이 있는지 찾아보다 forwardRef라는 Hook을 발견하였다. 📌 forwardRef를 사용해야 하는 이유 ? 함수형 컴포넌트는 인스턴스가 없기 때문에 ref 속성을 사용할 수 없다. 따라서, 함수형 컴포넌트를 forwardRef로 감싸주게 되면 ref를 사용할 수 있다. (+ 클래스로 선언된 컴포넌트들은 인스턴스를 가지기 때.. 2023. 2. 5. [TypeScript] Narrowing 정리 (typeof, instanceof, as...) Type 'string | number' is not assignable to type 'number'. 만약 위와 같은 에러 메세지를 본 적이 있다면, 이는 Type Narrowing이 필요하여 발생한 에러입니다. 📌 Type Narrowing ? : (위의 에러 메세지를 예로 들면) string | number 같은 union type에는 일반적으로 조작을 못하게 막아놨기 때문에 타입을 하나로 Narrowing(=좁히다) 해주거나 타입을 Assertion(=선언) 해주는 것이 필요하다. Narrowing으로 판정해주는 문법들 (대표 3개) typeof 변수 속성명 in 오브젝트 자료 오브젝트 instanceof 부모 class 📌 typeof 연산자 : 타입을 하나로 지정해주려면 if문 등으로 해줄 .. 2023. 1. 29. 이전 1 ··· 8 9 10 11 12 다음 728x90
