리액트 : State

State란?

컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값을 의미하며, 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값을 의미한다.

State 선언

State 사용하기 위해 useState 함수를 import한 후 사용해야 한다.
useState 함수는 Hook의 일종으로 내장되어 있는 react로부터 가져올 수 있다.

import React, { useState } from 'react';

const Main = () => {
	const [color, setColor] = useState('red');

	return (
		<h1 style={{backgroundColor : color}}>여기는 메인페이지입니다.</h1>     
	);
};

export default Main;

위와 같이 useState hook을 사용할 때는 구조 분해 할당을 통해 각각의 변수에 담아서 사용한다.

useState hook의 호출 결과로 반환되는 배열의 요소는 2가지 이다.

• 첫번째 요소(state)는 우리가 동적으로 관리하고자 하는 상태값이다.
• 두번째 요소(setState function)는 첫 번째 요소인 상태값을 업데이트 하는 함수이다.
  
  

State & Event

import React, { useState } from 'react';

const Main = () => {
	const [color, setColor] = useState('red');

	return (
		<>
			<h1 style={{backgroundColor : color}}>여기는 메인페이지입니다.</h1>
			<button onClick={() => setColor('blue')}>색상 바꾸기</button>
		</>
	);
};

export default Main;

state의 값을 변경하려면 color = “blue”라고 할당하는 것이 아닌 꼭 setColor(”blue”) 함수를 사용해야 한다.

왜냐하면 단순 할당으로는 바뀐 값을 기준으로 화면이 다시 그려지지 않는데 비해 setColor 함수를 통해서 변경하게 되면 바뀐 값을 기준으로 다시 화면을 그려주는 것을 확인할 수가 있기 때문이다.

다시 말해 setColor를 통해 color의 값을 변경해야만 값의 업데이트와 리렌더링의 효과를 볼 수 있다.