[React]React Hooks - useState() 사용법

[ 상태 관리 ]

 

 useState()는 컴포넌트에서 바뀌는 값을 관리하는 함수입니다. 

 

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

 

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

 

 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었는데요!

 

 이때 사용하는 함수가 useState() 함수입니다. 

 

 

 

[ useState ]

 

 useState()는 상태의 초기값을 인수로 전달 받아 호출됩니다. 

 

 이때의 반환값은 상태를 나타내는 배열로, 배열의 첫 번째 요소는 현재 상태 값, 두 번째 요소는 상태 값을 갱신해주는 Setter 함수 입니다. 

 

 즉 초기에는 상태값이 초기값으로 들어가 있고, 이 상태값을 바꾸고 싶다면 상태 함수(새롭게 바뀔 값)를 이용해서 변경할 수 있습니다. 

 

import { useState } from 'react';

const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);

// 또는

const 상태 = useState(상태 초기 값);
const 상태값 = 상태[0];
const 갱신함수 = 상태[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;

 

 

 

[ Input 예제 ]

 

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

 

// src/Input.jsx
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;