도리쓰에러쓰

리액트를 사용하면 빠질 수 없는 라이브러리가 바로 '상태 관리 라이브러리'이다. 뷰나 앵귤러와 비교했을 때 가장 큰 차이점은 단방향 바인딩인데, 부모 컴포넌트에서 자식 컴포넌트로만 state를 props로 전달할 수 있고, 반대로 부모 컴포넌트로 props를 직접 전달할 수는 없다. 자식 컴포넌트에서 부모 컴포넌트에 있는 state를 변경하려면 setState를 props로 넘겨줘야 한다. 이것이 반복되다 보면 Props Drilling이 발생하게 되고 프로젝트의 규모가 커질수록 props의 depth가 증가하게 된다. 이는 불필요한 리렌더링을 발생시킬 수 있다. 그럼 props로 모든 state를 관리하는 것은 추천하지 않는가? 컴포넌트의 재활용성, 의존성 분리 등의 측면에서의 props를 state로..

1. 얕은 비교 기본 타입 데이터의 경우 값이 동일한지만 비교하고, 객체의 경우 참조만 비교한다. 그래서 객체를 state로 사용하게 될 경우 값이 같더라도 참조값이 다르기 때문에 재렌더링이 발생한다. const obj1 = { a: 1, b: 2 }; const obj2 = { a: 1, b: 2 }; console.log(obj1 === obj2); // false 2. 깊은 비교 얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교한다. 깊은 비교 방법은 아래와 같다. 1️⃣ Object depth가 깊지 않은 경우 : JSON.stringify() 사용 2️⃣ Object depth가 깊은 경우 : lodash 라이브러리의 isEqual() 사용 const obj1 = { a: 1, b: 2..

1. 커스텀 Hook이란? 개발자가 스스로 커스텀 한 Hook을 말한다. ❓왜 커스텀 Hook을 제작하여 사용할까 1️⃣ 코드의 중복을 줄여 코드 가독성이 높아진다. 2️⃣ 재사용성을 높인다. 3️⃣ 변경사항이 있을 때 커스텀 Hook만 수정하면 되기 때문에 효율적으로 관리할 수 있다. 2. 코드 예시 커스텀 Hook을 사용할 때는 항상 use로 시작해야 한다. 아래 코드를 확인하여 useFetch()라는 이름의 커스텀 Hook을 확인해보자. import { axios } from ‘axios’; import { useState, useEffect } from ‘react’; const useFetch = (initialUrl: string) => { const [url, setUrl] = useStat..

1. useReducer() 상태를 업데이트할 때 useState()를 주로 사용했는데 useReducer()로도 상태 업데이트가 가능하다. useReducer()를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 우선 reducer는 현재 상태와 액션 객체를 파라미터로 받아와 새로운 상태를 반환해주는 함수이다. function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } reducer에서 반환되는 상태는 컴포넌트가 지닐 새로운 상태이다. 여기서 action은 업데이트를 위한 정보를 가지고 있다. action의 예시는 아래 코드를 참고하면 좋을 것 같다. // 카운터에..

리액트 성능 최적화하는 방법을 알아보기 전에 컴포넌트가 리렌더링 되는 조건을 알고 지나가야 할 것 같다. 📍 컴포넌트 리렌더링 조건 1️⃣ 부모에서 전달받은 props가 변경될 때 2️⃣ 부모 컴포넌트가 재렌더링될 때 3️⃣ 자신의 state가 변경될 때 리액트의 성능 최적화를 위해선 불필요한 렌더링을 막을 필요가 있다. 지금부터 리액트의 성능 최적화 7가지에 대해 정리하겠다. 1. useMemo() useMemo()는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 React Hooks 중 하나다. useMemo()는 메모이제이션(Memoization)된 값을 반환한다. 💡 메모이제이션(Memoization) :: 연산의 결과값을 메모리에 저장해두고 동일한 입력이 들어오면 재사용하는 기법 만약 컴포넌트 ..

1. 라이프사이클(Lifecycle) 이란? 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그래서 각각의 컴포넌트에는 라이프사이클(=수명 주기)가 존재한다. 컴포넌트는 생성(mounting) ▶ 업데이트(updating) ▶ 제거(unmounting)의 생명주기를 갖는다. 위 이미지는 라이프사이클(Lifecycle)을 나타낸 것이다. 라이프사이클(Lifecycle)이 업데이트될 때 아래 링크를 참고하여 확인해보는 것이 좋을 것 같다. React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl 2. 라이프사이클(Lifecycle)의 분..

1. useCallback()과 useMemo()란? useCallback()과 useMemo()는 메모이제이션(Memoization) 된 값을 반환한다. 차이점이 있다면 useCallback()은 메모이제이션된 함수를 반환하고 useMemo()는 어떠한 타입에 상관 없이 메모이제이션된 값을 반환한다. 💡 메모이제이션(Memoization) : 연산의 결과값을 메모리에 저장해두고 이전 값과 결과가 동일할 때 재사용하는 기법 📌 useCallback()과 useMemo()를 알기 전 알고 있어야 할 React가 리렌더링을 하는 조건들이 있다. 1️⃣ 자신의 state가 변경될 때 2️⃣ 부모 Component로부터 전달받은 props가 변경될 때 3️⃣ 부모 Component가 리렌더링될 때 (자식 Com..

🔽 우선 forwardRef()을 알기 전에 ref를 알아야 하는데 아래 게시물을 참고하면 좋을 것 같다. [React] Ref 사용하여 DOM 요소에 접근하기 - useRef() 1. Ref란? React에서 DOM에 직접 접근하기 위해 사용한다. HTML로 예를 들자면, 에 접근하고 싶을 때 "div-id"라는 id를 사용하여 DOM 요소에 접근한다. HTML을 작성할 때 id로 DOM 요소를 접근하는 것처럼, Rea dori-coding.tistory.com 1. forwardRef()란? React에서 일반적으로 사용할 수 없는 prop이 몇 가지 있다. 그 중 ref prop도 HTML Element 접근이라는 특수한 용도로 사용되기 때문에 일반적인 prop으로 사용할 수 없다. React Co..