State란

Component 내에서 유동적으로 변할 수 있는 값을 저장한다.

개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다.

State 값이 변경되고 재렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링한다.

State 사용예시 코드

import { userState } from "react";

function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>버튼을 {count}번 눌렀습니다.</p>
      <button onClick={() => setCount(count + 1)}>클릭</button>
    </div>
  );
}

❗State 값을 직접 변경하지 말자.

올바르지 않은 예시

import { userState } from "react";

function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>버튼을 {count}번 눌렀습니다.</p>
      <button
        onClick={() => {
          count = count + 1;
        }}
      >
        클릭
      </button>
    </div>
  );
}

State 값을 직접 변경하게 되면 React가 React가 Component를 다시 렌더링할 타이밍을 알아차리지 못한다.

setState 함수를 호출할 때 React에게 '다시 렌더링 해달라'는 명령이 내려지므로 반드시 setState 함수를 이용해 값을 변경해야 한다.

🌀 State를 변경하는 두가지 방법

1. setState 내에 변경할 값 넣기

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

2. setState에 함수 넣기

const [count, setCount] = useState(0);
setCount((current) => {
	return current + 1
})

State를 변경하는 방법으로는 위의 두가지 방법이 있는데 함수를 넣는 두 번째 방법이 반환(return)하는 값으로 State가 변경되므로 현재 값을 기반으로 State를 변경하고자 하는 경우, 함수를 넣는 방법을 권장한다.

❗Object를 갖는 State를 만들 때 주의사항

올바르지 않은 예시

const [user, setUser] =
    useState({name: '나나', grade: 1})
	setUser((current) => {
    	current.grade = 2;
      	return current;
    })

위의 코드와 같이 Object를 값으로 갖는 State도 만들 수 있다.
그러나 이와 같은 경우에는 user Object 안의 grade가 변경되었지만 user자체는 변경되지 않았기 때문에 React가 State의 변경을 감지하지 못하고 이에 따라 재렌더링을 하지 않는다.

그럼 어떻게 처리를 해야 State의 변경을 감지하도록 해야할까?

Object 자체를 새로 만들고 기존 Object내용을 복사하고 원하는 값을 변경하면 된다!
아래의 예시 코드를 참고하자.

const [user, setUser] = useState({ name: "나나", grade: 1 });
setUser((current) => {
  const newUser = { ...current };
  newUser.grade = 2;
  return newUser;
});

이렇게 새로운 Object를 만들어서 변경하고 싶은 값을 넣고 return을 해야 React가 state가 변경되었음을 알고 컴포넌트를 재렌더링한다.