[React] useState()

💡 React에 가장 기본이 되는 Hook을 뽑자면 useState()가 아닐까.. 할 정도로 정말 많이 사용하게 되었다. 
상태값을 직접 조작해서 변경하지 않아도 되는 편리함을 가지고 있으니!!
useState()를 아래와 같이 정리해보고자 한다. 

 

 

🫠 useState()란?

> state 값이 변경되면 re-rendering 

💡 const [state, setState] = useState('기본값');

* state : 변경하고자 하는 값 
* setState : state를 변경
* 기본값 : state의 기본값 

 

❗️ useState() 사용 주의점 

* 하나의 컴포넌트 안에서만 사용할 수 있다.
* state의 값을 직접 수정하지 않는다. 

 

 

 

 

---

🤜🏻 useState()를 사용해야 하는 이유?

> 버튼을 누르면 count가 +1 되는 간단한 코드를 리액트로 작성해 보자

// App.js 

import CounterTest from './components/CounterTest';

function App() {
  return (
    <CounterTest />
  )

// CounterTest.js

const CounterTest = () => {
  let count = 0;

  return (
    <div>
      <button onClick={() => (count += 1)}> +1 </button>
      <br />
      Counter: {count}
    </div>
  )
}

export default CounterTest

✅ button을 구현하는 CounterTest 컴포넌트를 하나 생성하고, 이를 App.js에 추가해 주었다.

 

 

 

👉🏻 화면 결과물

 

✅ '+1' button을 누르면 Counter : {count} 즉, count 값이 +1씩 되기를 원한다.

 

 

👎🏻 but 버튼을 클릭했을 때, 생기는 변화는?

아무.. 반응도 없다.. 이게 무슨 일..

 

 

❗️ 이유는? 함수 컴포넌트는 그냥 함수이기 때문이다. 

현재 함수 컴포넌트를 rendering 하는 것은 App.js 😂
따라서 CounterTest 컴포넌트에서 값이 변경된다고 하여 App.js에서 return 호출되는 것은 아니기 때문에 값이 변경되지 않는 것이다. 
따라서 CounterTest 컴포넌트 자체 내에서 상태값을 관리해야 한다!

 

 

 

---

💛 useState()를 사용해 count를 관리해 보자!

// ConterTest.js

import { useState } from "react"

const CounterTest = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <button onClick={() => setCount(count + 1)}> +1 </button>
      <br />
      Counter: {count}
    </div>
  )
}

export default CounterTest

✅ useState를 사용하기 위해 import 하였다.
✅ 변경하고자 하는 값 count와 count의 값을 변경하는 setCount를 useState를 통해 선언하였다. 
✅ useState(0)으로 값을 주어 count의 기본값으로 0을 주었다.
✅ button onClick 이벤트에서 setCount()를 통해 count의 값이 +1 만큼 변경되도록 작성하였다.

 

 

👍🏻 실행 결과를 확인해 보자!

💡 화면처럼 CounterTest 컴포넌트에서 상태값을 useState()로 직접 관리하기 때문에 값이 변경될 때마다 rendering 되는 것을 확인할 수 있다.
(물론 부모 컴포넌트에서 상태값을 관리하는 것이 더 좋지만, useState()를 사용하는 이유를 설명하기 위한 예시였기에 이 정도로만!)