이제 여러분께서는
양식 제출을 다루는 것과 사용자 입력값의 추출
그리고 해당 값의 검증과 관련된
여러 방법에 대해 배워보셨는데
이 섹션의 마무리는
재사용이 가능하고 보다 관리가 쉬운 코드를 작성하는
몇 가지 방법을 살펴볼까 합니다
이것을 위해 StateLogin.jsx 파일로 돌아왔는데
그 이유는 바로 이 컴포넌트가
가장 복잡한 사용자 입력 관리를 필요로 하는 곳이기 때문입니다
여기에서는 상태를 이용해 키 입력에 따라 입력되는
모든 값에 대한 기록들을 하고 있고
키 입력과 입력란의 포커스 해제에 따른
유효성 검사 또한 진행하고 있습니다
물론 여기 있는 컴포넌트에서는 나름 괜찮은 편입니다만
기억해 두셔야 할 부분은
단 두 개의 입력으로 구성된 기초적인 양식 또한 있다는 것입니다
그리고 이와 더불어 꽤 많은 양의 코드가 여기에 있기도 합니다
보시다시피
여기에는 코드의 반복이 꽤나 많은 상황인데
결국에는 이메일과 패스워드 란에
동일한 로직이 자리하게 되기 때문입니다
이쪽 아래에 보시면 같은 JSX 코드에
약간의 디테일이 달라지기만 했을 뿐입니다
예를 들자면, 다른 입력 타입이라던가
다른 입력명 등, 조금씩은 다르지만
전반적으로 같은 구조를 가졌다는 것입니다
이 예시에서와 같이
같은 JSX 코드가 적용되어 있는
상황이라면
커스텀 컴포넌트를 구축하는 것을 생각해 볼 수 있는데
여기에서 한번 진행해 보도록 하겠습니다
components 폴더 안에 Input.jsx 파일을 추가해서
커스텀 입력 컴포넌트를 구축하고
나중에는 여기에 있는 코드를 랩핑해서
이 JSX 코드를 보다 쉽게 재사용할 수 있도록 할 것입니다
이를 위해 먼저
Input.jsx 파일에 Input 이라는 새로운 함수를 내보내겠습니다
이 함수는 나중에 여기에 있는 JSX 코드를
반환해 줄 것이고
여기 보이는 div, label, input을 포함해
그 아래의 오류 범위까지 모두 여기에 출력되도록 하겠습니다
이 코드의 많은 부분들은
외부로부터 설정이 가능해야 하며
이 컴포넌트에서 직접 코드를 작성하면 안 됩니다
예를 들자면 레이블(label) 텍스트뿐 아니라 유형(type)와
식별자 등이 되겠습니다
그러므로 몇 개의 속성을 받고
구조 분해(destructure)할 것인데
말하자면 레이블 속성을
여기 email 대신 사용하는 것과 같습니다
또 다른 경우에는 name 속성을 가져다가
name에 대한 값으로 사용할 수도 있습니다
다만 이것이 실질적으로 필요치는 않은 이유는
그렇게 하는 대신
단순히 여기 입력에 설정 가능한 속성을 모두 모아서
입력값에 펼쳐두기만 하면 되기 때문입니다
그렇게 하면 우리의 Input 컴포넌트에서
유형과 이름을 설정하는 것만으로도 충분하고
이후 해당 속성들을 감싸고자 하는
입력 요소로 전달하기만 하면 됩니다
그렇기는 하지만
좀더 명시적으로 받고 구조 분해를
해주고 싶은 속성들도 몇 개 있습니다
바로 이 label이나 ID 속성 등이 해당되는데
이 또한 나머지 속성을 한데 모은 props 객체를 이용해
설정과 전달이 가능하지만
여기에 명시적으로 빼 두는 것은
그저 여기 input에만 설정하는 것이 아니라
레이블에도 HTML 4의 값으로 설정해주기 위해서입니다
또, 무언가 잘못될 경우를 대비해서
여기에 error 속성을 배치하여
오류 메시지 출력에 사용해 줍니다
오류 메시지가 필요한 상황인지를
파악하기 위해서이지만
그러한 상황이 온다면 해당 오류 메시지가 보여져야 하기 때문에
저는 이것을 이 조건부 체크에서뿐 아니라
출력으로서의 값으로도 사용하겠습니다
여기 onBlur와 onChange, 그리고 value 속성의 경우
이 value 속성을 없애버리고
이 요소에 원래부터 퍼져있는
나머지 속성을 통해 설정이 가능합니다
그리고 onBlur와 onChange에도 똑같이 해서
이 입력을 최대한 재사용할 수 있도록 만들겠습니다
이렇게 해주면 꽤나 간결하고 가벼운 코드가 됩니다
다시 StateLogin.jsx로 돌아가서
이 입력 요소를
control-row의 디브(div)에 직접 사용해 볼텐데
가장 먼저, input.jsx 파일로부터 불러온 뒤
여기에 사용해 속성 몇개를 설정해 보겠습니다
예시로 이 label 속성 Email로 설정해서
그러니까, 출력하고자 하는 이 텍스트로의 설정인데
여기 디브 파트를 곧 없앨 것이기 때문입니다
id 속성을 email로 설정하고
type 속성을 email로 설정하고
name 또한 email로 설정해 줍니다
type와 name의 경우
input 컴포넌트 내에서
전달된 속성들의 도움을 받아
input 요소에 설정될 속성들입니다
type와 name을 여기에 명시적으로 떼어내지 않은 대신
나머지 속성을 모으고 퍼뜨리기만 합니다
type와 name은 input 컴포넌트로 감싼 input에
그렇게 남게 될 것입니다
이제 onBlur, onChange, 그리고 value를 전달하기 위해
여기 아래에서 해당 속성들을 복사해주면
이제 아래에 있는 디브를 삭제할 수 있습니다
이렇게 커스텀 컴포넌트를 사용해
다수의 JSX 코드를 지워보았습니다
이제 패스워드 관련 모든 출력과 입력에
해당 컴포넌트를 재사용할 수 있는데
말하자면 레이블도 password, id도 password
유형도 password, name도 password 등이 됩니다
onBlur, onChange, 그리고 값의 경우
아래에 있던 코드를 다시 복사해 줍니다
아직 onBlur 리스너가 하나도 없기는 합니다만
그 부분은 지금 바꾸어 주도록 하겠습니다
여기에 handleInputBlur를 호출해주고
password 입력값을 블러 처리해주는데
여기 이메일 관련 부분에서 했던 것과 같습니다
이제 이 디브를 삭제할 수 있는데
이것이 커스텀 컴포넌트를 이용한
양식의 단순화입니다
실수로 지워진 디브 종료 태그 하나를
다시 만들어주고 나면
더 간결해진 JSX 코드를 확인할 수 있습니다
이제 이것을 저장하고 앱 컴포넌트로 가서
/components/StateLogin으로부터 Login 컴포넌트를 가져오면
이전과 동일하게 작동하는 것을 보실 수 있습니다
StateLogin.jsx에서도 이것이 제대로 작동하도록
우리가 해주어야 할 마지막 일은
입력된 입력값이 유효한지 아닌지를 파악하는 것인데
이미 emailIsInvalid를 이용해 확인하고 있지만
이제 passwordIsInvalid를 추가해서 진행시켜 주겠습니다
여기에서는 didEdit.password를 체크하고
enteredValues.password에 trim을 더해
남는 공백을 제거하고
length를 이용해 여섯 글자 미만일 경우에는
너무 짧은 것으로 설정하겠습니다
해당 불리언(Boolean) 값을 넣어주면
쉽게 이것을 이용해 입력에 오류 메시지 설정을
할 수 있게 됩니다
기억해둘 것은, 이 input 컴포넌트에서
여기 error 속성 또한 요구되는 부분이므로
만약 오류가 생긴다면 해당 속성 설정도 반드시 해주어야 합니다
여기 email 입력을 위해서
emailIsInvalid라고 설정하고
True일 경우
error 속성에 '이메일 유형이 잘못되었습니다'라는 문자열을
전달하겠습니다
password 입력 부분에도 같은 작업을 반복해서
passwordIsInvalid를 검사하도록 하고
여기에는 '유효한 비밀번호를 입력하십시오'를 넣어 주겠습니다
이제 이것을 저장해주면
이전과 같이 작동하는 것을 볼 수 있는데
키 입력과 포커스 해제에 따른 유효성 검사와
입력한 패스워드가 너무 짧을 경우 등이 있습니다
이렇게 재사용이 가능한 입력 컴포넌트를 사용해서
이전과 같은 결과를 복제해 보았습니다