[React]State & Event

1. State

• state : 상태
• 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값입니다.
• state는 화면에 보여줄 컴포넌트의 UI 정보(상태) 입니다.
• state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터가 변경될 수 있습니다.

2. State 정의

• 위에서 state는 화면에 보여줄 컴포넌트의 정보라고 했습니다.
• 함수 컴포넌트에서 state, 즉 해당 컴포넌트의 상태를 어떻게 정의 하는지 보겠습니다.

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;

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

3. 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;

🐔참고문헌

·React공식 web 사이트

https://ko.reactjs.org/docs/hooks-state.html

·React공식 web 사이트

https://ko.reactjs.org/docs/hooks-effect.html