https://koreansimpson.tistory.com/entry/react-%EC%A1%B0%EA%B1%B4%EC%97%90-%EB%94%B0%EB%A5%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%B0%94%EA%BE%B8%EA%B8%B0?category=974546
사실 여기 있는 내용 그대로 가져온 거다...ㅎㅎ 까먹을까봐 + 내 의견을 남기기 위해 새로운 게시글로 남긴다.
리액트를 사용하다보면 조건부 렌더를 많이 활용하게 된다.
const isShow = props.isShow;
return {
isShow
? (<ShowIcon size={10} color="red" {...restProps} />)
: (<HideIcon size={10} color="blue" {...restProps} />)
}아래의 예시처럼 컴포넌트에 전달할 props는 동일한데, 조건에 따라 컴포넌트만 다른 경우 아래와 같은 방법도 있다.
const isShow = props.isShow;
const statusIcon = {
show: ShowIcon,
hide: HideIcon
}
const StatusIconComponent = statusIcon[isShow ? "show" : "hide"];
return <StatusIconComponent size={10} color="red" />조금 더 간결하게 표현해보자.
const isShow = props.isShow;
const StatusIconComponent = isShow ? ShowIcon : HideIcon;
return <StatusIconComponent size={10} color="red" />컴포넌트에 전달할 props가 다른 경우에는 다음과 같이 코드를 작성해볼 수 있겠다.
const statusIcon = {
show: <ShowIcon size={12} color="red" />,
hide: <HideIcon size={10} color="blue" />
}
const StatusIconComponent = ({ isShow }: { isShow: boolean }) => statusIcon[isShow ? "show" : "hide"];
return <StatusIconComponent isShow />조금 더 깔끔하게 표현하면 다음과 같이 작성해볼 수도 있겠다.
const StatusIconComponent = ({ isShow }: { isShow: boolean }) => isShow
? <ShowIcon size={12} color="red" />
: <HideIcon size={10} color="blue" />;
return <StatusIconComponent isShow />제일 중요한 것은 컴포넌트를 객체의 value, 함수의 반환값으로 이용하면 코드를 조금 더 깔끔하게 쓸 수 있다는 것이다.
생각
사실 가장 일반적인 방법은 그냥 return문 내부에서 조건부 연산자를 사용하는 것이다. 하지만 나는 개인적으로 hide && <Component /> 와 같은 형태의 코드가 싫다.
return문 내부에 조건문이 들어가면 코드를 이해하는데 피곤하다. 이러한 규칙을 세우고 모든 곳에 동일하게 적용이 된다면 우리는 isShow라는 props를 통해 해당 컴포넌트의 반환값이 null일 수 있음을 유추할 수 있다! 때문에 && 연산자와 동일한 예상을 할 수 있다.
