[React] React Hooks : 2. useState

 

함수형 컴포넌트를 사용하면 가장 일반적으로 사용하게 될 Hook으로서 상태 변수를 선언하고 업데이트 할 때 사용한다.

 

1. 초기 세팅

먼저 파일의 가장 상단에 useState Hook을 불러온다.

import React, { useState } from 'react';

 

2. useState를 사용해 값 생성하기

함수형으로 작성된 컴포넌트 선언 내부에서 useState를 이용하여 string 값 생성 예시

import React, { useState } from 'react';

const ExampleComponent = () => {

	// useState 예시
	const [example, setExample] = useState("초기 값");

	return(
    	<div>
        	{/* useState를 사용하여 생성한 example 값 불러오기 */}
        	<p>{example}</p>
        </div>
    );
}

export default ExampleComponent;

 

3. useState로 초기 값 변경하기

ex) <div> tag를 눌렀을 때 useState의 set value 기능을 통해 "초기 값"에서 "값이 변경되었습니다." 로 값 변경

import React, { useState } from 'react';

const ExampleComponent = () => {

	// useState 예시
	const [example, setExample] = useState("초기 값");

	return(
    	<div
        	onClick={() => {
				setExample("값이 변경되었습니다.");
			}}
        >
        	{/* useState를 사용하여 생성한 example 값 불러오기 */}
        	<p>{example}</p>
        </div>
    );
}

export default ExampleComponent;

 

값이 숫자일 경우 증가식, 감소식 사용 가능

// 0이라는 값을 가진 numberValue 상태 생성
const [numberValue, setNumberValue] = useState(0);

// setNumberValue를 통해 기존 값에서 1을 더해라
setNumberValue(numberValue+1);

// setNumberValue를 통해 기존 값에서 1을 빼라
setNumberValue(numberValue-1);

 

4. 선언한 상태 안에 값이 여러개일 때, 전부가 아닌 일부만 변경할 경우 스프레드 연산자 사용

// value1, value2 값을 가진 initState 상태 생성
const [initState, setInitState] = useState({
	value1: 'value 1',
	value2: 'value 2'
});

// 나머지 값은 그대로 가져오되, initState의 value2 값만 변경할 경우
setInitState(prevState => {
  return {...prevState, initState.value2: otherValue};
});

//이전의 값인 prevState를 스프레드 연산자를 통해 가져오고 나머지 값만 변경할 수 있음.

//initState = {value1: 'value 1', value2: otherValue}

 

5. setState를 통해 상태 업데이트를 할 경우 컴포넌트는 다시 렌더링 된다.

상태가 업데이트 될 때마다 다시 렌더링이 된다는 것은 효율이 떨어지므로 useRef, useMemo등을 통해 개선하자.

 

6. useState를 통해 상태를 선언한 컴포넌트가 렌더링 될 때마다 값은 초기값으로 복원된다.

 

7. 상태 변수는 setState를 통해서만 변경이 가능하다.