[React] 리액트에서 왜 useState를 쓰라고 할까

 

코드리뷰를 받았는데, 엄청 상세해서 놀랐다!

역시 해봐야 아는 것들이 아주 많다는 것을 깨닫는 요즘이다😎

 

 

🤔 그냥 변수 말고 state를 쓰는 가장 큰 이유

state가 변경 될 때 관련된 DOM을 다시 렌더링 되게 해야 한다면, state를 써야 한다!

→ SPA를 사용하고싶으면 state를 써야한다

 

왜냐하면 리액트는 state에 수정이 일어나면 state가 포함된 DOM을 재렌더링 해주기 때문인데....

 

그걸 알기 위해서는 리액트의 Life cycle을 알아야 한다🤯 #가보자고

 

 

🤔 setState말고 state를 직접 변경해주면 왜 화면 갱신이 안될까?

리액트의 컴포넌트는 Mount 상태에서 한번 render() 를 실행하고,

후에는 Update 상태에 진입하여 shouldComponentUpdate === true 일때만 render() 를 실행한다.

 

그래서 변경한 state가 화면에 보이게 되려면 Update상태에 들어가야 하는데 그러려면...

- state 또는 Props가 변경
- 부모 컴포넌트가 렌더링
- forceUpdate 사용

해야한다.

 

state가 변경되면 update가 돼야 하는거 아닌가? 라고 생각할 수 있으나, 리액트가 이 값이 변경 됐다는 것을 판단하는 기준이 객체의 메모리 주소이기 때문에, 객체의 주소가 변경되지 않고 내부의 값만 바뀌면 바뀐것으로 인식을 안하기 때문이다.

 

 

이와 관련해서 useState가 const를 사용하는 이유도 같이 정리할 수 있는데,

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

 

count 변수를 바꿔주는 건데 왜 let이 아닐까? 라고 생각 할 수 있다.

컴포넌트가 다시 렌더링되면 함수가 다시 실행되어 새 scope를 만들고, count변수도 새로 만들게 되고, 이는 이전 변수와 상관이 없게 된다. 그래서 const로 선언된 count 변수는 동일한 scope에서 다시 할당하는 것을 막을 수 있다고 한다!

 

 

🙄 그래서 내가 생각하기에는

DOM을 조작해야하는 데이터가 아니라면 일반 변수로 사용하는 것이 관리하기 편하다는 피드백을 받았다.

리액트에서는 일반 변수 말고 state를 쓰는 것이 좋다! 라고 알고있었는데 이는 DOM과 관련된 부분에서였고, 그게 아니라면 일반변수를 사용하는 선택지도 있다는 것을 잊지 말자! 

 

그리고 리액트 훅은... 클로저를 알아야 한다.

이미지 출처 : https://hewonjeong.github.io/deep-dive-how-do-react-hooks-really-work-ko/

 

 

👀 참고

https://tried.tistory.com/47

[React] state 사용법 및 사용하는 이유

 

https://velog.io/@wjdcksdud29/React-setState-useState%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-TIL-53

[React] setState & useState를 사용하는 이유 / TIL # 53

 

https://developerntraveler.tistory.com/59

[ React HOOK ] useState가 let 대신 const를 사용하는 이유

 

https://dudghsx.tistory.com/18

hooks에서 useState가 const로 선언되는 이유

 

https://hewonjeong.github.io/deep-dive-how-do-react-hooks-really-work-ko/

[번역] 심층 분석: React Hook은 실제로 어떻게 동작할까?