[React] 3-4. State를 바꾸고 싶으면?

📌 State를 바꾸는 방법들

state를 바꾸는 방법

counter 예제에서 state를 바꾸는 방법 2가지는 이미 앞에서 배웠다.

1. setCounter() 함수의 인자로 고정값 넣어주기 (숫자, 문자열 모두 가능)

2. 아래처럼 현재 count 값을 변형한 식을 setCounter() 함수의 인자로 넣어주기

. . . . .
function App() {
  const [counter, setCounter] = React.useState(0);
  const onClick = () => {
    setCounter(counter + 1);
  };
. . . . .

우리가 지난 시간에 썼던 코드이다.

but counter는 다른 곳에서도 update될 수 있기 때문에 위 코드는 별로 좋은 코드는 아니다.

즉, 이전 state(counter)를 이용해서 현재 state를 바꾸려고(setCounter(counter + 1)) 했지만 결과가 예상과 다르게 나올 수 있는 것이다.

위 방법을 더 나은 방법으로 바꾸면 다음과 같이 된다.

const onClick = () => {
  setCounter((current) => current + 1);
};

- setCounter의 매개변수로 current를 설정해 주었는데, 이는 현재의 count 값을 받는다.

- setCounter 함수가 return하는 값이 곧 새로운 state 값이 된다.

- 리액트는 current가 확실하게 현재 값이라는 것을 보장하기 때문에 위와 같이 화살표 함수를 사용하여 현재 값을 이용해 새로운 state 값을 만들어내는 방식이 더 안전하다.