State & Event

1. State

• state:상태

• 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값.

• state는 화면에 보여줄 컴퍼넌트의 UI상태.

• state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터가 변경가능.

1-1 State 정의

• 위에서 state는 화면에 보여줄 컴포넌트의 정보라고 했습니다.

• 함수 컴포넌트에서 state, 즉 해당 컴포넌트의 상태를 어떻게 정의 하는지 보겠습니다.

• 함수 컴포넌트에서 화면에 나타내고 싶은 JSX 요소가 return문 안에 들어있습니다.

• state를 설정할 때는 화면에 보이듯이 useState 함수를 import 한 후 사용해야 합니다.

• useState 함수는 컴포넌트 선언문(function State())과 return 문 사이에 작성합니다.

• useState 함수에 초기값('red')을 인자로 넣어 호출하면 배열을 반환합니다.

• 배열의 첫 번째 요소는 상태값이 저장되는 변수이고, 두 번째 요소는 상태값을 갱신하는 함수입니다.

• 즉, 위 예제에서는 state를 담는 변수를 color로, color의 값을 갱신하는 함수를 setColor로 그리고 color의 초기값을 red로 정의했습니다.

1-2. State 사용 예시

state 에서 상태값을 설정하는 이유는 결국 컴포넌트 안의 요소에서 그 상태값을 반영해서 데이터가 바뀔 때마다 효율적으로 화면(UI)에 나타내기 위함입니다.

• 해당 요소의 글자 색을 컴포넌트에서 설정한 state 값으로 하고 싶은 경우,

• 다음의 순서대로 state 값을 특정 요소에서 반영할 수 있습니다.

• 우선 JSX 요소에 인라인 스타일을 적용하기 위해, 그 중에서도 글자색을 설정해주기 위해 다음과 같이 작성합니다.

  
  
  <h1 style={{ color: color }}>Function Component | State</h1>

// key값 color는 색상을 부여하기 위한 속성
// value 값 color는 useState 함수를 통해 초기값인 'red'를 담고 있는 변수

:: 위의 예시에서 볼 수 있듯이, state에서 상태값을 설정하는 이유는 결국 컴포넌트 안의 요소에서 그 상태값을 반영에서 화면(UI)에 나타내기 위함입니다.

:: 컴포넌트 내부에서 state를 설정하고, 그 값을 어떻게 아래의 요소에서 반영하는지 이해되시나요? 다시 한 번 찬찬히 살펴보면서 꼭 이해하고 넘어가주세요! 다음으로 event를 발생시켜 state 값을 변경하는 방법에 대해 알아보겠습니다.

2.event

import React, { useState } from 'react';

function State() {
  const [color, setColor] = useState('red');
	
  return (
    <div>
      <h1 style={{ color: color }}>Function Component | State</h1>
      <button onClick={() => setColor('blue')}>Click</button>
    </div>
  );
}

export default State;

• h1 태그 아래에 button 요소를 추가해주었습니다.

• 다음의 순서에 따라서 코드가 실행됩니다.

• button 요소에서 onClick 이벤트 발생

• color라는 상태값을 갱신하는 함수, setColor 함수 실행

• setColor 함수를 실행시키면서 인자로 넘겨준 값 'blue'에 의해 color의 값이 'red' 에서 'blue'로 변경

• 상태값이 바뀌게 되면서 함수 컴포넌트가 다시 render 되고 바뀐 state 값을 반영하여 h1 태그 글자 색상 변경