JSX 분기 처리

답변 확인

작성자

김효리

질문

JSX 내 분기 처리를 할 때, 멘토님은 어떻게 작성하시는 편인가요?

render 되는 컴포넌트를 따로 위에 작성

&& 연산자로 분기 처리


const MainPage = () => {
// ... 생략

return (
  {
    step === 1 && <Step1 />
  }
  {
    step === 2 && <Step2 />
  }
  {
    step === 3 && <Step3 />
  }
)
}

const UserInfoField = useMemo(() => { // 유저 필드 스위치 문}, []);

return (
  <form>
    <UserInfoField />
		<ScoreField />
  </form>

IIFE로 분기 처리


  {(() => {
  switch (step) {
  case 1:
    return <Step1 />
  case 2:
    return <Step2 />
  case 3:
    return <Step3 />
  default:
    return null
 })()}

삼항 연산자

그 외 등등 ,,

저는 따로 빼서 작성하는 건 가독성이 안 좋다고 생각해서 한 곳에서 다 처리해주고 싶어요..!

그래서 IIFE를 통해서 switch나 if 문으로 작성했는데 멘토님 생각이 궁금합니다 !!!

답변


const ConfirmButton = ({label}) => (<button>{lable ?? '확인' </button>)

모집 중

모집 마감

모집 예정

종료된 모임

→ 방장이 차다한 사람인가?


const getLabelText = () => {
  if (role === 'ben') {
    return 'asdfasdf'
  }

 if (
}


status === 'opend' ? 모집 : ㄴㅅㅁ