1. TextField

TextField는 사용자의 입력을 받고 입력값에 따라 에러가 뜨거나, 입력이 완료되었다는 표시를 하는 공통 컴포넌트이다. 컴포넌트 특성상 안에 있는 사용자의 입력값에 따라 스타일이 달라진다.

1. 평상시 : default
2. 입력값에 validation에 충족하지 않을 때 : warning

• 그 외에도 여러가지 케이스가존재한다.
  1. 기본값: default
  2. focus되었을 때 : focused
  3. 조건에 충족했을 때 : filled
  4. 읽기 전용 : readonly

상황에 따라 label, caption이 추가되기도 한다. 다양한 상황이 존재한다. 이 상황 처리에 대한 로직을 어디에 넣는게 맞을까? 현재 우리 프로젝트는 react-hook-form을 활용하고 있다.

첫 번째 방법은, useForm 혹은 useFormContext에서 받은 props를 통째로 TextField에 넘겨주고, TextField내부에서 status에 따라 error처리, success처리를 하는 것이다. 모든 책임을 TextField컴포넌트에 넘겨주는 것이다.TextField외부에서는 register와 hookForm을 넘겨주면 되는 것이다. 그 이후에는 TextField안에서 처리하는 것이다. 밖에서는 안에서 무슨 일이 일어나는 지 알지 않아도 된다. 완전 추상화라 할 수 있다.

위와 같은 생각을 가지고 코드를 작성해보았다.

• TextField.tsx

props로 넘겨주는 값이 많아서 내부에서 처리하는 로직이 밖에서는 보이지 않는다. 이제 정말 좋은 코드일까?

2. 코드 리뷰 바탕으로 코드 수정

1. 1차 피드백 : 내부 처리로 인한 복잡함

프론트엔드 팀원인 주혁님이 ButtonGroup과 Button을 구분하여 구현한 코드이다.

https://github.com/gloddy-dev/gloddy-client/pull/188

위 방법처럼 TextFieldGroup으로 TextField를 감싸면 어떨까? 그렇다면, TextFieldGroup 내부에 TextFieldLabel, TextFieldCaption 각각 컴포넌트를 직접 넣는 것이다. 이 방법이 좋을까? 혹은 props로 label, caption등을 넘겨줘서 내부에서 처리하는 것이 좋을까?

지금까지는 나는 후자와 같은 방식으로 구현을 하였다. 이러한 방식으로 구현을 하니 한 컴포넌트가 상당히 많은 역할을 해서 무거워지고, 코드가 상당히 난잡해졌다. 전자와 같은 방식으로 구현을 하면 이러한 코드의 복잡함이 어느정도 해소가 될 것이다.