[Controlled Component] 서로 같은 변화를 담당하는 HTML 요소들은 같은 출처의 state 변수를 value로 갖는다

React를 사용한다면,

HTML 요소들을 <div> 태그로 묶어 한번에 렌더링할 때 어떤 변수의 값에 따라 UI가 변하기 마련이다.

 

여기서 "어떤 변수"는 보통 <form>의 <input>을 통해 유저로부터 받은 값을 <h1> 같은 태그에 업데이트 시키는 데 사용되는 변수, 즉 state 변수를 의미한다. (ex. isLogin의 값이 true일 때 버튼의 value가 logout으로 바뀐다면, 여기서 state변수는 isLogin)

 

이때 업데이트 value를 담은 <input>과 value를 반영한 <h1>은 같은 state 변수로 통일해야 한다.

이를 "신뢰 가능한 단일 출처"라고 한다.

// App.jsx
import React, { useState } from "react";

function Login() {

  const [isLogin, setLogin] = useState(false);
  
  function changeAuthStatus() {
    setLogin(!isLogin);
  };
  
  return (
    <div>
      <h1>{isLogin? "Hello" : "Please Login"}</h1>
      <button onClick={changeAuthStatus} value={isLogin}>{ isLogin ? "Logout" : "Login" }</button>
    </div>
  );
}

export default Login;

 

신뢰 가능한 단일 출처는 React가 DOM의 변화를 추적하는 중 가장 최신의 값을 해당 HTML 태그의 value와 언제나 동기화시킴으로써, 확실한 상태관리를 보장해준다.