[복습용] State

리액트 16.8 버전부터는 함수형 컴포넌트에서 훅을 이용한 상태(State)의 관리가 가능하게 되었다.

기본적인 훅

• useState
• userEffect
• useContext

추가적인 훅

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

이 외에 사용자정의 훅도 사용할 수 있다.

import {useState} from 'react';

export default function Hello() {
	// name : 변수의 이름
    // setName : 변수를 변경하는 함수
    // setName 이라는 함수를 통해서 name 변수를 변경하면 렌더링을 자동으로 한다.
    // useStat() 는 배열을 반환하며, 매개변수는 name 의 초기값이 들어간다.
	const [name, setName] = useState('Mike');
    
    function changeName() {
    	const newName = name === "Mike" ? "Jane" : "Mike";
        setName(newName);
    }
    
    return (
    	<div>
        	<h1> State </h1>
            <h2> {name} </h2>
            <button onClick={changeName}> Change </button>
        </div>
    );
}

위의 name 이라는 state 는 컴포넌트마다 따로 관리가 되기 때문에 Hello 컴포넌트가 3개 존재할 때, 첫 번째 name 이 바뀌어도 나머지 2개의 컴포넌트의 name 은 바뀌지 않는다.