[React] 배열 렌더링

들어가며

이 코드의 조건이 동일하기때문에 하나로 묶고 싶었는데, <> (Fragment) 로 묶게 되면 Collapse.Panel의 부모가 변경되므로 deps 등의 영향을 받을 수 있다. 그래서 deps 를 바꾸지 않으면서 두 조건문을 하나로 합치는 방법에 대해 고민했다.

{challengeType === "PHOTO" && (
  <Collapse.Panel header="인증샷 로고 등록" key="uploadPhotoLogo">
	<Form.Item label="인증샷 로고 등록">
	  <UploadPhotoLogo />
    </Form.Item>
  </Collapse.Panel>
)}

{challengeType === "PHOTO" && (
  <Collapse.Panel header="인증샷 규격 안내 설정" key="photoSpecGuide">
    <Form.Item label="인증샷 규격 안내 설정">
      <PhotoSpecGuide />
    </Form.Item>
  </Collapse.Panel>
)}

해결방안

그래서 생각해낸 방법이 각각의 Collapse.Panel을 별도의 배열 요소로 만들어주고, 이 배열을 JSX에서 {}로 감싸서 렌더링 하는 것이다. 이렇게 하면 두개의 조건문을 하나로 합치면서도 각각의 Collapse.Panel이 독립적으로 존재하도록 할 수 있다.

{challengeType === "PHOTO" && [
  <Collapse.Panel header="인증샷 로고 등록" key="uploadPhotoLogo">
	<Form.Item label="인증샷 로고 등록">
	  <UploadPhotoLogo />
    </Form.Item>
  </Collapse.Panel>,
  <Collapse.Panel header="인증샷 규격 안내 설정" key="photoSpecGuide">
    <Form.Item label="인증샷 규격 안내 설정">
      <PhotoSpecGuide />
    </Form.Item>
  </Collapse.Panel>
]}
 

마무리

배열까지 렌더링이 가능한...리액트는 최고다. 여러개의 조건문으로 적었을때보다 가독성도 좋아지고 코드 반복성도 줄여준다 🏷️
끗!