02. 컴포넌트 (5) useState

출처 - 리액트를 다루는 기술(김민준 지음)

---

리액트 16.8 이후 부터는 useState 함수를 통해 함수형 컴포넌트에서도 state를 사용할 수 있게 됐다

이 과정에서 Hooks를 사용하게 된다

 

state의 값을 업데이트 할 때는, state 값에 직접 접근하면 안됨.

setState 또는 세터 함수로 값을 변경해야 한다 (그렇지 않으면 바뀐 값이 렌더링 X)

(1) useState 사용하기

Say.js 파일을 생성한다

useState로 state 값을 바꿀 때는 useState를 통해 전달받은 세터 함수를 사용한다

// Say.js
import React, { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState(''); // useState() 안에는 초기값을 준다
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히 가세요!');

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
};

export default Say;

 

(2) 한 컴포넌트에서 useState 여러번 사용하기

useState는 한 컴포넌트에서 여러번 사용해도 상관없다

 

// Say.js
import React, { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히 가세요!');

  const [color, setColor] = useState('black');

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1 style={{ color }}>{message}</h1>
      <button style={{ color: 'red' }} onClick={() => setColor('red')}>
        빨간색
      </button>
      <button style={{ color: 'blue' }} onClick={() => setColor('blue')}>
        파란색
      </button>
      <button style={{ color: 'green' }} onClick={() => setColor('green')}>
        초록색
      </button>
    </div>
  );
};

export default Say;

 

배열이나 객체를 업데이트할 때는 사본을 만들고, 그 사본에 값을 업데이트한 후에

그 사본의 상태를 세터 함수를 통해 업데이트 한다

 

// 객체 다루기
const object = { a: 1, b: 2, c: 3 };
const nextObject = { ...object, b: 2 }; // 사본을 만들고 b값을 2로 덮어 쓰기

// 배열 다루기
const array = [
  { id: 1, value: true },
  { id: 2, value: true },
  { id: 3, value: false }
];
let nextArray = array.concat({ id: 4 }); // 새 항목 추가
nextArray.filter(item => item.id !== 2); // id가 2인 항목 제거
netxArray.map(item => (item.id === 1 ? { ...item, value: false } : item));
// id가 2인 항목의 value를 false로 변경

 

객체에 대한 사본을 만들 때는 spread 연산자를 사용하고

배열에 대한 사본을 만들 때는 배열의 내장함수(concat 등)를 사용한다

 

객체를 갖는 state 예시

 

import React, { useState } from 'react';

function App() {
  // useState 초기값을 객체로 설정한다
  const [person, setPerson] = useState({
    name: "guest",
    count: 0
  });
  
  return (
    <div className="App">
      <button onClick={() => {
      	// current는 초기값을 의미
        setPerson((current) => {
          const newPerson = { ...current };
          newPerson.count = newPerson.count + 1;
          return newPerson;
        })
      }}>여기를 클릭</button>
      <span>{person.name}님이 버튼을 {person.count}회 클릭하였습니다.</span>
    </div>
  );
}

export default App;