[React] 리액트의 핵심, State (with useState)

State란?

리액트 컴포넌트의 변수로, 화면에 자동으로 반영되는 변수이다. 기본 형태는 아래와 같다.

const [state, setState] = useState()

state : 변수
setState : 변수를 바꿔주는 함수. setState(a) 하면 statd의 값이 a가 된다.
useState() : 괄호 안에는 변수의 초기값이 들어간다.

 

React hook에서 제공하는 기능으로, state를 사용하기 위해서는 useState를 import 해와야 한다.

import { useState } from 'react'

 

state의 동작원리

엄밀하게 따지자면, state가 '실시간'으로 화면에 반영되는 것은 아니다. 그 이유는 state의 동작원리를 살펴보면 알 수 있다.

 

브라우저는 state가 변경될 때마다 해당 컴포넌트를 다시 그려오는 방식으로 state의 변화를 자동 적용한다. (이것을 리렌더링이라고 한다.) 다시 그려질 때마다 변경된 state가 화면에 노출되는 되는 것. 그렇기 때문에 setState() 함수가 동시에 여러번 실행되면 비효율적인 리렌더링이 많이 이루어지게 된다.

 

그래서 리액트는 이러한 것을 미연에 방지하고자 임시 저장 공간을 만들었다. 그 공간에 state의 변경사항을 임시 저장하며, 여러번의 setState가 누적될 경우 임시 저장 공간에서 모든 변화를 먼저 적용한다. 그리고 최종 값을 브라우저에 렌더링한다.

const onChangeMyContents = (event) => { 
	setMyContents(event.target.value) 
	if(myWriter && myTitle && myContents){ 
		setIsActive(true) 
	} 
}

상단의 예시 코드를 보자. myWriter, myTitle, myContents의 state 값이 변경되는 것과 해당 값을 불러오는 것 사이에는 상기의 이유 때문에 event 1회의 딜레이가 있다. 따라서 위의 onChange와 같은 이벤트 핸들러 함수 활용시에는 state 값을 불러오지 않고 event.target.value를 직접 불러오는 것이 낫다.

 

(setState()는 event handler 함수에서 비동기로 작동한다고 생각해두면 편하다.)

 

+ 덧, state를 사용했을 때 예상 못한 에러가 발생한다면, state 값을 분기마다 콘솔로 찍어서 확인해보자. 그러면 어디가 문제인지 찾을 수 있다.