[React]useState에 대해 알아보자(+React Hook)

(시작도 안했지만 벌써 하기 싫음)

오늘은 내가 만들고 있는 개인 프로젝트 내에서 사용되는 useState에 대해 알아볼 것이다(나를 위한것)

 

1. State를 먼저 알아야 한다

React 공식문서에서 state는 컴포넌트 별 메모리라고  설명한다. 즉, 컴포넌트는 현재 입력값, 현지 이미지, 장바구니 같은 것을 "기억"하고 있어야 하는데, 그 메모리를 state라고 선언하는 것이다.

/*state변수를 사용하기 위해선 useState가 반드시 필요하다.*/
import {useState} from 'react';

/*임의의 변수 하나 선언*/
let count = 0;

/*[state변수, setter함수 선언]*/
/*여기서 [] 문법은 배열 구조 분해라고 하며, useState가 반환하는 배열에는 항상 2개의 항목이 있다.*/
const [count, setCount] = useState(0) 

/*setCount 동작 선언*/
function handleClick(){
	setCount(count+1);
}

count에는 클릭할 때 마다 +1되어 값이 지속적으로 바뀐다. 이렇듯 지속적으로 변할 수 있는 값을 담는 것이 state이다.

2. 그럼 useState란 무엇인가

리액트 공식 문서에선 "useState는 컴포넌트에 state변수를 추가할 수 있는 React Hook입니다."라고 명시되어 있지만, 초보 리액트 삐약이인 나는 솔직히 뭐라는건지 조또 몰라서 지피티 쓰앵님한테 헬프쳤다.

지피티 쓰앵님👽 왈,

상상해보자. 네가 게임을 하고 있는데, 게임에서 점수를 저장해야 한다고 생각해봐.
점수가 계속 변할 수 있으니까 현재 점수를 저장하고, 점수가 변하면 바꿔주는 방법이 필요해.
바로 useState가 그런 역할을 해!

라고 하셨다.

 

따라서 useState는 지속적으로 변하는 값을 업데이트 해주기 위해 사용되는 react Hook이라 볼 수 있다. 좀 더 자세하게 설명하자면,

const [score, setScore] = useState(0)

• score : 현재 점수를 나타내는 state변수
• setScore : score을 업데이트 할 수 있는 함수
• useState(0) : 점수를 0에서부터 시작할 수 있도록 초기화한 것

점수를 바꾸기 위해선 setScore을 세팅해야 한다. 

setScore(score + 10)

이렇게 작성한다면 현재 점수(score)에 +10을 더하여 새로운 점수를 반환해줄 수 있다.

 

3. useState의 특징

간단하게 정리하면 다음과 같다.

• 값이 바뀔 때 마다 자동으로 화면에 업데이트 된다. ⭐⭐⭐
• 한번 값이 바뀌면, 화면에 그 바뀐 값을 실시간으로 보여준다.
• 1️⃣상태값, 2️⃣그 상태를 업데이트 할 함수를 배열로 반환한다.
• 상태 업데이트는 비동기로 처리된다.
• 여러개 사용할 수 있다.

const [name, setName] = useState('')
const [age, setAge] = useState(0)

 

4. "use"로 시작하는 모든 함수를 Hook이라고 한다

그래서 React에서는 useEffect, useRef 등등을 만날 수 있다. 그치만 이건 현재(25.01.28 기준) 갠프에서 useState이외의 다른 건 사용하지 않았으므로 나중에 사용될 때 같이 정리하겠다!

 

주의점?

Hook은 컴포넌트의 최상위 수준(ex. App.jsx) 혹은 커스텀 훅에서만 사용할 수 있다?

이게 뭔소리냐 카면, 컴포넌트 함수 안에서 맨 위쪽, 즉 렌더링 되는 JSX 코드 실행 전에 훅을 사용해야 한다는 뜻이다.

return 전에 있어야 한다.

if문 뒤에 썼다가 호된 에러를 당했다...

화면에서 렌더링 되는 건 return문 내부에 있는 것이므로, 컴포넌트에서 가장 상단에 선언되어야 react Hook을 사용할 수 있다. 

 

그럼 커스텀 훅이란 무엇인가?

 React에서 Hook을 이용해 기능을 재사용할 수 있도록 하는 함수이다. React에선 useState나 useEffect 이외에도 사용자가 직접 Hook을 만들어서 여러 컴포넌트에 재사용될 수 있다. 예시로 보는 것이 이해가 더 빠를 거 같다.

/*useCounter이라는 커스텀 훅 만들기*/
function useCounter(args){
  const [count, setCount] = useState(args)
  
  function increment(){
    setCount(count + 1)
  }
  
  function decrement(){
    setCount(count - 1)
  }
  
  return {count, increment, decrement}
}

function myComponent(){
  const {count, increment, decrement} = useCounter // 커스텀 훅 사용
  
  return(
  <div>
  	<h3>{count}</h3>
    <button onClick={increment}>증가</button>
    <button onClick={decrement}>감소</button>
  </div>
  )
}

이런식으로 내가 원하는 기능을 커스텀해서 사용할 수 있다.

 

[출처]

state: https://ko.react.dev/learn/state-a-components-memory

State: 컴포넌트의 기억 저장소 – React

useState : https://ko.react.dev/reference/react/useState