useState를 사용하는 이유

태권·2022년 8월 15일
0

개념알기

목록 보기
10/26

state값을 변경 시킬 때 사용하는 함수들이다
근데 왜 this.state.값 = 변경 값와 같이 변경하는 것이 아닌 이 두 함수를 사용해야 할까.

React의 라이프 사이클의 흐름과 state의 저장방식을 알면 그 이유를 알 수 있다

리액트가 웹 상에 렌더링 되기 위해선 render() 메서드가 실행되어야한다
리액트의 컴포넌트는 생성된 후 Mount 상태에서 한 번 render() 메서드를 실행하고, 후에는 Update 상태에 진입해 shouldComponentUpdate의 값이 true일 때만 render() 메서드를 실행한다 ( 이걸 뛰어넘는 메서드가 아래 설명된 forceUpdate 이다)

따라서 우리가 변경한 state가 화면에 보이려면 첫째로 Update상태에 진입해야한다

Update 상태에 진입하는 상황

  • state 또는 props가 변경
  • 부모 컴포넌트가 렌더링
  • forceUpdate 사용시

state의 저장방식이 '객체'이고
값이 변경 되었다는걸 판단하기 위해 리액트는 객체로 저장된 state를 비교 연산한다

이 때 객체이기 때문에 비교하는 판단 근거가 객체의 메모리 주소임으로 직접 state 값을 수정 할 경우 변경이 안된 것으로 판단하고 Update 상태로 진입 하지 않는다

때문에 직접 변경하지 않고 새로운 객체를 만들어서 할당 하는 것으로 변경해야 하는 것이며 그 것을 위해 setState(), useState() 를 사용하는 것이다

profile
2022.08 개발자 시작

0개의 댓글