React ) State & Event 스테이트와 이벤트

State : 상태

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

state는 화면에 보여줄 컴포넌트의 UI 정보(상태)이다.

state는 컴포넌트 내에서 정의해 사용하며 언제든 데이터가 변경될 수 있다.

 

우선 형태를 살펴보자.

import React, { useState } from 'react';

function State() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Function Component | State</h1>
    </div>
  );
}

export default State;

 

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

state를 설정할 땐 화면에 보이듯이 useState 함수를 import 한 후에 사용해야 한다!

useState 함수는 컴포넌트 선언문 function State( )과 retrun문 사이에 적상한다.

 

 

위의 코드에서 useState 함수에 초기값 ('red')을 인자로 넣어 호출하면 '배열'을 반환한다.

배열의 첫 번째 요소는 상태값이 저장되는 변수이고, 두 번째는 이 상태값을 변경할 때 사용하는 함수이다.

위의 예제는 보다시피 state를 담는 변수로 color로 정의하고 color의 값을 갱신하는 함수를

setColor로 그리고 color의 초기값을 red로 정의한 것이다.

 

왜 이런 컴포넌트의 상태값이 필요한걸까 ? 

state에서 상태값을 설정하는 이유는 결국 컴포넌트 안의 요소에서

그 상태값을 반영해 데이터가 바뀔 때마다 효율적으로 화면(UI)에 나타내기 위함이다.

 

return 문 안에 <h1> 요소가 있다.

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

다음의 순서대로 state값을 특정 요소에 반영가능하다.

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

 

useState 함수를 사용해 지정한 state를 담는 변수, color라는 변수를 color 속성의 value로 지정했다.

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

 

key값 color는 색상을 부여하기 위한 속성이고, value값 color는 useState 함수를 통해 초기값 'red'를 담은 변수이다.

이제 이것을 event를 발생시켜 state값을 변경시키는 방법을 알아보자.

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> 요소를 추가하였고, 다음 순서에 따라 코드가 실행하는 로직이다.

 

1. <button> 요소에서 onClick 이벤트 발생

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

3. setColor 함수를 실행하며 인자로 넘겨진 'blue'에 의해 color 값이 'red'에서 'blue'로 변경

4. 상태값이 바뀌며 함수 컴포넌트에서 다시 render되고 바뀐 state값을 반영하여 <h1> 태그 색상 변경