리액트 상태 관리
-
Immer 라이브러리로 쉽게 React state 불변성 지키기Study/React 2020. 1. 12. 11:37
기존에 Immer 라이브러리를 사용하지 않고 불변성을 지켜주기 위해서는 spread 연산자를 통해 기존 객체를 복사하거나, 내장 함수를 사용하여 불변성을 지켜 업데이트를 해줬다. 하지만 데이터 구조가 복잡해질수록 위와 같은 방법을 사용하면 코드가 복잡해질 것이다. 그러나 Immer 라이브러리를 사용하면 쉽게 불변성을 지켜줄 수 있다. Immer를 사용하면 상태를 업데이트 할 때 불변성을 신경 쓰지 않아도 Immer가 알아서 불변성을 관리해준다. 즉, 배열의 원본을 바꾸는 push, splice 등의 메소드도 사용할 수 있다는 것이다. Immer 라이브러리는 데이터의 구조가 복잡해서 불변성을 유지하며 업데이트 할 코드가 복잡해 질 때 사용하는게 좋다. Immer 사용법 import produce from ..
-
React Hooks : useReducer() 함수Study/React 2020. 1. 10. 11:42
상태를 업데이트 하는 방법 중 하나는 useState 함수를 사용해 앱 컴포넌트 내부에서 상태 관리를 하는 것이었다. 하지만 useReducer 함수를 사용하게 되면 컴포넌트와 상태 업데이트 로직을 분리하여, 컴포넌트 외부에서도 상태 관리를 할 수 있다. 즉, useState는 컴포넌트 내부에만 업데이트 로직을 작성해야했지만, useReducer 함수를 사용하면 컴포넌트 바깥에서도 작성할 수 있고, 다른 파일에 작성하여 불러와서 사용할 수도 있다. useReducer 함수 사용법 step1) 컴포넌트 외부에 상태 업데이트 로직을 담은 reducer 함수 작성 reducer 함수 : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 기본 형태 : function reducer(st..
-
React Hooks : useState() 함수Study/React 2020. 1. 4. 10:25
리액트 컴포넌트에서 동적인 값을 상태(state) 라고 부른다. 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요하다. React Hooks 가 나오기 이전에는 상태값을 관리하기 위해 class 기반의 클래스 컴포넌트를 작성해야했다. 클래스 컴포넌트는 간단한 상태 관리 조차도 함수형 컴포넌트에 비해 복잡하여 유지 보수가 힘들었다. 하지만 리액트 16.8 버전부터 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 됐다. Hooks 중에 useState() 함수가 있는데, 이를 통해 함수형 컴포넌트에서도 상태를 관리할 수 있다. useState( ) 함수 사용법 Counter.js import React, { useState } from..