조건부렌더링 코드에 대한 고찰

우선 프론트엔드개발자로서 하나의 사이트를 계속 개발하게 되면
하나의 페이지임에도 다양한 상태값별로 여러가지 ui를 구현해야할 때가 많다.
그럴때마다 가장 많이 사용하는게 조건부 렌더링이다.

주로 &&연산자를 사용하거나

fucntion ConditionRenderer()=>{
return isHandout && <Tags/>
}

if문법을 사용하는 방법이 있다.

fucntion ConditionRenderer()=>{
  if(isHandout)
	return <Tags/>
}

최근 합성컴포넌트라던가, 디자인 패턴이라던가 확장성 있는 컴포넌트 개발에 관심을 가지면서 어떻게 하면 조건부 렌더링 컴포넌트도 가독성 있고, 확장성 있게 가져갈수 있을까 하다가

function ConditionRenderer({ condition, children, fallback = null }) {
   return condition ? children : fallback
}

<ConditionRenderer condition={isHandout} fallback={<FallbackComponent />}>
  <Tags />
</ConditionRenderer>

요런 방식으로 조건에 맞는 컴포넌트를 return하는 방식을 사용해 볼까 하였다. 하지만 개인프로젝트가 아니기때문에 그럴싸하고, 어려워보이는 코드보다
다른사람들이 알아보기 쉽고, 모두가 아는 방식으로 코드를 사용하는게 중요하다는 의견을 들은 결과

가장 베스트인 방법은

1. 기존에 모두가 아는 조건부 렌더링 방식을 사용할것.
2. 가독성을 올리고 싶다면 차라리 렌더링 시키는 컴포넌트를 단순화 시킬것
   이라는 결론을 내리게 되었다.

오늘의 깨달음은 어렵고 멋져보이는 코드가 좋은 코드가 아니다.

혹시나 더 좋은 생각을 가지고 계시다면 댓글을 마구마구 남겨주세요🔥