[React] React Hooks - useState()

Jenny·2023년 4월 25일

React

목록 보기

2/3

상태 관리

리액트 컴포넌트에서는 동적인 값을 상태(state) 라고 부른다.
사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에 상태 관리가 필요함

React Hooks이 나오기 전까지 -> 클래스 기반의 컴포넌트를 사용해서 상태값을 관리할 수 있었지만, 클래스 기반의 컴포넌트는 유지 보수가 힘들다는 단점이 있음

이후 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었고, 이때 사용하는 함수가 useState() 임!

useState()

함수형 컴포넌트에서 상태 관리에 사용되는 함수, 상태의 초기값을 인수로 전달 받아 호출하고 상태를 나타내는 배열을 반환함

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
  const [count, setCount] = useState(0);

1) useState()를 호출하는 것은 무엇을 하는 것인가?

👉 위의 예제와 같이 "state 변수"를 선언할 수 있음

useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같음.
일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수(위의 예제에선 count)는 사라지지 않음

2) useState()의 인자로 무엇을 넘겨줘야 하는가?

👉 state의 초기값을 넘겨줘야 한다.

객체일 필요 없음
숫자 타입 / 문자 타입을 가질 수 있음
2개의 다른 변수를 저장하고 싶다면 useState()를 두 번 호출해야 함

3) useState()는 무엇을 반환하는가?

👉state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 요소가 담긴 배열을 반환
이것이 바로 const [count, setCount] = useState()라고 쓰는 이유임

ㄴ 배열의 첫 번째 요소 : 현재 상태 값 (count)
ㄴ 두 번째 요소 : 상태 값을 갱신해주는 Setter 함수 (setCount)
☑️ 즉 초기에는 '상태값'이 초기값이며, 이것을 바꾸고 싶다면 상태 함수를 이용해서 변경함

사용

1) state 가져오기

<p>You clicked {count} times</p>

2) state 갱신하기

<button onClick={() => setCount(count + 1)}>
    Click me
</button>

예시

   import React, { useState } from 'react';

  function Example() {
    // state 변수와 해당 state를 갱신할 수 있는 함수 생성
    // 인자 값으로 0(state의 초기값) 전달하여 count를 0으로 초기화
    const [count, setCount] = useState(0);
      
    return (
      <div>
        <p>You clicked {count} times</p>
		//사용자가 버튼을 클릭하면 setCount 함수를 호출하여 count를 갱신함
		//새로운 count 변수를 Example 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링
        <button onClick={() => setCount(count + 1)}>
         Click me
        </button>
      </div>
    );
  }

예제

1) Counter

초기 숫자가 0인 상태에서 + 버튼을 누르면 숫자가 증가하고, - 버튼을 누르면 숫자가 감소하는 컴포넌트

// src/Counter.jsx
import React from 'react';
import { useState } from 'react';

const Counter = () => {
  const [number, setNumber] = useState(0);

  const plusNum = (e) => {
    setNumber(preNum => preNum + 1)
  }
  const minusNum = (e) => {
    setNumber(preNum => preNum - 1)
  }
  
  return (
    <div>
      <button type="button" onClick={plusNum}>+</button>
      <span> {number} </span>
      <button type="button" onClick={minusNum}>-</button>
    </div>
  );
};

export default Counter;
// src/App.jsx
import Counter from './Counter';

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;

2) Input

제목과 본문을 입력할 수 있는 컴포넌트

import React, { useState } from 'react';

const Input = () => {
  const [input, setInput] = useState({
    title: '',
    contents: ''
  });

  const {title, contents} = input;
  const onChange = (e) => {
    // 이벤트를 부른 요소의 value와 name 키의 값 가져온다.
    // name은 title or contents이며
    // value는 입력한 텍스트
    const {value, name} = e.target;

    setInput({
      ...input, // 기존 input 객체를 복사한 뒤
      [name]: value  // title or contents 키를 가진 값을 value로 설정
    })
  };
  
  return (
    <>
      <input type="text"
        name="title"
        value={title}
        placeholder="제목을 입력해주세요"
        onChange={onChange} />
      <br/>
      <textarea 
        name="contents"
        value={contents}
        cols="30"
        rows="10"
        onChange={onChange}></textarea>
    </>
  );
};

export default Input;