구조분해할당... 왠지 앞으로도 엄청 쓰일 것 같다...
1. 회원 가입 정보 입력 UI 제작
나는 같은 팀원인 분과 페이지로 나누어 작업하자고 했다. git marge..? 솔직히 이 때는 별 생각이 없었다. 어차피 scss이기 때문에 스타일도 최상위 div에 씌워놓으면 겹칠 일은 없겠지 않은가? 그래서 나는 일단 내가 맡은 회원 가입 창에 집중하기로 했다.
피그마를 참조해서 만드는데도 적지 않은 시간이 걸렸다.
예전에 타 사이트에서 회원가입을 할 때 많이 보았던 회원가입 페이지였지만, 내가 직접 하나하나 만들면서 느낀점은 '이 안에 있는 데이터를 어떻게 처리를 해야하지?' 였다.
내가 직접 회원가입을 할 때는 전혀 생각해보지도 않았었던 것들이 직접 개발이란 것을 배우면서 하나하나 의문이 들기 시작한 것이었다.
1. input에 들어있는 값들을 받아와야하고,
2. 비밀번호와 비밀번호 확인 창의 값을 서로 비교해줘야하고,
3. 닉네임은 한 글자 이상 입력이 되어야 하고,
4. 파일 선택 후 어떤 방식으로 백엔드에게 보내주어야 하는지도 알아봐야하고,
5. 전화번호의 selectBox의 값은 어떻게 받아야와야 하는지, selectBox의 값과 input의 value값은 어떻게 한번에 보내주어야 하는지도 생각해보아야 하고,
6.생일의 값들을 서로 받아와서 어떤 방식으로 받아와서 전달해주어야 하는지까지...
일반적인 타 사이트들과는 다르게 입력하는게 별로 없음에도 고려해야할 사항이 너무도 많았다. 일단 나는 회원가입 창의 input 데이터를 받아오기 위해 구조분해할당 을 이용하기로 했다. 위의 조건들을 하기위해서는 일단 해당 데이터들의 value값을 받아오는 것이 먼저기 때문이었다. input의 값들을 하나하나 받아오려면 수많은 useState가 필요한데, 그러기에는 로직도 너무 길어지고, 지저분해보였기에 이번에 배운 내용을 적용해보기로 했다.
2. input data 구조분해할당으로 값 받아오기
이번에 배운 내용이기에 단순히 내 지식만으로는 진행할 수가 없어 주변인의 도움을 받았다.
1. useState에 입력받을 값들 초기화 시켜주기.
일단 내가 input의 입력값들을 받아올 데이터들을 하나하나 객체 형태로 초기화 해주었다. 일반적으로 String이었다면 "" 을 주었으면 되었겠지만, 내가 받아올 값들은 하나의 String이 아니었기에 객체 형태로 담아준 것이었다.
email, password, nickname 등등 이벤트로 받아올 값들을 다 입력해주었다.
2. 구조분해할당 해주기
위에서 useState로 초기화 해준 값들을 전부 구조분해할당을 해주었다. 만약 구조분해할당을 해주지 않으면 email이라는 데이터 값을 가지고 싶을 때 memberData.email 로 입력해서 가져와야 하는데, 지금처럼 구조분해할당을 해준다면 앞에 붙는 memberData를 일일이 입력해주지 않아도 된다. 그냥 email로 해당 데이터의 value 값을 가져올 수 있게된다.
3. 함수만들기
구조분해할당을 하기 전에는 개별로 useState를 하나하나 지정해주어서 함수를 하나씩 다 만들어주었어야 했는데, 지금처럼 구조분해할당을 해주면 함수 하나로 input 데이터들을 모두 가져올 수 있게 된다. 기존에는 event.target.value로 해당 이벤트의 타겟을 지정해 벨류값을 가져왔다면 이 함수는 name (key값) 을 직접 찾아 동일한 name이 있으면 그 안에 value값을 가져오는 방식이었다.
근데 여기서는 ...memberData 라는 걸 사용해주는데 이 아이는 memberData의 중괄호를 벗겨주세요~라는 뜻이라고 한다.
만약에 저렇게 쓰지 않고 단순히 memberData로 쓰면 객체에 name과 value가 새로 붙어 생성되던데 너무 신기했다.
본론으로 들어와서 memberData의 중괄호를 벗긴 뒤 name을 입력한 곳을 찾아 그 위에서 onChange의 이벤트가 발생할 때마다 그 name의 value값을 가져오게 되는 것 같았다.
근데 이게 name에 내가 useState로 미리 초기화 해 두었던 name을 입력해줘야지, 엉뚱한 거 입력해주면 새로운 key가 생성되어 value값이 들어가니 주의해야했다.
지금 위의 이미지는 내가 코드를 컴포넌트화해서 만든다고 props를 준건데, 실제로는 그냥 아까 만들었던 함수를 하나하나 준거라고 보면된다.
일반적인 구조분해할당이 끝이났다. 뭔가 쉬워보이면서도 .... 어려운 것 같은 이 미묘함.. 앞으로도 데이터를 가져올 때 앞에 userData.xxx 처럼 붙이기 싫으면 꼭 써야할 듯 했는데, 많이 쓰면서 적응해봐야할 것 같았다.
3. 버튼 비활성화..? 버튼 색 변환..?
솔직히 이건 파운데이션 시간에 과제로도 나오고 직접 멘토님에게 방법을 알게된 것이긴 하지만, 그래도 하는 방법을 공유해보려고 한다.
회원가입을 위해서는 필수 입력 사항이 있다. email의 형식이어야 하기 때문에 '@' 와 '.' 이 꼭 포함되어야하고, 비밀번호는 10글자 이상 입력되어야하고, 닉네임은 한 글자 이상 입력되어야한다.
위의 3가지 조건이 AND 조건으로써 모두 만족되지 않으면 버튼 색상은 Gray 색상으로 변하고, 버튼의 속성에 disabled가 true 속성이 되어야했다. 만족되면 그 반대의 속성이 적용되어야 하고 ...
나는 처음 '@'와 '.' 이 포함된 걸 찾기 위해서는 indexof 를 생각했었다. 만약 내가 찾고자하는 email 의 입력값에 문자들이 포함되지 않으면 -1 값을 반환해주기 때문에 그 조건을 가지고 if문을 사용하면 될 줄 알았다.
하지만 이것보다 더 편리하고 좋은 함수가 있었는데 바로 includes 였다. 이 함수는 문장에서 내가 원하는 문자가 포함되어 있는지 찾아주는 함수였는데, 이걸 이용하면 -1 이 아닌 true 또는 false 값을 주었기 때문에 더 좋은 것 같았다.
const isEmailCheck = email.includes("@") && email.includes("."); 위와 같이 코드를 작성하니 두 가지의 조건이 모두 만족하면 true를 주었다. 그래서 이 조건에다가 또 다른 조건인 '패스워드 10자 이상 입력' 과 '닉네임이 1글자 이상 입력'되어야 한다는 조건을 추가로 걸어주었다.
const isLoginDataCheck = email.includes("@") && email.includes(".") && password.length >= 10 && nickname.length >= 1;이제 모든 조건이 만족해야만 true를 받을 수 있는 조건을 완성하였다. 이제 저 변수로 버튼의 활성화 여부를 알 수 있게 되었기 때문에, 저 변수를 이용하여 버튼 속성에 조건을 걸어주었다.
<button disabled={!isLoginDataCheck} />버튼 색상은 disabled의 여부에 따라서 스타일 속성을 줄 수 있었기 때문에 저 조건으로 버튼 색상과 disabled의 true/false 여부를 모두 컨트롤 할 수 있었다.
이렇게 버튼의 색상 변환과 활성화/비활성화 여부를 컨트롤 할 수 있게 되었는데, 뭔가 신기했다.
구조분해할당도 그렇고, return 밖에서 선언한 조건을 이용해서 disabled의 true/false 여부를 컨트롤 할 수 있는 것도 그렇고, 다 신기했던 것 같다.
이제 2일차고 구현할 것도 산더미 같았지만, 일단 한 단계씩 차근차근 올라가는 것도 재미있었고, 뭔가 내가 원하는대로 잘 구현이 될 때마다 뭔가 짜릿한 느낌이 있는 것 같았다.
더 힘내서 화이팅해보자... 장하다 나
