리액트 상태 끌어올리기

서울IT코드정리 /kyChoi·2021년 11월 20일
0

리랙트

목록 보기
13/18
<script type="text/babel">
      const Password = ({ handlePasswordChange }) => {
        return (
          <>
            <label>PW : </label>
            <input type="password" onChange={handlePasswordChange} />
          </>
        );
      };
      const Id = ({ handleIdChange }) => {
     // App 이 실행되면 Id 컴포넌트 호출
     
     //상위에서 하위로 함수자체를 전달 
     //console.log(handleIdChange) 하면 이 함수가 문자열로 출력
        return (
          <>
            <label>Id : </label>
            <input onChange={handleIdChange} />
            //상태값이 바뀌면 handleIdChange 가 호출
          </>
        );
      };
      const App = () => {
        const [id, setId] = React.useState("");
        const [password, setPassword] = React.useState("");

        const handleLoginClick = () => {
          alert(`id:${id}, pw:${password}`);
        };
        const handleIdChange = (event) => {
          setId(event.target.value);
          console.log(`id : ${event.target.value.length}`);
        };
        const handlePasswordChange = (event) => {
          setPassword(event.target.value);
          console.log(`pw : ${event.target.value.length}`);
        };
        return (
          <>
            <Id handleIdChange={handleIdChange} />
            <br />
            <Password handlePasswordChange={handlePasswordChange} />
            <button
              disabled={id.length === 0 || password.length === 0}
              onClick={handleLoginClick}
            >
              LOGIN
            </button>
          </>
        );
      };

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
profile
건물주가 되는 그날까지

0개의 댓글