React #8

조건부 렌더링

참조한 곳 - 리액트에서 자주쓰는 if문 작성패턴 5개

1. 컴포넌트 안에서 if/else 따로 리턴

function Component() {
  if ( true ) {
    return <div>true용 내용</div>;
  } else {
    return null;
  }
} 

리턴 속에서 if문이 사용 불가능하기 때문

2. 삼항연산자 ??를 활용

(조건) ? (true면 보여줄 것) : (false면 보여줄 것)

function Component() {
  return (
    <div>
      { (조건) ? <div>true용 내용</div> : null }
    </div>
  )
} 

리턴 속에서 if문이 사용 가능
조건이 간단할 때 사용
중첩도 가능하지만 되도록 쓰지 말 것

3. 논리 연산자 && : AND

원래는 (조건1) && (조건2)에서 (조건1), (조건2)가 모두 true여야 (조건1) && (조건2)도 true라는 것인데...

(조건) && (true면 보여줄 것)
false면 null

function Component() {
  return (
    <div>
      { (조건) && <div>true용 내용</div> }
    </div>
  )
}

위 내용은 삼항연산자를 쓴 예시와 같다

4. switch / case 조건문

보여줄 경우가 여러 개일 때 (1)

function Component(변수) {
  switch (변수.조건) {
    case '조건1' :
      return (조건1일 때 보여줄 내용);
    case '조건2' : 
      return (조건2일 때 보여줄 내용);
    default : 
      return (해당하지 않을 때 보여줄 내용);
  }
}

if, else if, else와 같지만
내용이 살짝 줄어들 수 있음

5. 객체 자료형을 응용한 열거형 (enum)

보여줄 경우가 여러 개일 때 (2) ^0^

function Component() {
  const type = 'a';
  return (
    <div>
      {
        { 
           a : <div>정보1</div>,
           b : <div>정보2</div>,
           c : <div>정보3</div>
        }[type]
      }
    </div>
  )
}