1. state란?

• 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
• 데이터는 변수와 state 에 넣는다.
• const, let, var 등의 변수와는 다르게 state는 값이 변하게 되면 렌더링이 일어난다.

2. 함수형 컴포넌트에서 useState 사용하기

• 리액트 v16.8이후부터는 useState라는 함수를 사용하여 함수형 컴포넌트에서도 state를 사용할 수 있게 되었다.
• Hooks의 종류 중 하나인 useState 사용한다.

❓ 참고) 배열 비구조화 할당(ES6의 destructuring문법)
→ 배열 비구조화 할당은 배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해 주는 문법이다.

const array = [1,2];
const one = array[0]; // 1
const two = array[1]; // 2
배열 비구조화 할당을 사용하면?
const array = [1,2];
const [one, two] = array;

① useState 사용하기

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

function Say(){
  const [message, setMessage] = useState('');
  function onClickEnter(){
  	setMessage('안녕하세요!');
  }
  function onClickLeave(){
  	setMessage('안녕히가세요!');
  }
  
  return(
  	<div>
      <button onClick={ onClickEnter }>입장</button>
      <button onClick={ onClickLeave }>퇴장</button>
      <h1> { message } </h1>
    </div>
  );
};

export default Say;

• useState 함수의 인자에는 상태의 초기값을 넣어준다.
• useState안에는 array, object등의 다양한 데이터를 담을 수 있다.
• useState()를 사용하면 2개의 array 데이터([데이터1, 데이터2])가 생긴다.
• 데이터1 변수: 실제 저장할 데이터가 들어있다.
  데이터2 변수: 저장할 데이터를 변경시킬 함수(세터함수)가 들어있다.

3. state를 사용할 때 주의사항

• state 값을 바꾸어야 할 때는 setState 혹은 useState를 통해 전달받은 세터함수를 사용해야 한다.
• 배열이나 객체를 업데이트해야 할 때 → 배열이나 객체 사본을 만들고 그 사본에 값을 업데이트 한 후, 그 사본의 상태를 setState 혹은 세터함수를 통해 업데이트 한다.

/* 잘못된 코드 */
// 함수형 컴포넌트
const [object, setObject] = useState({ a: 1, b: 1 });
object.b = 2;

/* 올바른 코드 */
// 객체 다루기
const object = { a: 1, b: 2, c: 3 };
const nextObejct = { ...object, b: 2 }; // 사본을 만들어서 b값만 덮어쓴다.

// 배열 다루기
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인 항목 제거
nextArray.map( item => ( item.id === 1 ? { ...item, value: false } : item ));
// id가 1인 항목의 value를 false로 설정

• 객체에 대한 사본을 만들 때는 spread연산자인 ...을 사용하여 처리한다.
• 배열에 대한 사본을 만들 때는 배열의 내장 함수들을 활용한다.

❓ 참고) 리액트 대 원칙: immutable data
→ state는 직접적으로 변경이안되기 때문에 state를 변경하고 싶으면 복사본을 만든 후 그 복사본의 상태를 setState를 통해 바꾼다.

• deep copy : 값공유x , 서로 독립적인 값을 가지는 복사
• ❌ let newArray = message; (복사가아니라 값 공유 => reference data type 참고)
  ⭕ let newArray = [...message]; (값 공유가 되지않고 복사)

❓ 참고) 미리정의된 함수를 넣을때는 소괄호()를 넣지않는다.
why? 소괄호()를 넣으면 함수가 바로 실행된다.

❓ 참고)