React 과제에 대해 잠깐 정리를 해보려고 한다.
로그인 ID 와 PW 입력창에 입력을 했을 때, 그 값을 state에 저장하는 것이 첫 번째 미션.
일단 id 와 password 현재 값들은 state에 저장하기 위해서 state를 지정해준다.
아래 40번 라인을 보면 handleIdValue 함수에 event를 인자로 받았고, 이벤트가 일어난 요소에 담긴 Value값을 state에 저장.
history 객체
event.target
push로 props 넘겨주기
오마갓.. 오늘 동기들과 코드리뷰를 진행하면서 여러 문제점들이 많았지만 그 중에도 이건 진짜 바로 고쳐야 할 정도의 잘못된 코드를 발견하여 바로 포스팅을 한다. 31번 라인을 보면, 이전에 나는 setState에 두개의 setState 값을 지정했다. 이렇게 되면 리랜더링이 반복되기 때문에 절대 좋은 코드도 아니거니와 잘못된 코드이다. (기능 구현은 될지 몰라도) 어차피 setState 자체가 객체이기 때문에 여러 키와 키값을 줄 수 있음에도 나는 그 점을 간과하고 있었다. 같은 실수는 저지르지 않기 위해 기록해둔다.
인풋의 아이디와 패스워드에 onChange 이벤트를 사용하여 위에서 지정한 함수를 입력값으로 받아, 변경되었을 때 이벤트가 발생하도록 지정해줬다.
두 번째 미션은 로그인 버튼을 활성화하기. 위의 조건에 맞게 로그인 버튼의 색상이 바뀌게 하는 것.
위와 마찬가지로, 버튼이 바뀌기 위해서 state에 값을 지정해준다. 32번 라인을 보면, 새로운 함수를 만들어주었다. 아이디와 비번이 둘 다 참일 경우에는 trueColor로, 둘 중에 하나만 거짓이어도 falseColor로 바뀔 수 있도록 삼항연산자를 사용. 그리고 각 조건은 아래 함수에 setState를 통하여 지정해주었다. (46번 라인과 52번 라인)
삼항조건연산자
<button> 태그안에 위에서 만든 함수를 지정. 그리고 원래 이전에 갖고있던 클래스 네임이 존재하므로, 클래스 네임 두 개를 사용했다. (ES6문법 사용)
How to add multiple classNames
