Maybe component(조건부 연산자)

---

 

본 내용은 우아한테크러닝_3기에서 사용된 코드들을 바탕으로 작성했습니다.

 

---

 

{name === '리액트' && <h1>리액트입니다.</h1>}

react를 다루다보면 이와 같은 조건부 연산자들을 많이 사용하게 된다.

 

하지만, 만약 이 구문이 JSX 코드 속 틈틈히 들어가게 된다면 JSX와 JS가 뒤섞이게 되고 이는 가독성을 떨어트리는 결과를 만든다.

 

import * as React from "react"; //아마 이제는 * as 빼도 될듯..?

interface IMaybeProps {
  test: boolean;
  children: React.ReactNode;
}

export const Maybe: React.FC<IMaybeProps> = ({ test, children }) => (
  <React.Fragment>{test ? children : null}</React.Fragment>
);

typescript로 짜여진 코드이지만 이해하는데 큰 어려움이 없을 것 같아 그대로 가지고 왔다. 이 코드는 조건부 연산자를 사용하는 과정을 따로 컴포넌트화 시킨 것이다.

 

<Maybe test={this.props.showTimeline}>
     <TinyChart
         source={this.props.successTimeline.slice(
         this.props.successTimeline.length - 10
         )}
     />
</Maybe>

Maybe component는 이런 식으로 사용되게 된다. TinyChart component가 children으로 들어오고 test값이 true라면 이 TinyChart가 렌더링되는 방식이다.

 

만약 Maybe component를 따로 만들지 않았다면

 

{this.props.showTimeline&&
	 <TinyChart
         source={this.props.successTimeline.slice(
         this.props.successTimeline.length - 10
         )}
     />
}
           
         

대충 이런 식의 모양이 되었을 것이다. 이런 식으로 해도 사실 아무 문제 없다. 하지만, 가독성을 생각한다면 위의 방법처럼 JS로 된 조건부 연산자 코드를 따로 컴포넌트화 시키는 것은 굉장히 좋은 방법이라고 생각한다. 

 

좋은 아키텍쳐가 어떤 것인지 꾸준히 고민하고 노력해야 한다.

 

하나의 예로 오늘 강의에서 파일의 이름의 형식을 결정하는 과정을 설명해주셨다.

 

실제 프로젝트를 하다보면 폴더의 depth는 점점 깊어지고 이 폴더들 또한 각각 자신의 기능에 맞는 이름을 가지게 된다.

 

그렇다면 폴더 속 파일의 이름을 정하는 방식을 파일이 하는 모든 일들을 기록하는 방식으로 할 것인지 아니면 폴더에서 이미 기록된 기능들은 빼고 나머지만을 이름에 넣을지에 대해 고민하셨다고 한다.

 

결론은 파일이 하는 모든 일들을 기록하는 식으로 하셨고, 이유는 첫째, 수십 수백개의 index 파일들의 이름이 다 확실하게 다르다보니 구분하기 편하다. 둘째, 다른 폴더로 옴기기 편하다였다.

 

제일 중요한 것은 이런 식으로 파일의 이름을 정하는 것이 정답이 아니라는 것이다. 자신의 상황에 맞게 정하면 되는 것이고 이 예시는 단순히 무수히 많은 경우들 중에서 단 한개의 예시일 뿐이다. 이 때문에 내 프로젝트에 어울리는 아키텍쳐는 어떤 것일까 고민하고 적용하는 과정이 필요하다.