React JS #7 state, useState - 초보자를 위한 리액트 강좌

버튼을 누르면 robyn에서 robin으로, robin에서 robyn으로 바뀌게 하려고 한다.
바닐라 자바스크립트였다면 다음과 같이 했을 것이다.

export default function Hello() {
    let name = 'robyn';

    function changeName(){
        name = name === 'robyn' ? 'robin' : 'robyn';
        console.log(name);
        document.getElementById('name').innerText = name;
    }

    return (
        <div>
            <h1>state</h1>
            <h2 id="name">{name}</h2>
            <button onClick={changeName}>Change</button>
        </div>
    );
}

리액트에서는 상태값 관리를 위해 useState를 사용할 수 있다.

const [name, setName] = useState('robyn');

첫번째 name은 변수명이라고 생각하면 된다. 두번째 setName은 함수이다.
setName 함수가 호출돼서 name이 바뀌면 리액트는 Hello 컴포넌트를 다시 렌더링해준다. useState()의 괄호 안에는 초기값이 들어가면 된다.

	function changeName(){
        const newName = name === 'robyn' ? 'robin' : 'robyn';
        setName(newName);
    }

이렇게 작성하거나

    function changeName(){
        setName(name === 'robyn' ? 'robin' : 'robyn');
    }

이렇게 작성할 수 있다.

아니면 바로 적어줄 수도 있다.

import { useState } from "react";

export default function Hello() {
    const [name, setName] = useState('robyn');

    return (
        <div>
            <h1>state</h1>
            <h2 id="name">{name}</h2>
            <button onClick={() => {
                setName(name === 'robyn' ? 'robin' : 'robyn');
            }}>Change</button>
        </div>
    );
}

그리고 동일한 컴포넌트라도 state는 각각 관리된다.