[ React ] Hooks의 useState

1. Hooks

---

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다.

 

 

2. useState

---

useState는 가장 기본적인 Hook이다. 함수형 컴포넌트에서도 상태를 가지고 있을 수 있게 해 준다. 

만약 함수형 컴포넌트에서 상태를 관리해야 한다면 useState를 사용하면 된다.

 

 

3. useState를 사용한 예제

---

버튼을 누르면 숫자가 바뀌는 컴포넌트를 만들며 useState를 익혀보았다.

 

 

Counter.js

import React, { useState } from 'react';

const Counter = () => {
	const [value, setValue] = useState(0);
    
    return (
    	<div>
        	<p>현재 카운터 값은 <b>{value}</b>입니다.<p>
            <button onClick={() => setValue(value + 1)}>+1</button>
            <button onClick={() => setValue(value - 1)}>-1</button>
		</div>
    );
};
export default Counter;

 

useState는 코드 상단에서 import 구문을 통해 불러오고,

import React, {useState} from 'react';

 

다음과 같이 사용한다.

const [value, setValue] = useSate(0);

 

useState 함수의 파라미터에는 상태의 기본값을 넣어 준다.

현재는 0을 넣어줘서 카운터의 기본값을 0으로 설정해주었다.

이 함수가 호출되면 배열을 반환하게 되는데, 그 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수이다.

이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링된다.

 

함수형 컴포넌트에서 상태 관리를 하기 위해 컴포넌트를 굳이 클래스 형태로 변환할 필요가 없어서 편리하다!

 

App.js

import React from 'react';
import Counter from './Counter';

const App = () => {
	return <Counter />;
};

export default App;

 

Extra

---

하나의 useState함수는 하나의 상태 값만 관리할 수 있다.

 

컴포넌트에서 관리해야 할 상태가 여러 개라면?

 

useState를 여러 번 사용하면 된다!