컴포넌트 분리하기 전략

컴포넌트를 분리하는 기준에 대한 생각을 정리한 글입니다.

https://bkdragon0228.tistory.com/15

라이브러리를 사용하여 반복되는 코드 줄이기

바퀴를 다시 발명하지 마라.

입력창을 만들 때마다 다음과 비슷한 코드들이 추가되어야 한다.

const [email, setEmail] = useState<string>('');

const handleEmailChange = (e) => {
	setEmail(e.currentTarget.value)
}

const handleSubmit = () => {
	e.preventdefault()
	
	if(!email) {
	// error handling..
	}
	
	...
}

코드가 점점 길어지고 복잡해질 것이다. react-hook-form이라는 라이브러리를 사용하면 위 과정을 간략하게 만들 수 있다.

아래는 로그인 페이지의 일부 코드이다.

...
<h2>Login</h2>
  <S.InputWrapper >
      <S.Email type='text' {...register('email', {required : "This is required"})} placeholder="Email" />
      <ErrorMessage
	      errors={errors}
	      name="email"
	      render={({ message }) => <p>{message}</p>}
      />
  </S.InputWrapper>
  <S.InputWrapper >
      <S.Password type='password'
      {...register('password',
          {
						required : "This is required" ,
	          minLength: { value: 3, message: "This input min-width is 8" }})}
	          placeholder="Password"
      />
      <ErrorMessage
        errors={errors}
        name="password"
        render={({ messages }) =>
        messages &&
        Object.entries(messages).map(([type, message]) => (
          <p key={type}>{message}</p>
        ))
      }
      />
  </S.InputWrapper>
  <button type='submit' disabled={isSubmitting}>login</button>
...

Email, Password 태그는 input 태그이다.

추가적인 상태를 만들지 않고 input창 만으로 기능을 구현할 수 있게 되었다. 또한 register를 이용해 에러 핸들링 과정도 간략해졌다.

무한 스크롤

쭉 내리다보니 3시간이 지나있었다…