State

• 단어 뜻 그대로 상태를 뜻하며 Component 내부에서 가지고 있는 Component의 상태값이다.
• 화면에 보여줄 Component의 UI 상태이다.
• Component내에서 정의하고 사용하며 얼마든지 데이터가 변경될 수 있다.
  
  

State 정의

• State는 화면에 보여줄 Component의 정보이다.
• Function Component에서 State를 어떻게 정의할까?

import React, { useState } from 'react';

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

export default State;

• Function Component에서 화면에 나타내고 싶은 jsx요소가 return문 안에 들어있다.
• State를 설정할 때는 화면에 보이듯이 useState function를 import한 후 사용해야 한다.
• useState function는 component 선언문(function State())과 return문 사이에 작성한다.
• useState function에 초기값red을 인자로 넣어 호출하면 배열을 반환한다.
• 배열의 첫 번째 요소는 상태값이 저장되는 변수이고, 두 번째 요소는 상태값을 갱신하는 function이다.
• 위 예제에서는 state를 담는 변수를 color로, color의 값을 갱신하는 function을 setColor로 그리고 color의 초기값을 red로 정의하였다.

  Function Component의 State는 이렇게 useState Hook을 사용하여 정의한다. 이렇게 Component의 State를 설정하고 무엇을 할 수 있을까? 이런 Component의 상태값이 왜 필요할까? 실제 State가 어떻게 사용되는지 예시를 통해 살펴보자.

State 예시

State에서 상태값을 설정하는 이유는 결국 Component 안에 요소에서 그 상태값을 반영해서 데이터가 바뀔 때마다 효율적으로 UI에 나타내기 위함이다.

• return문 안에 <h1> 타이틀 요소가 있다.
• 해당 요소에서 글자 색을 Component에서 설정한 State값으로 변경해보자.
• JSX요소에 inline style을 적용하고, 그 중에서도 글자 색을 설정해 줄 수 있다.

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

• useState function을 사용하여 지정한 State를 담는 변수 color라는 변수를 속성의 value로 지정해준다.

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

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

예시에서 볼 수 있듯이, State에서 상태값을 설정하는 이유는 결국 Component 안의 요소에서 그 상태값을 반영해서 UI에 나타내기 위함이다.

Event & State 변경

import React, { useState } from 'react';

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

• <h1>태그 아래에 <button>요소를 추가하였다.
• 다음 순서에 따라 코드가 실행된다.

1. <button>요소에서 onClick event 발생
2. color라는 상태값을 갱신하는 function, setColor function 실행
3. setColor function을 실행시키면서 인자로 넘겨준 값 blue에 의해 값이 red에서 blue로 변경
4. 상태값이 변경되면서 Function Component가 다시 render되고 변경된 State값을 반영하여 <h1> 태그 글자 색상 변경