useState

React의 Container는 여러 html 태그를 하나로 묶기도 하지만, 여기에 동적인 기능을 추가해 마치 클래스처럼 활용할 수 있다. 그 중 가장 대표적인 기능이 바로 useState로, 인자로 변수의 초기값을 받아 변수와 그 변수의 set 함수를 반환하는 함수이다.

import React from 'react'
import ReactDOM from 'react-dom';
const Container = () => {
    let [count, setCount] = React.useState(0);

    return <div>
        <h4 id="title">count: {count}</h4>
        <button onClick={() => { setCount(count + 1) }}>click</button>
    </div>
}
ReactDOM.render(<Container />, document.querySelector("body"));

React.setState의 인자로 0을 넘겨 반환값으로 변수 count와 count의 set 함수인 setCount를 반환받았으며, 버튼을 누를 때마다 setCount 함수를 호출해 count의 값을 count + 1로 갱신한다. 이 때 만일 set 함수가 아니라 직접 할당을 통해 count의 값을 바꾼다면 ReactDOM.render를 다시 호출해 바뀐 Container를 다시 렌더링해야 하지만, setCount 함수를 통해 값을 바꿀 경우 setCount가 바뀐 부분을 찾아내 그 부분만 다시 렌더링하므로 훨씬 효율적으로 동작한다.