안녕하세요 왜 리액트 훅쓸때 let 대신 const 쓰는건가요?

[skibidi-camera]

안녕하세요 현제 코딩학원에서 리액트를 배우고 있는데요

선생님도 그렇고 책도 그렇고 다 useState를 쓸 때 const를 사용하던데요

왜 let을 안쓰는걸까요? 그러면 값 바꾸기도 더 쉬울 것 같아서요. 학원 숙제도 let으로 해봤는데 잘 됬어요.

https://github.com/skibidi-camera/HelloWorld/blob/main/myapp.html

선생님도 모른다고해서 찾아보다가 여기에 여쭈어보아요

[C17AN]

안녕하세요, @skibidi-camera 님!

그러면 값 바꾸기도 더 쉬울 것 같아서요. 학원 숙제도 let으로 해봤는데 잘 됬어요.

먼저 useState 가 리턴하는 상태값은 직접 변경해도 재렌더링이 일어나지 않기 때문에, var, let 키워드로 값을 변경하면 의도하신 대로 동작하지 않을 가능성이 큽니다.

let [count, setCount] = useState(0)

const handleClick = () => {
  count += 1;
} 

// 1. 버튼을 눌러 count 값을 1씩 증가시킵니다.
<button onClick={handleClick}>+</button> 

// 2. 버튼을 눌러도 count 값은 여전히 0입니다.
// count는 상태 업데이트 함수(setCount)에 의해 업데이트되지 않았으므로 재렌더링이 일어나지 않았기 때문입니다.
<div>{count}</div>  

따라서 상태값은 var, let 키워드로 선언해 직접 변경할 일이 없으므로 재할당이 일어나지 않는다고 생각할 수 있습니다.
또한 상태 업데이트 함수(setState) 역시 useState() 가 리턴하는 함수를 변형해 사용할 필요가 없으므로 재할당할 필요가 없는 변수입니다.

즉 일반적인 경우에는 상태값과 업데이트 함수를 재할당할 필요가 없으므로, const 키워드로 '이 변수는 값을 직접 변경할 수 없어. 그럴 필요도 없고.' 라고 선언하는 것이라 이해할 수 있을 것 같습니다.

[eggmun98]

https://dudghsx.tistory.com/entry/hooks%EC%97%90%EC%84%9C-useState%EA%B0%80-const%EB%A1%9C-%EC%84%A0%EC%96%B8%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

위 글에 리액트 훅에서 const를 사용하는 이유가 자세히 나와있어요!
참고하면 좋을 거 같습니다!