[React] State

📢 State.. useState!

 Java를 다루다가 JavaScript의 함수들을 접하면 가끔씩 깜짝 놀란다. 특히, React와 같은 프론트엔드쪽에 대한 공부를 하다보면 정말 새로운 세상을 접하는 것 같은 느낌이 든다. 오늘 간단히 포스팅할 useState 함수도 그 중 하나다.

 난 State는 보다 편한 이벤트 리스너를 위한 React 내 지원 함수라고 정리했다. 인터넷을 뒤져보면 더 정확한 정의나 기능에 대한 설명은 있을 것이다. 다만, 나는 나의 언어로 개념을 정리할 뿐이다. 물론.. 아주 많이 엇나갔다면 누군가 지적해주시길 바랄 뿐이다.
 말이 잠깐 다른 곳으로 샜다. 보다 편한 이벤트 리스너를 위한 함수라는 것은 어떤 값에 대한 상태를 주시하다가 해당 값에 대한 변화가 발생하면 어떠한 동작을 해주겠다는 것을 의미한다. 즉, PC의 시계를 보면 시, 분, 초가 변화할 때마다 변화되는 숫자를 감지해서 화면에 새로 그려주게 되는데, 이러한 동작을 쉽게 설정할 수 있게 지원하는 기능이라고 이해하면 편할 것 같다.

⌨️ 예제 코드

아래 코드는 React 강의를 듣고 있는 노마드코더의 React 과정 클론 코드를 그대로 가져온 것이다. (감사합니다 니꼬쌤~)

// UseState를 통해 작성한 JavaScript 컴포넌트 예제
function MinutesToHours() {
        const [amount, setAmount] = React.useState(0)
        const [inverted, setInverted] = React.useState(false)

        const onChange = (event) => {
            setAmount(event.target.value)
        }
        const reset = () => setAmount(0)
        const onInvert = () => {
            reset()
            setInverted((current) => !current)
        }

        return (
            <div>
                <div>
                    <label htmlFor="minutes">Minutes</label>
                    <input
                        value={inverted ? amount * 60 : amount}
                        id="minutes"
                        placeHolder="Minutes"
                        type="number"
                        onChange={onChange}
                        disabled={inverted}
                    />
                </div>
                <div>
                    <label htmlFor="hours">Hours</label>
                    <input
                        value={inverted ? amount : Math.floor(amount / 60)}
                        id="hours"
                        placeHolder="Hours"
                        type="number"
                        onChange={onChange}
                        disabled={!inverted}
                    />
                </div>
                <button onClick={reset}>Reset</button>
                <button onClick={onInvert}>
                    {inverted ? "Turn back" : "Invert"}
                </button>
            </div>
        )
    }

 return 문은 JSX로 되어 있다. 중간중간 중괄호로 입력되어 있는 부분들은 JavaScript를 통해 해당 함수 내 값을 가져오거나, 간단한 로직을 넣어놓은 코드라고 생각하고 넘기면 된다. 크게 중요하지 않다는 말이다.

 중요한 부분은 가장 상단에 const [] 로 지정되어 있는 변수이다. const [x, y] = React.useState(0); 형태로 되어 있는 부분이 바로 오늘의 주인공이다. x는 우리가 감시할 상태값으로 이해하면 되고, y는 x의 값을 새로 변화시키는 setter로 이해하면 된다. 그리고 이러한 로직을 이용해서 onChange나 onInvert라는 함수 내에 정의하여 사용하는 방식이다. 추가로 useState() 안에 들어가 있는 파라미터는 x에 대한 초기값이다.

 정리하면 브라우저에서 제공하는 event에 대한 다양한 값들을 setter 함수에 넣고, x값을 event에 맞춰서 최신화해주는 함수를 프로그래밍하여 사용하는 방식으로 요약할 수 있겠다.