원래 이슈 내용은 에러 메시지를 모달창으로 띄워달라는 것이었지만 입력해야 하는 폼 아래에 에러 메시지를 띄우는 게 더 낫다고 판단함. 이후 내부 회의를 거쳐 제안한 방향으로 결정됨.
이렇게!
모달창으로 하면 안되는 이유는 다음과 같음.
에러 메시지를 다시 확인하고 싶으면 또 저장을 눌러서 팝업창을 봐야 하는 번거로움이 있음.
에러 메시지를 보여주지 않으면 정확한 에러 위치를 찾을 수 없음. (모달창은 설명 뿐)
errors가 객체 형태로 담기는데 api depth만큼 depth가 존재함.
a {
b: {}
c: {}
d: [{...}]
}
이런 형태면 모달창으로 모든 에러를 보여줄 때 재귀를 돌려서 message를 하나의 배열로 만들어야 함. 재귀가 어렵다기 보단 예쁘게 depth로 정리해놨는데 그걸 다시 푸는 게 이상하다고 생각함.
<aside> 👉 일단 훑어보시는 거라면 현황 요약 부분만 읽어도 좋아요~
</aside>
errors
캡쳐된 코드가 나온다면 리액트 훅 폼 공식문서에서 발췌한 것임.
setValue, getValue
setError, clearErrors
왼쪽) 일반적인 input, 오른쪽) 필수로 값을 선택해야 하는 input이 아닌 버튼
리액트 훅 폼은 Input에 register를 해야 input value 및 에러가 등록, 갱신이 되는데 input이 아닌 다른 것에 대해서도 등록이 필요한 상황이었음.
이런 경우 type이 hidden인 input을 만들어서 보이지 않는 input에 등록을 하고 setValue를 해준 곳으로 부터 value를 판별해 해당 value 여부를 확인함.
특히 유통사는 여러 곳에서 value를 넣어주고 있어 분명한 name을 가지고 있지 않음. 그래서 name이 일치하지 않아 error를 수동으로 통제해줘야 하는 경우가 됨.
onMatching={(_, a) => {
setValue("a", a);
clearErrors("a.code");
}}
onRemove={() => {
setValue("a", undefined);
setError("a.code", _, { shouldFocus: true });
}}
onUpdateName={async (_, name: string) => {
setValue(`b`, [name]);
forceRender();
}}
이렇게 수동으로 통제해주게 되면 앞으로 이러한 폼이 늘어날 때마다 setValue, setError, clearErrors를 해야 하는 문제가 발생함.
심지어 프론트 단에서 등록해서 보여줘야 하는 썸네일의 경우 기존의 썸네일이란 value 자체가 없었기 때문에 새로운 value를 추가해줘야 해서 기본으로 적어줘야 하는 코드가 더 필요함.
결국 문제를 요약하자면, register만 해주면 되는 게 아니라 value를 set하고 이 값에 따라 setError, clearErrors를 매칭되었을 때, 지웠을 때, 입력되지 않았을 때 등에 따라 일일히 적어줘야 함.
모든 경우를 통제하지 않고 unControlled하게 만들고 싶어 리액트 훅 폼을 쓰는 건데 이렇게 사용하게 되면 케이스를 빼먹기 쉽고 코드량도 복잡하게 증가하는 문제가 있음.