로그인 페이지의 ID와PW input 상태를 관리
1. input 값
input 태그 안에
onChange라는 이벤트는 input에 입력한 값이 바뀔 떄마다 발생
여기에 inputValue라는 함수를 설정했고 코드는 다음과 같다
onChange 이벤트가 발생하면 inputValue함수가 실행되고 setState로 state에 설정해 놓은 Key의 value 값을 e.target.value 값으로 현재 입력된 텍스트로 업데이트 시킨다.
*[e.target.name]은 input 태그에 name=""으로 값을 부여해줘서 input을 구분한다.
setState 내부에서 key 부분에 [ ]가 있는 문법은 Computed property names라는 문법이다.
state 초기 설정 값은 다음과 같다.
텍스트를 입력할 때마다 input값이 각 state에 Key값으로 담기게 된다.
2.ID,PW 한글자 이상 입력 시 로그인 버튼 활성화
disabled 속성을 이용하여 idValue의 length가 0이 아니고 pwValue의 length도 0이 아닐때
disabled 값을 false로 설정하고 둘 다 0이면 즉 아무런 입력값을 입력하지 않으면 true이다.
css에서 disabled때와 아닐때의 background-color를 설정해 놓으면 된다.
좀 더 나은 방법이 있지만 내머리에서 나온 방식을 설명했다...
3.댓글 기능 구현
위 사진처럼 댓글 기능을 구현하겠습니다.
버튼에
onClick이벤트로 클릭 되었을 때 addText라는 함수가 실행된다.
addText 함수가 실행되면 state에 빈 배열(newText)를 설정한 곳에 concat 메소드를 적용하여
newText:[{"juyeoppark", 입력한 text 값}]이 들어가게 된다. 후에 text: ""을 설정해준건 newText로 배열 값이 들어가면 댓글 입력창은 비워지게 된다.
push vs concat
1. push
◎ push는 기존 배열에 값을 추가하여 원본을 바꾼다.
1-2. 예시
const array = [1, 2];
array.push(3);
console.log(array); // [1, 2, 3]위의 코드를 확인해보면 array배열에 array.push(3)를 하고 array를 결과를 확인해보면 array 배열 자체가 변경된 걸 확인할 수 있다.
- concat
◎ concat은 기존 배열을 토대로 변경한 새로운 배열이 리턴된다. 기존의 배열은 바뀌지 않는다.
2-1. 예시
const array =[1, 2];
let result = array.concat(3);
console.log(array); // [1, 2]
console.log(result); // [1, 2, 3]위의 코드를 확인해보면 result라는 변수에 array.concat(3)을 하고,
먼저 array값을 확인하면 기존 배열 값 [1, 2]가 그대로 나오며,
array.concat(3)한 변수 result의 값을 확인해보면 [1, 2, 3]이 나오는 걸 확인할 수 있다.
원하는 위치에 concat 메소드를 통해 새로 만든 newText 배열에 map 함수를 통해 원하는 객체 값을 꺼내쓸 수 있다.
