3. state

state란?

• 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.
• State는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만,
• props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이가 있다.
• props를 사용했는데도 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있다.

클래스형 컴포넌트의 state

• 반드시 super(props)를 호출해 주어야 합니다.
• this.state 값에 초깃값을 설정해 주었습니다. 컴포넌트의 state는 객체 형식이어야 합니다.
• render 함수에서 현재 state를 조회할 때는 this.state를 조회하면 됩니다.
• this.setState를 사용하여 state 값을 업데이트할 때는 상태가 비동기적으로 업데이트됩니다.
• this.setState의 인자로 함수를 넣어 줄 때는 코드를 다음과 같은 형식으로 작성합니다.

this.setState((prevState, props) => {
return {
  // 업데이트하고 싶은 내용
	}
})

• setState를 사용하여 값을 업데이트하고 난 다음에 특정 작업을 하고 싶을 때는 setState의 두 번째 파라미터로 콜백(callback) 함수를 등록하여 작업을 처리할 수 있습니다.

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

배열 비구조화 할당

• 배열 비구조화 할당은 이전에 배운 객체 비구조화 할당과 비슷합니다.

const array = [1, 2];
const one = array[0];
const two = array[1];

//array 안에 있는 값을 one과 two에 담아 주는 코드인데요. 
//위 코드는 배열 비구조화 할당을 사용하면 다음과 같이 표현할 수 있습니다.

const array = [1, 2];
const [one, two] = array;

useState 사용하기

• useState 함수의 인자에는 상태의 초깃값을 넣어 줍니다.
• 함수를 호출하면 배열이 반환되는데요. 배열의 첫 번째 원소는 현재 상태이고, 두 번째 원소는 상태를 바꾸어 주는 함수입니다.
• 여러번 사용가능

state 주의사항

• state 값을 바꿀 때 세터 함수를 사용해야 한다. 직접적으로 바꾸면 안됨.
• 배열이나 객체를 업데이트 하는 과정
  1. 배열, 객체 사본을 만든다. ( spread 연산자 )
  2. 사본에 값을 업데이트 한 후 사본의 상태를 setState, 세터 함수를 이용해 업데이트 ( 배열의 내장함수들. map, filter ..)

  const array = [
        {id : 1, value : true},
        {id : 2, value : false},
        {id : 3, value : true},
    ]
    let nextArray = array.concat({id:4})          // id가 4인 객체 추가
      nextArray.filter(item => item.id !== 2)     // id가 2인 객체 제거
      nextArray.map(item => item.id === 1 ? {...item, value:false})
      // id가 1인 객체 값을 false로 변경