[React] 상태 관리

평소 강의나 직접 했던 상태 관리였지만 머릿속에만 있던 것을 직접 정리하는 시간이 필요했기에 본격적으로 프로젝트 전에 정리하고자 한다.

 

1. 상태란?
State 라고도 한다. React에서 상태란 데이터이다. 특히 변할 수 있는 데이터 혹은 값이라고 보면 될 것 같다.

예를 들면 로그인 유무 혹은 관리자 유무 등으로 나눌 수 있을 것이다.

import react , { useState } from 'react'

const page = () => {
  const [isSignIn , setIsSignIn] = useState(false)
  const [isAdmin , setIsAdmin] = useState(false)
  return (
   {
     isSignIn ? <div> 로그인 됐어요 </div> : <div>로그인 해주세요! </div>
   }
  )
}

 

2. 상태를 다루는 법 - useState
이러한 상태 즉 데이터를 다루는 법을 React에서는 Hook으로 제공해준다. 바로 useState이다. 

useState 구조는 다음과 같다.

-> const [ isAdmin , setIsAdmin ] = useState(false) 

구조 분해 할당으로 두 요소를 반환해준다. 0번째 요소 (isAdmin)는 현재 데이터를 담을 변수이고 1번째 요소는 그 데이터를 갱신할 수 있는 함수를 말한다. 그리고 useState() 이 소괄호 안에는 상태의 초기값을 넣어준다. 

 

3. 상태 변경하기 - setIsAdmin 
React에서 상태는 직접 변경할 수 없고 이 첫 번째 요소로 받아오는 함수로 상태를 변경해줘야 한다.  반드시 강제로 변경하면 안된다. 

import react , { useState } from 'react'

const page = () => {
  const [isSignIn, setIsSignIn] = useState(false)
  const signInHandler = (user: string) => {
   if(user === "LOGIN_USER"):
      setIsSignIn(true)
   else:
     setIsSignIn(false)
}
  
    
  return(
   <div>
     {user}
   </div>
)
{

 

4. 상태 관리하기 
React 에서는 이러한 상태들이  props 형태로 컴포넌트끼리 전해줘야 한다. 상태가 많아지면 많아질수록 점점 데이터 양도 많아지고 복잡해지기 때문에 이를 컴포넌트끼리 전해줄 때 쓸 데 없는 과정이 생기기도 한다. 이러한 것들을 방지하기 위해 상태를 하나로 모아서 관리하는 방식인 전역 상태 관리 라이브러리를 많이 사용한다. 예시로는 Redux , Recoil , MobX 등이 있는데 다음 게시글에서 Redux와 Recoil에 대해 알아보고자 한다.