React - 함수형 컴포넌트에서 State 사용

함수형 컴포넌트에서 state 사용하기

• React 버전 16.8 이전 버전에서는 함수형 컴포넌트에서 state를 사용할 수 없었다.
• 이후 버전에서 useState()를 통해 state 사용 가능
  • 이 과정에서 Hooks라는 것을 사용
• Hooks
  • 16.8 버전에서 새로 도입된 기능
  • 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 기능 제공
  • useState() : 상태 관리
  • useEffect() : 렌더링 직후 작업 설정
• 배열의 비구조화 할당
  • 배열의 요소 값을 쉽게 추출하기 위한 문법
  • 기존 방법
    • const array = [1, 2];
    • const one = array[0];
    • const two = array[1];
  • 배열의 비구조화 할당 방법
    • const array = [1, 2];
    • const [one, two] = araay;
• useState() 사용해서 함수형 컴포넌트에서 state 사용
  • useState(초기값)
    • 초기값으로 숫자, 문자, 객체, 배열 가능
    • 배열 반환 : [현재 상태, setter 함수]
    • setter 함수
      • 상태를 변경(설정)하는 함수
      • 이름은 임의로 사용 가능
    • 사용 예 1
      • const [message. steMessage] = useState(''); (message에 초기 값 없음.)
      • steMessage('안녕하세요'); (message 값을 '안녕하세요'로 변경(설정))
    • 사용 예 2
      • const[color, setColor] = useState('black'); (color 초기 값은 'black');
      • setColor('green'); (color 값을 'green' 으로 변경(설정))

useState() 사용해서 함수형 컴포넌트에서 state 사용 - Message.js

import React, {useState} from 'react';
// { Component } 클래스 없음.
// { useState } 포함 (모듈을 import 했음)

const Message = () => {
    const [message, setMessage] = useState('');
    // 이벤트 핸들러 추가
    // lamda 식 한 줄이라 { } 생략
    const onClickEnter = () => setMessage('안녕하세요!');
    const onClickLeave = () => setMessage('안녕히 가세요!');
    const onClickClear = () => setMessage('');
    // 색상 변경 state
    const [color, setColor] = useState('black');
    // 이벤트 핸들러 추가
    const onClickGreen = () => setColor('green');
    const onClickRed = () => setColor('red');
    const onClickBlue = () => setColor('blue');
    return (
        <div>
            <p></p>
            {/* 출력되는 message 문자열 변경 버튼 */}
            <button onClick={onClickEnter}> 입장 </button> &nbsp;
            <button onClick={onClickLeave}> 퇴장 </button> &nbsp;
            <button onClick={onClickClear}> 지우기 </button>
            {/* 출력되는 message 색상 변경 버튼 추가 : green, red, blue */}
            <br /><br />
            <button style={ {color : 'green'} } onClick={onClickGreen}> Green </button> &nbsp;
            <button style={ {color : 'red'} } onClick={onClickRed}> Red </button> &nbsp;
            <button style={ {color : 'blue'} } onClick={onClickBlue}> Blue </button> &nbsp;
            <button onClick={ () => setColor('black') }> Black </button>
            {/* style={ {color} } {color}를 감싸는 {}는 style 적용을 위한 {}이고, color를 감싸는 {}는 변수 처리를 위한 {}이다. */}
            <h1 style={ {color} }> {message} </h1>
            <br /><br /><br /><br /><br />
        </div>
    );
};
export default Message;