useReducer

목차

 

 

어우.. 긴장이 풀려서 그런가

오늘은 진짜 몸도 사고도 안 따라줘서

잠시 useReducer 이해를 미래의 나에게 맡겼었다.

그리고 그 미래의 나가 지금의 나다 후..

그래도 컨디션 좀 회복하니깐 이해가 쉽다.

 

useReducer

쉽게 말하면 useState 집합이다.

 

state 개수가 많아질 경우, 

이 모든 걸 하나하나 useState로 정의하고, 반영하기에는 코드가 번잡해진다.

 

이때 useReducer를 쓰면 깔끔한 정리가 가능하다.

 

또한 컴포넌트 안에서 제한되는 useState와 달리

useReducer은 컴포넌트 밖이나, 다른 파일에서 독립해서 정의 가능하다.

코드

import React, { useReducer } from 'react'

const resetUserInfo = {
  id: '초기값',
  password:'초기값',
  signIn: false,
}

function userReducer(state, action) {
  switch (action.type) {
    case 'updateId': {
      return {...state, id: action.id}
    }

    case 'updatePassword': {
      return {...state, password: action.password}
    }

    case 'toggleSignIn': {
      return {...state, signIn: !state.signIn}
    }

    default: {
      throw new Error(`${action.type} not exist`)
    }
  }
}

function App() {
  const [userInfo, setUserInfo] = useReducer(userReducer, resetUserInfo)

  function updateId (event){
    setUserInfo({type: 'updateId', id: event.target.value})
  }

  function updatePassword (event){
    setUserInfo({type: 'updatePassword', password: event.target.value})
  }

  function toggleSignIn (){
    setUserInfo({type:'toggleSignIn'})
  }

  return (
    <div className="App">
      <h1>
        {userInfo.signIn ? (
          "Log In"
        ) : (
          "Sign In"
        )}
      </h1>

      <h2>ID: {userInfo.id}</h2>
      <h2>PassWord: {userInfo.password}</h2>

      <input type='text' onChange={updateId}/><br/>
      <input type='text' onChange={updatePassword}/><br/>
      <button onClick={toggleSignIn}>
        {userInfo.signIn ? (
          "Sign In"
        ) : (
          "Log In"
        )}
      </button>
    </div>
  );
}

export default App;

 

어우..

이해하기 쉽게 핵심만 적을려해도

여러 개를 정의해야 하니깐 코드가 좀 길다.

일단 결과는 이렇게 된다.

분석

일단 Reducer 구성에 대해 파악하면

나머지는 그냥 구성원을 하나씩 만들면 된다.

const [userInfo, setUserInfo] = useReducer(userReducer, resetUserInfo)
//     변수명  , 변수변경함수   useReeducer( 변수 변경 케이스, 초기값)

useState는 인자가 초기값 하나인데,

useReducer은 초기값 앞에 변수 변경 케이스라는 인자가 하나 더 필요하다.

 

으음... 이번 포스트가 다른 사람한테 어렵다고 생각된 게
코드가 좀 왔다갔다한다.

 

후.. 그래도 뭐 가봐야지..

const resetUserInfo = {
  id: '초기값',
  password:'초기값',
  signIn: false,
}

일단 state 항목을 정의한다.

일반적으로 변수를 정의할 때

변수명 : 초기값으로 정의하듯이

이 또한 초기값 정의란 걸 인식하고 정의해주자.

물론 null값도 가능

function userReducer(state, action) {
  switch (action.type) {
    case 'updateId': {
      return {...state, id: action.id}
    }

    case 'updatePassword': {
      return {...state, password: action.password}
    }

    case 'toggleSignIn': {
      return {...state, signIn: !state.signIn}
    }

    default: {
      throw new Error(`${action.type} not exist`)
    }
  }
}

그다음 들어오는 게 변수 변경 케이스인데,

 

컴포넌트 안에서

function updateId (event){
    setUserInfo({type: 'updateId', id: event.target.value})
  }

  function updatePassword (event){
    setUserInfo({type: 'updatePassword', password: event.target.value})
  }

  function toggleSignIn (){
    setUserInfo({type:'toggleSignIn'})
  }

이런 식으로 케이스를 적고, 그에 대한 인자를 넘길 것이다.

변수 변경 케이스에서는,

해당 케이스에서 변경 값을 인자로 받고

그것을 return으로 내주는 구성인데,

.. 여기서 좀 어려워하는 사람이 있을 것 같다.

 

코드를 흐름대로 떼와서 좀 설명하자면,

<input type='text' onChange={updateId}/>
// input 태그에서 입력을 받으면, onChange안의 함수가 실행된다.

function updateId (event){  // onChange의 함수가 실행
    setUserInfo({type: 'updateId', id: event.target.value})
  }
// reducer에서 변경함수로 지정한 setUserInfo를 호출
// 변수로 변경 type, 변경할 데이터를 인자로 보낸다.

function userReducer(state, action) {
  switch (action.type) {
    case 'updateId': {
      return {...state, id: action.id}
    }
}

// 변경 타입 집합 함수에서
// 해당 케이스를 찾아 실행한다.
// 여기선 updateId 이다.

// 케이스로 들어가면 반환값을 내놓는데,
// 이를 토대로 state들을 모두 변경한다.

 

으음.. 흐름 순으로 떼 버렸더니

그 밑 코드는 설명할게 없어져 버렸다...

그냥 만들면 된다.

function App() {
  const [userInfo, setUserInfo] = useReducer(userReducer, resetUserInfo)

  function updateId (event){
    setUserInfo({type: 'updateId', id: event.target.value})
  }

  function updatePassword (event){
    setUserInfo({type: 'updatePassword', password: event.target.value})
  }

  function toggleSignIn (){
    setUserInfo({type:'toggleSignIn'})
  }

  return (
    <div className="App">
      <h1>
        {userInfo.signIn ? (
          "Log In"
        ) : (
          "Sign In"
        )}
      </h1>

      <h2>ID: {userInfo.id}</h2>
      <h2>PassWord: {userInfo.password}</h2>

      <input type='text' onChange={updateId}/><br/>
      <input type='text' onChange={updatePassword}/><br/>
      <button onClick={toggleSignIn}>
        {userInfo.signIn ? (
          "Sign In"
        ) : (
          "Log In"
        )}
      </button>
    </div>
  );
}

끝