[최종 프로젝트] 비슷한 두개의 컴포넌트를 효율적으로 사용하기

 

 

 

이번 최종 프로젝트에서 많은 고민을 하는 부분이 있다면 재사용성을 위한 컴포넌트 분리였다.

 

그리고 작업을 하는 도중 컴포넌트로 만든 InputField에서 문제가 조금 생겼다.

처음에는 InputField 컴포넌트 하나로 작업이 가능했다. 하지만 라디오 버튼이 추가된 파트가 추가가 되었다.

 

(왼쪽의 UI에서 오른쪽의 UI로 변경을 해야했다. 참고로 5개의 input창 중에서 유일하게 자가용만 라디오 버튼이 있다)

 

 

 

1. 처음 시도한 방법 : 문제점 발견

기존 방식과 문제점 초기 작업 방식은 특수한 상황마다 컴포넌트를 나누어 관리하는 것이었다.

예를 들어, 차량 정보를 위한 `InputFieldForCar`와 일반적인 정보 입력을 위한 `InputField` 두 개의 컴포넌트를 분리해서 사용을 했다.

이 방법의 단점은 다음과 같았다

 

중복 코드: 두 컴포넌트 간에 유사한 코드가 많았습니다. 비슷한 스타일, 필드 유효성 검사, 레이아웃 등이 반복.

확장성 부족: 다른 Input 타입이 필요할 때마다 새로운 컴포넌트를 추가해야 함.

유지보수성 저하: 수정할 사항이 생기면 모든 컴포넌트를 일일이 수정해야 함.

 

이러한 이유로 컴포넌트를 통합하여 관리할 필요성을 느끼게 되었다.

 

 

컴포넌트를 효율적으로 관리하기 위해, InputField 컴포넌트를 하나로 통합했다. 

그 후 나는 여러 방법을 통해 해결해 나갔다.

 

 

2. if문 추가

if문을 통해 id값이 "car"인 경우에만 라디오 버튼을 보여주는 로직을 타이틀과 input창 사이에 추가를 해주었다.

 

이런식으로 밖에서 작업 후 불러오거나,

JSX 안에서 작업을 하면 되었지만 return문이 추가되는 등 코드의 복잡성이 올라갔다.

let radioButtons;
if (id === "car") {
  radioButtons = (
    <div className="flex gap-4 mb-4">
      {/* 라디오 버튼들 */}
    </div>
  );
}

return (
  <div className="flex flex-col">
    {radioButtons}
    {/* 나머지 컴포넌트 코드 */}
  </div>
);

 

그래서 나는 다른 방법을 더 고민해보기로 했다.

 

 

3. 삼항연산자 활용

{id === "car" ? (
  <div>{/* 라디오 버튼 */}</div>
) : (
  <div>{" "}</div>
)}

 

삼항연산자를 활용하니 false의 경우에도 무조건 표시를 해줘야해 아주 조금은 코드가 복잡해진 느낌이었다.

 

그래서 false인 경우 렌더링을 안해줘도 되는 && 연산자를 사용해 조건부 렌더링을 적용해보기로 했다.

 

 

4. && 연산자

{/* id가 "car"일 때만 라디오 버튼을 표시 */}
      {id === "car" && (
        <div className="flex gap-4 mb-4">
          <label className="flex items-center space-x-1">
            <input
              type="radio"
              value="휘발유"
              {...register("fuelType")}
              className="form-radio text-primary focus:ring-0"
            />
            <span className="text-[16px] text-gray-700">휘발유</span>
          </label>
...

 

 

id === "car" 가 `true`인 경우 오른쪽의 JSX 코드를 렌더링을 하고

`false`인 경우 렌더링 하지 않는다.

 

 

이렇게 작업을 해주니 2개의 컴포넌트에서 1개의 컴포넌트로 정리가 되었고, 조금 더 사용성 위주의 리팩토링이 되었다.

추가로 다시 한 번 논리 연산자와 삼항 연산자의 차이점에 대해 알게 되어 좋은 경험이 된 것 같다.