리액트 훅 - 상태관리 (유즈 스테이트, 유즈 리듀서)

브라우저에 표시되는 정보는 일회성이고 해당 페이지에만 적용됩니다. 따라서, 페이지간에 정보를 주고받고 다른 페이지에서 수정된 정보를 표시하려면 공통된 상태를 관리하기 위해서는 서버 등을 이용하여야 하는데요. 리액트는 서버등을 사용하지 않고 상태를 관리하게 해 주는 다양한 훅들을 제공하는 데 어떻게 사용하는지 볼까요?

목차

• 프로젝트 설정
• 유즈스테이트
• 유즈리듀서

프로젝트 설정

예시에 사용될 프로젝트를 생성합니다

리액트 앱 생성

리액트?

유즈스테이트

유즈스테이트는 관리대상이 대는 상태별로 상태와 상태를 업데이트하는 함수로 구성되며 사용이 간단한 장점이 있습니다.

초기화하기

유즈 스테이트 라이브러리를 가져오기로 추가합니다

import { useState } from 'react'

리액트 코드 안에 아래와 같이 유즈 스테이트를 초기화합니다. 배열 안 첫 번째 변수가 관리대상이고 두 번째 변수는 관리대상의 상태를 업데이트하는 함수입니다. 우측에 유즈 스테이트 괄호 안에 초기화할 값을 넣습니다.

const [post, SetPost] = useState()

설정된 상태를 콘솔에 로그 해 보면 아래와 같이 저장된 데이터가 표시됩니다

값 수정하기

아래 함수를 추가하고

function updatePost() {
  setPost(2)
}

설정한 함수를 클릭이벤트로 호출하는 버튼을 생성합니다

<button onClick={updatePost}>Update</button>

버튼을 클릭하면 아래처럼 값이 변하는 것을 확인할 수 있습니다(원본 데이터가 변하는 것은 아님)

기존에 스테이트 훅은 이전 값을 제공하는 하는 데, 아래와 같이 활용가능합니다

setPost((pre) => {
  setPost(pre++)
})

유즈리듀서

리듀서는 상태를 업데이트하는 함수를 생성하고 해당 함수의 매개변수로 상태와 데이터를 객체의 형태로 전달합니다. 객체에는 타입이라는 스트링이 포함되는 데 해당 타입으로 실행할 작업을 결정합니다.

리듀서 함수 생성

먼저, 상태를 수정할 함수를 생성을 위해 자바스크립트 파일 생성

생성된 파일에 들어갈 함수의 기본형태는 아래와 같습니다.

export const Reducer = (state, action) => {
  switch (action.type) {
    case 'TYPE_1':      
      return {
        ...state        
      }

    default:
      return state
  }
}

리듀서 초기화

리듀서의 초기화는 객체에 초기값을 설정하고 유즈리듀서 훅에 아래와 같이 리듀서 함수와 초기값을 매개변수로 전달하여합니다. 이때, 지정하는 변수들이 (state, dispatch) 리듀서 함수의 매개변수로 들어가는 값입니다.

const initialState = {}
const [state, dispatch] = useReducer(<reducerName>, <initialStateName>)

상태 변경하기

상태를 업데이트하는 함수를 생성하고 두 번째 변수인 dispatch안에 타입을 지정하고 데이터를 넣습니다.

const updateUser = () => {
  dispatch({
    type: 'UPDATE_USER',
    payload: ['user4', 'user5', 'user6']
  })
}

리듀서 함수 파일로 이동하여 타입명을 업데이트하고 주입되는 값을 넣어줍니다. state는 이전의 상태를 가지는데 스프레드 오퍼레이션을 사용하는 이유는 다수의 상태를 가질 때 변하지 않는 다른 값은 기존의 값을 유지하기 위한 목적입니다.

이상으로 리액트 훅 중 상태관리에 사용되는 훅들을 사용하는 방법을 보았습니다.