1. State의 정의

• React에서 State란 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값을 의미합니다.
  해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값을 의미합니다. State는 컴포넌트 내에서 정의하고 사용하며 얼마든지 변경할 수 있습니다.

2. State 사용

• state는 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값이라고 했습니다. 그렇다면 함수 컴포넌트에서 state를 어떻게 선언하는지 알아봅시다.

2-1. State 선언

• let posts='변수명' 이런 식으로 변수에 데이터를 저장했었는데, 리액트에서는 변수 말고 state를 만들어서 데이터를 저장해둘 수 있습니다.

import React, { useState } from 'react';

const Main = () => {
  // 변수 color, setColor는 다름 이름으로 바뀔 수 있습니다.
	const [color, setColor] = useState('red');

	return (
		<h1>여기는 메인페이지입니다.</h1>
	);
};

export default Main;

• 먼저, state를 사용하기 위해서는 맨 윗 줄에 import { useState } form 'react' 를 해주어야 합니다. useState 함수는 Hook의 일종으로 내장되어 있는 react로부터 가져올 수 있습니다.

• 원하는 곳에서 useState('보관할 자료')를 쓰면 state에 자료를 잠깐 저장할 수 있습니다. 그리고 저장한 자료를 나중에 쓰고 싶으면 let [a, b] = useState('남자코트추천') a자리에 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용할 수 있습니다.

• 그렇다면 useState hook의 호출 결과로 반환되는 배열의 요소는 각각 무엇인지 알아봅시다.

1. 첫 번째 요소(state) : 우리가 동적으로 관리하고자 하는 상태값. 해당 상태의 초기값은 useState hook을 호출할 때 인자(defaultValue)로 넘겨줍니다.

2. 두 번째 요소(setState function) : 첫 번째 요소인 상태값을 업데이트 하는 함수입니다. state를 초기값에서 다른 값으로 변경하고 싶다면 setState를 통해서 변경해주면 됩니다.

• 예제를 통해 위의 설명을 덧붙혀보면, color는 useState hook에 넘겨준 인자 'red'가 담겨있습니다.
• 우리는 이를 해당 state의 초기값이라 부르며, 매번 state를 선언할 때 초기 값을 useState의 인자로 넘겨주면 됩니다.
• setcolor 는 선언된 state, 즉 color의 값을 변경할 때 사용하는 함수입니다. color의 값을 변경할 때 단순히 다른 값을 할당하는 것이 아니라 useState 함수로부터 반환된 두 번째 요소인 setColor를 사용해야 합니다.

변수말고 state에 저장해서 쓰는 이유는 뭘까요?

• state는 변동사항이 생기면 state를 쓰는 html도 자동으로 재랜더링 해줍니다.
• React는 구독을 하고 있는 값이 변경이되면 재랜더링을 하는데, 변수를 사용하면 React에서 변경여부를 알 수가 없어서 rerender를 하지 않고, state를 쓰면 변경여부를 알 수 있기 때문에 rerender를 수행합니다.

2-2. State 적용

• 지금까지 h1 태그의 배경색을 동적으로 관리해야함을 인지하고, 그에 따라 useState hook을 호출했는데, 상태값 color를 어떻게 h1 태그의 배경 생상에 적용시킬 수 있는지 확인해봅시다.

import React, { useState } from 'react';

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

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

export default Main;

1. 먼저 h1 태그에 인라인 스타일을 적용시킵니다. <h1 style={}>
2. 여러 스타일 속성 중 변경하고자 하는 것이 배경색이므로, backgroundColor를 적용합니다. <h1 style={backgroundColor : ""}>
3. 만약 backgroundColor의 value값이 정적인 값이 들어가게 되면, 배경 색성을 동적으로 활용할 수 없게 되기 때문에 backgroundColor : color 와 같이 미리 선언한 state 값을 넣어줍니다.
4. 이제 처음 화면이 랜더링 될 때 useState hook의 초기값인 red에 따라 h1 태그의 첫 배경색을 빨간색으로 변합니다.
5. useState('blue') 로 초기값을 변경하면 화면에 그려지는 배경색 또한 파란색으로 나타납니다.

2-3. State & Event

• 위 예시로는 state의 초기값에 따라 다른 배경 색상이 적용되는 것을 확인할 수 있었습니다.
  하지만 지금의 상황으로써는 직접 state의 초기값을 수정해주고 있었습니다.
• 이런 경우 우리는 useState hook의 반환 값 중 두 번째 요소였던 setState function을 통해 해결할 수 있습니다.

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;

• 먼저 h1 태그 하위에 button 태그를 추가하고, 버튼에서 발생하는 이벤트는 클릭이므로 onClick 이벤트 핸들러를 넣어주고, 해당 이벤트가 발생할 때마다 실행될 로직을 넣어줍니다.
• 여기서 실행시키고자 하는 바는 color 값을 'blue'로 바꿔주는 것이므로 setColor 함수를 실행시키고 인자로 바꾸고자 하는 값 'blue'를 넘겨줍니다.
• 그러면 이제 '색상 바꾸기'라는 버튼을 클릭하면 h1 배경 색상은 빨간색에서 파란색으로 바뀝니다.

3. 오늘 배운 내용 정리

1. 클릭 시 뭔가를 실행하고 싶을 때는 onClick={함수} 같이 이벤트 핸들러를 달아서 사용합니다.
2. state를 변경하려면 꼭 state 변경함수를 꼭 이용해야 합니다. state 변경함수는 ( ) 안에 입력한 것으로 기존 입력했었던 state를 갈아치워 줍니다.