[React] UseState

1. UseState

컴포넌트의 상태 변수를 생성 및 업데이트할 때 이용된다.

useState(initialState)

const [count,setCount] = useState(0);

• 초기값은 객체,문자열,숫자, 배열,불리언 타입을 가질 수 있다.
• 컴포넌트의 현재 상태 값은 count에 저장되어 있고
  그 값을 변경하고 싶으면 setCount 함수를 통해 업데이트할 수 있다.

예를 들어, 버튼을 누르면 카운트가 1씩 증가하도록
구현해보자.

const [count,setCount] = useState(0);
const handleAdd = () => setCount(count+1);

return(
  <>
  <p>{count}</p>
<button onClick={handleAdd}>1씩 증가<button>
  </>
  );

• 버튼이 클릭할 때 마다 handleAdd 함수가 실행되면서
  setCount를 통해 1씩 증가하는 모습을 볼 수 있다.
• useState를 이용할 때 값을 저장하는 변수(count)와 값을 업데이트하는 함수(setCount)를 반환한다.

  🧐 만약 setCount(count+1)를 n번 호출하면 count값이 n이 될까❓
  ➡️ No! 해당 함수가 호출될 때 현재 상태를 📸 찍어두는데 이때 count 변수가 초기값으로 고정되어 있다.
  따라서 한번에 여러번 호출해도 이미 저장된 count 변수에서 1을 더하기 때문에 모두 1로 나온다.

setCount(count+1); //setCount(0 + 1)
setCount(count+1); //setCount(0 + 1)
setCount(count+1); //setCount(0 + 1)

만약 n번 호출 시 count가 n을 만들고 싶다면
이전 상태값을 받아온 다음 1씩 증가시켜주면 된다!

setCount(count => count+1); //setCount(0 => 1)
setCount(count => count+1); //setCount(1 => 2)
setCount(count => count+1); //setCount(2 => 3)

• count 인수가 이전 상태 값을 전달해주는 역할을 한다.

2. 상태값 업데이트

2.1 배열 상태값 추가 및 삭제

초기값 [1,2,3] 배열에서 다른 값들을 추가할 때
spread 문법을 이용한다.

const [arr,setArr] = useState([1,2,3]);
setArr([...arr,4,5,6);

배열에서 특정 아이템을 제거할 때 filter 메서드를 이용한다.
이 메서드를 통해 해당 아이템을 포함하지 않는 새로운 배열을 만들 수 있다.

const [arr,setArr] = useState([1,2,3]);
setArr(arr.filter(num => num !== 2));

2.2 배열 상태값 수정

const [shapes, setShapes] = useState([
  { id: 0, type: 'circle', x: 50, y: 100 },
  { id: 1, type: 'square', x: 150, y: 100 },
  { id: 2, type: 'circle', x: 250, y: 100 }
]);

const handleChange = () => {
     setShapes(shapes.map((shape) => {
          if(shape.type === 'square') return {...shape,y:shape.y+10};
          return shape;
  }))
            

return (
 <>
  <button onClick = {handleChange}>
  직사각형이면 y값 업데이트
  </button>
  </>
);

• 배열 map 메서드를 통해 순회하면서 모양이 직사각형이면 spread 연산을 통해 기존에 있던 값들을 가져온다.
• y값을 변경해야 하므로 y라는 key값에 상태 변수에 저장된 값(shape.y)에서 10을 더한 값으로 변경한다.