[React] State 란?

이번 게시물에서는 컴포넌트의 상태를 업데이트를 시켜주는 useState에 대해서 알아보려고 한다.
props의 경우 부모 컴포넌트에서 상태를 설정하고 자식 컴포넌트에서는 readonly(읽기상태)로만 사용할 수 있는 단점이 존재한다.

이를 해결하는 것이 state이다.

---

state의 종류

1. 클래스형 컴포넌트의 state
   state : 객체형
2. 함수형 컴포넌트의 useState
   sate : 데이터 타입 무상관

이번 게시물에서는 함수형 컴포넌트에서 useState hook을 사용하는 방법을 다루려고 한다.

---

배열 비구조 할당을 통한 useState 사용

const [text, setText] = useState('');

이러한 식으로 비구조 할당을 통한 useState를 선언하여서 사용 할 수 있다.

• 함수의 인자 : 초기값
• 반환(retrun)값
  1. 현재 상태
  2. 상태를 바꾸어주는 함수 -> 새터함수

---

useState 사용법

한 컴포넌트에서 useState를 여러 번 사용도 가능하다.

import React, { useState } from 'react';

const Say = () => {
  const [text, setText] = useState('');
  // 첫번 째 사용 : 아래에서 바로 새터함수 정의 하여 함수로 생성
  const onClickEnter = () => setText('안녕');
  const onClickLeave = () => setText('잘가');

  const [color, setColor] = useState('black');
  // 두번 째 사용 : 새터함수를 return부에 바로 사용

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1 style={{ color }}>{text}</h1>
      <button style={{ color: 'red' }} onClick={() => setColor('red')}>
        // onClick 이벤트에 대한 새터함수를 바로 정의하여 사용
        빨간색
      </button>
      <button style={{ color: 'blue' }} onClick={() => setColor('blue')}>
        파란색
      </button>
      <button style={{ color: 'green' }} onClick={() => setColor('green')}>
        초록색
      </button>
    </div>
  );
};

export default Say;

---

객체나 배열에 대한 불변성 유지를 하면서 사용

객체나 배열에서는 불변성을 유지하면서 사용을 하여야 한다.
useStae, 세터 함수를 통한 업데이트가 필수이다.

spread 연산자 ...Obj
배열 내장 함수 concat, filter, map정도를 사용할 수 있다.