이런 로그인창이 있고 Username와 Password를 줄 때마다 해당 요소의 값을 동적으로 변화시켜주려고 한다.
그리고 Username와 Password가 입력될 때마다 onChange 되는 이벤트 함수는 inputHandler로 동일하다.
현재 this.state의 초기값은 아래와 같다.
자! 모든 전제를 다 살펴보았다. 다시 정리하자면
Login 컴포넌트(지금 작업하려는 컴포넌트 이름이다)는 Username, password 이렇게 2의 상태값을 갔는다.
2개의 상태값은 onChange 이벤트 함수 inputHanlder를 발생시킨다.
문제는 inputHandler의 함수가 실행될때마다 상태값이 변경되게 만들어야 한다는 것이다.
state 안에 각 요소는 key:value가 쌍으로 들어가 있다.
JS에서 객체에 값을 줄 때 2가지 방법을 기억하는가?
1. dot notation
obj.key = value
2. bracket
obj[key] = value
dot notation의 경우 key의 이름이 정해져 있는 경우 사용할 수 있다.
하지만 위의 케이스는 한 개의 이벤트 함수에 의해 e.target.name으로 동적으로 전달되기 때문에
bracket 방식을 사용해야 한다.
inputHandler를 이렇게 주었다.
아래를 보면 usernname과 password가 입력될 때마다
this.setState가 동적으로 변하는 것을 볼 수 있다.
