2-5. useState(Hooks)

16.8v 이후로 원래 함수형 컴포넌트에서 사용할 수 없었던 state를 함수형 컴포넌트에서도 사용할 수 있게됬습니다.

이 과정에서 Hooks라는 것을 사용하게 되는데, 그 중 하나인 useState를 사용하여 봅시다.

• 1-4 비구조화 할당(구조분해 문법)에 대해 알아보면 조금 더 이해가 쉽습니다.

Say.js 파일 생성하기

import React, { useState } from 'react';

const Say = () => {
    const [message, setMessage] = useState('안녕!');
    const onClickEnter = () => setMessage('안녕하세요!');
    const onClickleave = () => setMessage('안녕히가세요!');
    return (
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickleave}>퇴장</button>
            <h1>{message}</h1>
        </div>
        
    );
};

export default Say;

처음엔 ‘안녕!’으로 출력되고 버튼을 누르는 것에 따라 message가 변경 되는것을 볼 수 있습니다.

문자 색상 state 변경하기

이번엔 state를 변경하여 문자의 색상을 변경하여 봅시다.

import React, { useState } from 'react';

const Say = () => {
    const [message, setMessage] = useState('안녕!');
    const onClickEnter = () => setMessage('안녕하세요!');
    const onClickleave = () => setMessage('안녕히가세요!');
    const [color, setColor] = useState('black');
    return (
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickleave}>퇴장</button>
            <h1 style={{color}}>{message}</h1>
            <button style={{ color:'red'}} onClick={()=>setColor('red')}>빨간색</button>
            <button style={{ color:'green'}} onClick={()=>setColor('green')}>초록색</button>
            <button style={{ color:'blue'}} onClick={()=>setColor('blue')}>파란색</button>
        </div>
        
    );
};

export default Say;

이렇게 변경됩니다.

처음에 이 코드를 보면 조금 햇갈리는 부분이 있을 수 있는데

<h1 style={{color}}>{message}</h1>
// 이 color라는 state를 '빨간색'버튼을 눌러서 변경시킨다면
<h1 style={{'red'}}>{message}</h1>
// 이렇게 변경되는게 코드상 맞을것 같은데
// 실제로 이렇게 입력해보면 오류가 나옵니다.

이는 리액트의 규칙중 하나로 style={{color}}를 작성하면,

실제 HTML에서는 style="color: red;"과 같이 해석합니다.

편리하다면 편리할 수 있는기능이지만,

이렇게 자동으로 해석해주는 부분이 있고 없고에 따라 일관성에 문제가 생겨 실제로는 이런 인라인스타일보다 .css파일을 import하여 관리하는 것이 좋을 것 같습니다.

이렇게 인라인 스타일을 사용하는 경우도 존재한다. 숙지하는 용도로 메모합니다.