Search

'useState'에 해당되는 글 2건

  1. 2020.12.22 useReducer
  2. 2020.12.21 useState

useReducer

개발/react 2020. 12. 22. 20:59 Posted by 아는 개발자

useReducer는 useState랑 비슷하나 state 업데이트 작업을 담당하는 reducer를 직접 넣어 줄 수 있다는 점이 다르다. 아래 코드에서 주석으로 처리된 useState 코드는 두번째 인자로 state 값을 업데이트 하는 작업을 일괄 담당했는데, useReducer를 사용하면 커스텀 reducer를 추가할 수 있어 action의 타입에 따라서 다른 행동을 취하도록 할 수 있다. 

 

useReducer도 useState처럼 리턴 값은 배열이며 첫번째 인자는 state 값이고 두번째 인자는 reducer에 액션을 보낼 수 있는 dispatch 함수다. 값을 업데이트 할 때는 dispatch 함수에 action 을 설정해서 업데이트 한다.

 

import React, { useEffect, useReducer } from 'react';
import notesReducer from '../reducers/notes';

const NoteApp = () => {
  
    // const [notes, setNotes] = useState([])
    const [notes, dispatch] = useReducer(notesReducer, [])
    
    
// 

const notesReducer = (state, action) => {
    switch (action.type) {
      case 'POPULATE_NOTES':
        return action.notes
      case 'ADD_NOTE':
        return [
          ...state,
          {
            title: action.title, body: action.body
          }
        ]
      case 'REMOVE_NOTE':
        return state.filter((note) => note.title !== action.title)
      default: 
        return state
    }
}

export { notesReducer as default }

 

아래는 Note 를 추가하고 제거하는 작업의 코드다. useState를 사용할 때는 setNote를 이용해서 바로 업데이트 하는 코드를 넣었다면 useReducer에 넣어둔 Reducer를 이용해 action 과 인자를 전달해서 작업을 넘길 수 있다. 액션을 추가하는 코드는 useReducer에서 받아온 dispatch 함수를 사용한다.

 

const addNote = (e) => {
  e.preventDefault()

  // setNotes([
  //   ...notes, 
  //    { title, body }
  // ])
  dispatch({
    type: 'ADD_NOTE',
    title,
    body
  })
}

const removeNote = (title) => {
  dispatch({
    type: 'REMOVE_NOTE',
    title
  })
  // setNotes(notes.filter((note) => note.title !== title))
}

 

useState는 간단한 상태값을 담당할 때 사용한다면 useReducer는 복잡한 상태 값, 중복되는 코드가 많이 생겨 일괄적으로 관리가 필요할 때 사용하면 좋을 것 같다.

728x90

'개발 > react' 카테고리의 다른 글

useContext  (0) 2020.12.22
useReducer  (0) 2020.12.22
useEffect  (0) 2020.12.21
useState  (0) 2020.12.21
connect  (0) 2020.12.20
react router  (0) 2020.12.17

useState

개발/react 2020. 12. 21. 20:14 Posted by 아는 개발자

useState는 react 에서 비교적 최근에 나온 state 관리 라이브러리다. 기존에는 컴포넌트 생성할 때 state로 두고 싶은 변수들을 하나의 오브젝트로 관리했다면 useState 라이브러리를 사용해서 변수 별로 나눠서 선언할 수 있다. 

 

const NoteApp = () => {
  
  const [notes, setNotes] = useState([])
  const [title, setTitle] = useState('')
  const [body, setBody] = useState('')

 

useState 인자로 object를 받는데 이 값은 state의 초기 값이다. 배열, 정수형 인자, 문자열 모두 가능하다. 리턴 값으로는 길이가 2인 배열을 내놓는데 첫번째는 state 변수 값이고 두번째 값은 state 값을 변형 시킬 수 있는 setter 함수다. 

 

 const addNote = (e) => {
    e.preventDefault()
    setNotes([
      ...notes, 
       { title, body }
    ])
    setTitle('')
    setBody('')
  }

  const removeNote = (title) => {
    setNotes(notes.filter((note) => note.title !== title))
  }

 

기존에는 setState를 이용해서 모든 오브젝트를 다시 초기화해야 했다면 useState에서 넘어온 setter 함수를 이용해 내가 업데이트 하고 싶은 state만 명시적인 함수로 호출이 가능하기 때문에 관리가 한결 수월해진 측면이 있다. 한 컴포넌트 내에서 관리할 state 인자가 많아질수록 유용해질 기능인 것 같다.

 

728x90

'개발 > react' 카테고리의 다른 글

useReducer  (0) 2020.12.22
useEffect  (0) 2020.12.21
useState  (0) 2020.12.21
connect  (0) 2020.12.20
react router  (0) 2020.12.17
redux  (0) 2020.12.16