위코드 파운데이션 과정을 들으며 정리한 내용입니다.

State 정의

리액트에서 state 는 컴포넌트 내부에 있는 상태값으로 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용합니다. 컴포넌트 내에서 정의해서 사용하고 변경이 가능합니다.

State 사용

state 를 사용하기 위해 useState 함수를 import 하고 훅 규칙에 따라 컴포넌트 선언문 최상위 블록에 useState hook 으로부터 반환되는 값을 구조 분해 할당으로 각각 변수에 담아서 사용합니다.

const [state, setState function] = useState(defaultValue)

위와 같이 useState hook 의 호출 결과로 반환되는 배열의 요소는
state - 동적으로 관리하는 상태값. 초기 값은 useState hook 호출할 때 인자(defaultValue)로 넘겨줌
setState function - 첫번째 요소인 상태값을 업데이트하는 함수

예시로 h1 태그의 배경색을 동적으로 관리할 때 useState hook 을 호출해 사용한다면 아래처럼 작성할 수 있습니다.

import React, { useState } from 'react';

const Main = () => {
	const [color, setColor] = useState('red');
	return (
		<h1 style={{ backgoundColor: color }}>메인 페이지</h1>
	);
};

export default Main;

두번째 요소인 함수를 사용해 초기값을 수정한다면,

import React, { useState } from 'react';

const Main = () => {
	const [color, setColor] = useState('red');
	return (
		<>
			<h1 style={{ backgoundColor: color }}>메인 페이지</h1>
			<button onClick={() => setColor('blue')}>색 바꾸기</button>
		</>
	);
};

export default Main;

이때 setColor('blue') 가 아닌 color = "blue" 로 직접 할당하면 화면이 다시 그려지지(리렌더링) 않으니 주의합니다.