ch08.State를 사용할 때 주의 사항

• State값을 변경할 때에는 반드시 setState혹은 useState을 셰터 함수를 사용해야 한다.
• 잘못된 예시

  • //클레스형 컴포넌트의 잘못된 예시
    this.state.number = this.state.number+1;
    this.state.array = this.array.push(2);
    this.state.object.value = 5;
    //함수형 컴포넌트의 잘못된 예시
    const [object,setObject] = useState({a:1,b:1});
    object.b = 2;

• 배열이나 객체를 업데이트해야 될 경우에는 배열이나 객체 사본을 만들고 그 사본에 값을 업데이트한 후 그 사본의 상태를 setState/ 셰터 함수를 통해 업데이트한다.

• //객체 다루기
  const object = {a:1,b:2,c:3};
  const nextObject = {...object,b:2};
  //객체 사본을 만들떄에는 spread연산자라는 ...을 사용하여 처리
  //배열 다루기
  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로 변경
  //배열사본을 만들때는 배열의 내장함수 활용

• ps 추신 spread란?

  const arr = [1, 2, 3, 4, 5];
  const a = [...arr];
  
  console.log(a) // [1, 2, 3, 4, 5];​