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

React를 사용한다면, HTML 요소들을 태그로 묶어 한번에 렌더링할 때 어떤 변수의 값에 따라 UI가 변하기 마련이다. 여기서 "어떤 변수"는 보통 의 을 통해 유저로부터 받은 값을 같은 태그에 업데이트 시키는 데 사용되는 변수, 즉 state 변수를 의미한다. (ex. isLogin의 값이 true일 때 버튼의 value가 logout으로 바뀐다면, 여기서 state변수는 isLogin) 이때 업데이트 value를 담은 과 value를 반영한 은 같은 state 변수로 통일해야 한다. 이를 "신뢰 가능한 단일 출처"라고 한다. // App.jsx import React, { useState } from "react"; function Login() { const [isLogin, setLogin] ..

2020.05.24