2024. 02. 13 react 조건에 따른 컴포넌트 보여주기

풀옵으로 전달해주는 값에 따라 다른 리스트 컴포넌트를 보여주어야 했다.

그래서 작성한 코드

export default function ListSection({ text, onClick, category }) {
  let ComponentToRender = null;
  if (category === "면접후기") {
    ComponentToRender = Interview;
  } else if (category === "취업정보") {
    ComponentToRender = WorkInfo;
  }
  return (
    <ListSectionBox>
      <MenuTilte>{text}</MenuTilte>
      <MenuLink onClick={onClick}>더보기</MenuLink>
      <MainPostSample>{ComponentToRender && <ComponentToRender />}</MainPostSample>
    </ListSectionBox>
  );
}

 

let을 이용해 ComponentToRender 라는 변수의 초기값을 null로 설정\

let ComponentToRender = null

 

 

catagory를 풀옵으로 전달해 면접후기일때와 취업정보일때를 작성해 주는데 

여기서 Interveiw와 WorkInfo는 컴포넌트의 이름이다.

if(category === "면접후기") {
 ComponentToRender = Interview
} else if(category === "취업정보") {
 ComponentToRender = WorkInfo

 

 

그리고 조건부 redering을 이용해 보여줄 컴포넌트를 설정해 주는 곳에서는 아래와 같이 작성

{ ComponentToRender  && < ComponentToRender /> }

💡

Interview  && < Interview /> : Interview (조건 검사)가 참이면 < Interview /> 컴포넌트 보여주기

WorkInfo  && < WorkInfo /> : WorkInfo (조건 검사)가 참이면 < WorkInfo /> 컴포넌트 보여주기

 

 

그리고 당연하지만 인자값으로 category도 작성!!

export default function ListSection({ category })