이번 포스트에서는 배웠던 react지식을 활용해 직접 코드를 통해 실습하는 시간이었다. 최대한 흐름을 따라가려고 노력했고, 흐름 중심으로 이해하는 것을 최우선 목표로 하고 있다.
1. signup
미션 1. 체크박스를 표시하면 회원가입 폼들이 보이도록 만들기.
아이디어 1 -> 체크박스 태그에서 조건문을 걸어주어야 함 -> 대상은 div로 모두 감싸져 있는 회원가입 폼.
아이디어 2 -> show가 true 라면 폼을 보여주고, 아니라면 null을 주라는 조건문 생성.
이제 show를 관리하는 state를 만들고, onchange를 걸어주면 된다.
App 바로 밑에,
const [show, setShow] = useState(false);
<input
type="checkbox"
id="agree"
onChange={() => {
setShow(!show);
}}
/>
<label className='agree' htmlFor="agree">이용약관에 모두 동의합니다</label>완료!
미션 2. 
비밀번호가 맞으면 빨간색 문구 없애기.
아이디어 1 -> onChange 이용, 비밀번호 if 문 들어간 함수 작성.
onChange={handleChange}비밀번호와 비밀번호 확인 부분에 추가한다.
그리고 상단에 handleChange 함수를 정의하면 된다.
일단, 각각의 객체에 정보가 들어가야 한다.
const value = e.target.value; 가 기본 형태이지만, 회원가입에는 많은 input들이 반복적으로 있기 때문에 보다 효율적으로 관리 하기 위해 state를 활용하는게 좋다.
const [userInfo, setUserInfo] = useState({
userId: "",
password: "",
email: "",
phoneNumber: "",
address: ""
});
const handleChange = (e) => {
//const value = e.target.value; -> console.dir 찍어볼 때 name과 밑 비밀번호 요소에 name이 동일.
const value = e.target.value;
const name = e.target.name;
const new객체 = {...userInfo, [name]: value};
setUserInfo(new객체);
비밀번호의 값이 잘 들어간 것을 볼 수 있다. 이제 조건문만 완성하면 된다.
if(pw == cpw){
match.current.classList.remove('pw-match');
}
else {
match.current.classList.add('pw-match');
}여기서의 포인트는 훅 함수를 사용한 것이다. 상단에
const match = useRef(); 이것과 빨간 문구 엘리먼트 쪽에 ref={match}를 추가했다.
로그를 찍어볼때 잘 작동함을 알 수 있고,
비밀번호가 맞을 때 빨간색 문구가 사라진 것을 알 수 있다!
