📝 성장을 위한 기록
-
Immer 라이브러리로 쉽게 React state 불변성 지키기Study/React 2020. 1. 12. 11:37
기존에 Immer 라이브러리를 사용하지 않고 불변성을 지켜주기 위해서는 spread 연산자를 통해 기존 객체를 복사하거나, 내장 함수를 사용하여 불변성을 지켜 업데이트를 해줬다. 하지만 데이터 구조가 복잡해질수록 위와 같은 방법을 사용하면 코드가 복잡해질 것이다. 그러나 Immer 라이브러리를 사용하면 쉽게 불변성을 지켜줄 수 있다. Immer를 사용하면 상태를 업데이트 할 때 불변성을 신경 쓰지 않아도 Immer가 알아서 불변성을 관리해준다. 즉, 배열의 원본을 바꾸는 push, splice 등의 메소드도 사용할 수 있다는 것이다. Immer 라이브러리는 데이터의 구조가 복잡해서 불변성을 유지하며 업데이트 할 코드가 복잡해 질 때 사용하는게 좋다. Immer 사용법 import produce from ..
-
React Hooks : useContext() & Context API : createContext()Study/React 2020. 1. 11. 10:49
리액트로 개발을 하다보면 특정 함수나 값을 원하는 컴포넌트에게 전달하기 위해서, 여러 개의 컴포넌트를 거치고 거쳐서 전달해야하는 경우가 많다. 컴포넌트 1,2개 정도는 중간 다리 역할로 괜찮지만 그 이상 넘어가버리면 굉장히 복잡할 것이다. 이러한 경우를 방지하기 위해서는 Context API 를 사용해야한다. React Context API 를 사용하면 컴포넌트 상관없이 전역적으로 특정 값을 사용할 수 있다. Context API 사용법 - createContext : context 생성 - useContext : context 조회 step1) createContext, useContext Hooks를 불러온다. import React, { createContext, useContext } from '..
-
React Hooks : useReducer() 함수Study/React 2020. 1. 10. 11:42
상태를 업데이트 하는 방법 중 하나는 useState 함수를 사용해 앱 컴포넌트 내부에서 상태 관리를 하는 것이었다. 하지만 useReducer 함수를 사용하게 되면 컴포넌트와 상태 업데이트 로직을 분리하여, 컴포넌트 외부에서도 상태 관리를 할 수 있다. 즉, useState는 컴포넌트 내부에만 업데이트 로직을 작성해야했지만, useReducer 함수를 사용하면 컴포넌트 바깥에서도 작성할 수 있고, 다른 파일에 작성하여 불러와서 사용할 수도 있다. useReducer 함수 사용법 step1) 컴포넌트 외부에 상태 업데이트 로직을 담은 reducer 함수 작성 reducer 함수 : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 기본 형태 : function reducer(st..
-
React.memo *컴포넌트 성능 최적화Study/React 2020. 1. 9. 18:39
컴포넌트가 불필요하게 리렌더링이 된다면 앱의 성능을 떨어뜨리는 주 원인이 될 것이다. 따라서 컴포넌트의 리렌더링을 방지해주는 것이 필요한데, 그것이 바로 React.memo 함수 이다. React.memo 함수는 컴포넌트 props가 바뀌지 않았다면 리렌더링을 방지해준다, 즉, 리렌더링이 필요한 상황에서만 컴포넌트가 리렌더링 될 것이다. React.memo 사용법 1. React.memo( component ) - component : 불필요한 리렌더링 방지하고 싶은 컴포넌트 import React from 'react'; function CreateUser({ username, email, onChange, onCreate }) { return ( //코드 생략 ); } export default Re..
-
React Hooks : useCallback() 함수 *컴포넌트 성능 최적화Study/React 2020. 1. 9. 10:56
useCallback 은 useMemo를 기반으로 만들어져서 두 개는 비슷한 점을 가진 Hooks 이다. useMemo는 특정 결과값을 재사용 할 때 쓰고, useCallback은 특정 함수를 재사용 할 때 사용한다. useCallback를 사용할 때 함수 안에서 사용하는 state, props가 있다면, 반드시 deps 배열 안에 포함시켜야한다. 그리고 컴포넌트에서 prosp로 함수를 받아왔다면 그 함수도 deps에 포함시켜야한다. 함수를 자식컴포넌트에 props로 넘겨줄 때는 항상 useCallback을 사용해야한다. 그렇지 않으면 자식컴포넌트는 계속 새로운 함수를 생성한다고 받아들이기 때문에 렌더링이 계속 실행된다. useCallback을 사용하지 않은 함수들은 컴포넌트가 리렌더링 될 때 마다 새로..