[9주차] 2. 리액트 입문(2)

리액트 입문

Hook 함수

useReducer

• 이전에는 컴포넌트 상태 업데이트 시 useState를 사용해서 새로운 상태를 설정해주었는데 useState말고도 useReducer를 가지고도 상태를 업데이트를 해줄 수 있다.
• useState와 차이 : useState는 설정하고 싶은 다음 상태를 직접 지정해주는 방식으로 상태를 업데이트하는 반면에 useReducer은 action이라는 객체를 기반으로 상태를 업데이트 한다.
• useReducer 함수 사용시 컴포넌트 상태 업데이트 로직을 컴포넌트 밖으로 분리시킬 수 있다. 심지어 다른 파일에 작성 후 불러와서 사용도 가능
• action : 업데이트할 때 참조하는 객체
• type: 어떤 업데이트를 진행할 것인지 명시할 수 있다. 이름 직접 설정 가능
• diff : 업데이트 할 때 필요한 참조하고 싶은 값 명시
• 예시
  {
  type : ‘INCREMENT’
  }

parameter

• reducer 함수
  • reducer : 상태를 업데이트 하는 함수, 현재 상태와 action 객체를 parameter로 받아와서 새로운 상태(업데이트된 상태)를 반환해주는 형태를 갖추고 있음
• 예시 ( action.type에 따라 다른 상태 반환)

function reducer(state, action){
 	switch (action.type) {
 		case 'actiontype종류': 
        	해당 actiontype 종류시 실행할 것; 
        case 'actiontype종류':
        	해당 actiontype 종류시 실행할 것; 
        default: 
        	return state; 또는 throw new Error(‘Unhandled action’); 
     } 
}

• reducer 함수의 기본값

작성법

• reducer 함수 만들기
• const [현재의 상태, dispatch함수] = useReducer(reducer 함수, useReducer에서 사용하고 싶은 초기값(기본값));
• 예시 const [number, dispatch] = useReducer(reducer, 0)
• number: 현재 상태
• dispatch : 보내다 라는 의미를 갖고 있다. action을 발생시키는 함수

App.js에서 useReducer 사용하기

• 1. App 컴포넌트(function App)에서 사용할 초기 상태를 컴포넌트 바깥에 선언
  2. reducer 틀 만들기
  3. function App() {} 안에 const[state(현재 상태), dispatch(action을 발생시키는 함수)]=useReducer(reducer 이름, 1에서 선언한 intialState 이름)

useReducer과 useState

• 컴포넌트에서 관리하는 값이 딱 하나이고 문자열이나 숫자, 혹은 Boolean 값이라면 그런 경우에는 useState로 관리하는 것이 편하다.
• 컴포넌트에서 관리하는 값이 여러 개가 되어 상태의 구조가 복잡해지거나 배열에서 추가, 제거, 수정할 시에는 useReducer가 편할 수 있다.
• 맘에 드는 방식을 사용하면 된다.
• setter가 많아지기 시작하는 순간 useReducer 사용이 편함
• 간단하면 useState, 복잡하면 useReducer 사용

Custom Hook

• 리액트에 내장되어 있는 useEffect, useState, useReducer 같은 hook을 사용해서 원하는 기능을 구현하고 컴포넌트에서 사용하고 싶은 값들을 반환해주면 됨(반환하는 것은 마음대로)
• 반복되는 로직 해결

Context API

• react에서 전역적으로 값 관리
• 사용할 파일에서 const 변수 = createContext(‘defaultValue(기본값));으로 context 생성
• defaultValue : 기본 값으로 context.Provider 사용하지 않았을 경우 기본 값
• useContext : Context를 컴포넌트 내부에서 바로 조회할 수 있게 해주는 hook
• useContext(context)를 사용하여 context에 있는 값을 읽어와서 사용할 수 있게 해주는 react에 내장된 hook
• context에 값을 설정해주기 위해서 파일이름과 동일한 컴포넌트(최하단 위치) 안에서 <context이름.Provider value=’넣어줄 값’> <context이름.Provider>로 감싸 줌
• context 값은 유동적으로 변하는 게 가능
• 다른 파일에서도 createContext 작성할 수도 있고 어디서든지 불러와서 사용 가능

UserDispatch Context

• UserDispatch : dispatch 를 관리하는 context
• 특정 함수를 여러 컴포넌트에 거쳐서 전달해줘야 할 경우 dispatch 를 관리하는 context를 만들어서 필요한 곳에서 dispatch를 불러와서 사용하면 구조도 깔끔해지고 코드도 깔끔해짐

Immer

• produce(state, draft 함수)
• immer 라이브러리 사용해서 불변성 지키기
• 리액트에서 배열이나 객체를 업데이트 할 때는 값을 직접 수정하는 형태의 코드는 불변성을 깨뜨리는 코드이다.
• 객체의 경우 spread 연산자를 사용해서 일단 새로운 객체를 만들고 기존 값를 집어 넣고 새로운 값으로 덮어쓰는 방식이 올바른 방식이다.(컴포넌트가 제대로 리렌더링되고 컴포넌트 최적화도 할 수 있게 됨)
• 배열도 마찬가지로 push, splice 등의 함수를 사용하거나 n번째 항목을 직접 수정하면 안된다. 그 대신 concat, filter, map 등의 함수를 사용해서 새로운 배열을 만들어 내야 함.
• 대부분의 경우 spread 혹은 배열 내장 함수를 가지고 처리하는 것은 번거로운 일은 아니다. 하지만 상태가 복잡해질 경우 불변성을 지켜가면서 새로운 상태를 만들어내는 것은 복잡해진다.
• immer을 사용하면 불변성을 해치는 코드를 작성해도 대신 불변성 유지를 해준다.
• immer 라이브러리 설치 터미널(git bash 혹은 vs code 터미널) 에서 yarn add immer 작성
• immer 라이브러리를 produce라는 이름으로 해당 파일에 불러오기(상단 작성)
  : import produce from ‘immer’;
• const 변수 = produce(state, draft => {produce가 알아서 불변성 지키게 해주는 업데이트 부분});
• draft는 state가 갖고있는 값과 동일
• draft에다가 불변성에 대해 신경쓰지 않고 바로 값을 바꿔줄 수 있다.
• 기존 배열은 건드리지 않음
• immer 사용시 불변성을 쉽게 유지

Reducer 구현

• immer 사용 시 업데이트 로직이 까다로운 경우에만 사용, 간단한 경우에는 굳이 사용하지 않아도 됨
• produce 첫번째 인자인 state 없을 시(두번째 인자인 draft 함수만 있을시) 업데이터 함수 됨
• useState를 통해서 까다로운 객체를 관리해야 하는데 거기서 불변성관리하기 까다로울 때 produce의 업데이터를 반환하는 속성을 활용해서 코드 작성하면 편함
• immer 라이브러리는 무조건 사용하진 말고 데이터 구조가 복잡해지는 것을 방지하고 어쩔 수 없을 때 사용(필요한 곳에만 사용)