[Legacy][React] state, setState, useState 란 무엇일까?

[React] state, setState, useState 란?

React의 핵심 중 1개인 state, setState, useState에 대해서 알아보도록 하자.

state

state란 무엇일까? 사실 state만 제대로 이해하고 사용할 수 있다고 하면 react의 반은 이해했다고 할 수 있을 것 같다. 그냥 간단하게 생각하면 state는 변수이다. 그렇다면 이런 생각이 문득든다. const, let, (var)가 있는데 뭐하러 state라는 변수를 사용하지? 무슨 차이점이 있지? 라는 궁금증이 생길 것이다. state는 일반 변수와 다르게 값이 변하게 되면 렌더링이 일어난다. 즉, 값이 변하게 되면 연관있는 컴포넌트들이 다시 렌더링이되어 화면이 바뀌게 된다. state와 함께 사용되는 함수는 setState이다. setState는 state 값을 변경시켜주는 함수이다. 바로 이해하기 힘들 수 있다. 더 자세하게 예제를 통하여 알아보자.

const [state, setState] = useState(초기값)

state는 위와 같이 선언한다. state는 변수, setState는 state를 변경시켜주는 함수, useState는 state, setState를 return 하면서 초기값을 설정해주는 hook이다.

state 값 변경하는 방법

위에서 설명했듯이 state 값은 setState 함수를 이용하여야 한다. setState 함수를 이용하여 값을 변경해야지만 react가 state 값이 변경되었다는 것을 인식하여 화면을 렌더링 하기 때문이다.

state 변경 시 값 주의점

예를들어 setState(3)을 하게 된다면 state 값은 3으로 변경되면서 렌더링이 되겠지만, state = 3이라고 하면 값은 변경이 되겠지만 렌더링이 되지 않는다. 이점을 주의하여 state 값을 사용하여야 한다.

setState 시 이전 state 값 사용 방법

state는 number, string, boolean 등 1개의 자료형을 넣을 수 있지만, 배열이나 객체와 같은 것도 사용할 수 있다. 아래 예시를 확인해보자.

const [fruit, setFruit] = useState({ color : "red", name : "apple" })

위 state는 과일 state이다. 여기서 name만 딸기로 변경하고 싶은 경우 여러가지 방법이 있다. 3가지 방법을 확인해보자. 첫번째는 새로운 객체를 만들어서 setFruit 하는 방법. 두번째는 fruit state를 이용하여 name만 변경하는 방법. 세번째는 prevState를 이용하여 이전 state 값을 사용하여 setState를 하는 방법이 있다.

1. 새로운 객체를 만들어서 setFruit 하는 방법

setFruit({ color:"red", name:"strawberry" })

2. fruit state를 이용하여 name만 변경하는 방법

setFruit({ ...fruit, name:"strawberry" })

3. prevState를 이용하여 이전 state 값을 사용하여 setState를 하는 방법

setFruit(prev => ({ ...prev, name:"strawberry" }))

2번째 방법은 사용 안하는 것이 좋다. 2번째 방법과 똑같은 3번째 방법이 있다. prevState를 이용하도록 하자. 1번째 방법은 때에 따라서 사용하도록 하자. 사실 답은 없으므로 편한 것을 사용하면 된다.

정리

state는 렌더링을 일으킬 수 있는 변수이다. setState는 state의 값을 변경할 때 사용하는 함수이다. useState는 state의 초기값을 정할 수 있고, return 값으로 state, setState를 돌려주는 hook이다.

setState 함수 사용 시 이전 state 값을 사용하고 싶으면 prevState를 이용하면 된다.

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.