안녕하세요
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만 사용하게 될 거에요. 
윗 분 말씀대로 const 로 선언한 variable에 re-assign은 불가능하다는 에러구요
리액트에서 state를 직접 수정하시면 안됩니다.
반드시 setState 함수를 통해 수정해주셔야 돼요. 본문 같은 경우엔 setValue가 되겠네요.
이미 setValue함수를 통해 카운터 state를 변경하려고 하신것 같은데 단순히 value++는 value값 자체를 업데이트 해버리기 때문에 문제가 됐습니다.
2개의 좋아요
몇줄 첨언 하자면…
제생각엔 보통 UI개발언어들은 아래 1,2 두가지로 정의하여 코딩…
-
렌더링시 무관한 정의(선언) : 화면에 반영되지 않음
-
UI(사용자가 볼수있는 브라우져, 앱화면등등)에 사용될 정의(선언)
-
리액트(플래터, 기타 프론트개발언어) 기준으로 설명하자면
case 1 : const [명1, 명2] = useState(“값” 또는 json or 배열 or 기타 등등)
*** 명1의 값을 화면에 반영하려면 > 명2(“변경할 값 또는 json or 배열”)**
- 화면에 반영할 필요가 없울 경우 useState는 사용하지 말고 아래 처럼…(브라우져 메모리 조금 상승됨)
case 2 : const var1 = 1 or {name: “홍길동”, no:1234}
- const라당연한 것이지만 한번 정의되면 변경 할 수 없음(c언어 상수선언처험)
case 3 : var name = “홍길동”, no=1234
case 4 : let name = “홍길동”, no=1234
case 5 : string name = “홍길동” , int no=1234
설명
1번외의 정의된 케이스 들로 코딩시 최초 렌딩시 화면에도 값들이 적용(보임) 예를 든다면 함수 알고리즘이 복잡해서 늦게 처리되거나, 값이 정의되지 않았거나, 인터넷 속도가 느려서 늦게 도착한 값들을 화면에 적용하기 위해서는 1번만 가능합니다. 이외는 값을 변경하더라도 화면을 컨트롤하는 메모리에는 반영이 되지 않음(useState를 내장한 클래스(함수,컴포넌트) 제외경우)
왜냐 하면 화면에 뿌려주는 건 별도의 코어(엔진)에서 담당하기 때문입니다.
대부분의 프론트개발 언어인 안드로이드 스튜디오, 플래터(안 or ios), 리액트(native 포함)등등 주위에서 접하는 언어들이 대부분 그렇습니다.
const val1 = 1; > 값변경 불가 에러발생
const vararr = new Array(); > 배열 값 변경 가능, 당연한 말이지만 Array클래스로 선언 했기때문입니다. 선언된 Array()는 변경 할 수 없지만 이들을 관장하는 브라우져 엔진에 정의된 Array()가 메모리 할당을 하기 때문입니다.하지만 이것도 화면과 동기화 되는 않습니다.
결론
뭔가를 정의(선언)할때 화면에 보여줄것과 보여줄 필요가 없는 것들 구분하면 좋을것 같습니다.
*혹시 내용에 문제가 있다면 답글 부탁해요…오타는 이해해 주십시요