React onClick 관련해서 에러가 발생해 질문 올립니다.

안녕하세요
React 를 공부하고 있는 학생입니다.

아주 간단한 카운터앱을 만들었는데 원인을 알 수 없는 에러가 발생해 원인을 알고싶어 글 올립니다.

function App() {
  const [value, setValue] = React.useState(0);

  return (
    <div className="App">
      <p>{ value }</p>

      <button onClick={() => setValue(value++)}>++</button>
    </div>
  );
}

상단의 코드는 value++에서 에러가 발생하고 있고

하단의 코드는 해결한 코드입니다.

function App() {
  const [value, setValue] = React.useState(0);

  return (
    <div className="App">
      <p>{ value }</p>

      <button onClick={() => setValue(value + 1)}>++</button>
    </div>
  );
}

에러는
TypeError: Assignment to constant variable.
라고 하는 에러를 출력하고 있습니다.

무엇이 원인인지 알고싶습니다.

두서없이 쓴 글이라 죄송합니다.
감사합니다.

에러 메시지의 내용은 const 변수에 새로운 값을 지정하면 안된다는 내용입니다. 자바스크립트의 let과 const에 대해서는 잘 알고 넘어가야 합니다.
리액트의 함수형 컴포넌트에서는 함수에서 선언한 변수의 값을 직접 변경할일이 잘 없어서 const만 사용하게 될 거에요. :grin:

아하 알겠습니다!
감사합니다!

1 Like

윗 분 말씀대로 const 로 선언한 variable에 re-assign은 불가능하다는 에러구요
리액트에서 state를 직접 수정하시면 안됩니다.
반드시 setState 함수를 통해 수정해주셔야 돼요. 본문 같은 경우엔 setValue가 되겠네요.
이미 setValue함수를 통해 카운터 state를 변경하려고 하신것 같은데 단순히 value++는 value값 자체를 업데이트 해버리기 때문에 문제가 됐습니다.

2 Likes

헉 이제 봤네요…
친절한 답변 감사합니다!

1 Like