[React Hook] 리액트 Hook 총정리(2) - useState

2023.01.17 - [Front-End/React] - [React Hook] 리액트 Hook 총정리(1) - Hook이란?

[React Hook] 리액트 Hook 총정리(1) - Hook이란?

이어서.. useState에 대해 알아보자

Hook이 나오기 전에 함수형 컴포넌트는 state가 없는 컴포넌트였고 다른 라이브러리를 통해 state를 관리할 수 있었다.

여기서 State는 컴포넌트 안에서 사용되고 관리받는 값이다.
state 값은 상위 및 하위 컴포넌트에 전달할 수 있지만 수정 및 관리는 해당 컴포넌트에서만 받을 수 있다.

이제 Hook을 통해 함수형 컴포넌트에서도 state를 관리할 수 있다! state를 관리할 수 있는 Hook이 바로 useState이다.

useState의 형태는 다음과 같다.

import {useState} from 'react'
function Component(){
	const [state, setState] = useState(default) 
}

useState는 인자로 state의 초기값을 전달한다. 초기값의 경우에는 문자열, 정수, 실수, 배열, 객체 등 모든 초기화가 가능하다. 또한, 아직 어떤 값을 설정해야할지 모를 때, null로 설정도 가능하다

그리고 useState는 state값과(state의 이름은 짓고 싶은대로 맘껏) 그 state를 수정하는 set함수를 제공한다.

set함수를 제공한다는 의미는 state값을 직접 수정하면 안된다는 의미이다!!

 

자 이제 한번 사용해보자

---

일반 JSX태그에서 state값을 사용할 때는 아래와 같이 사용하면 된다

<p>{state}</p>

또한, 이벤트 발생이나 다른 함수 실행으로 state값을 변경하는 경우에는 다음과 같이 입력한다.

<button onClick={() => setState(state + 1)}>Click</button>

위 예시는 버튼을 클릭했을 때 state를 1씩 증가시키는 모습을 나타냈다. 

만약에 state값이 배열이고 클릭 시 '1'이라는 요소를 추가하는 경우에는 다음과 같이 입력할 수 있다.

<button onClick={() => setState((prev) => [...prev, "1"])}>click</button>

setState안에 함수를 전달할 경우 첫 번째 매개변수로 이전 state값을 제공한다. 그 값을 ...를 통해 안에 요소를 꺼내고 새로운 요소를 추가해 하나의 새로운 배열을 state에 저장하는 방식이다. 

 

useState는 리액트 개발을 하면서 자주 사용된다. 그러나 너무 많은 state의 사용은 프로그램의 복잡성을 높이기 때문에 필요한 곳에만 사용할 수 있는 능력을 가져야한다. 

2023.01.20 - [Front-End/React] - [React Hook] 리액트 Hook 총정리(3) - useEffect

[React Hook] 리액트 Hook 총정리(3) - useEffect

 

<참조>

https://ko.reactjs.org/docs/hooks-state.html

https://ko.reactjs.org/docs/faq-state.html

https://github.com/uberVU/react-guide/blob/master/props-vs-state.md