[React] 03-jsx

조건분기

JSX 조건분기 (1) - 함수를 통한 리턴값 분기

  const btnLogin = (isLogin) => {
    if (isLogin === true) {
      return <button type="button">Logout</button>;
    } else {
      return <button type="button">Login</button>;
    }
  };

JSX 조건분기 (2) - 조건식과 '&&' 연산자 사용

• {조건 && (조건이 참인 경우 출력할 내용)}
• 조건이 거짓인 경우 표시되는 내용 없음 (여러개일 경우 모든 조건이 참이어 함, 하나라도 거짓일 경우 출력X)
  • { true && true && JSX1 && true && JSX2 } -> JSX2 출력

  const isLogin = true;

  return (
    <div>
      <h2>If2</h2>
      {isLogin === true && <p>로그인 되셨습니다.</p>}
    </div>
  );

JSX 조건분기 (3) - 조건식과 '||' 연산자 사용

• {조건 || (조건이 거짓인 경우 출력할 내용)}
• 조건이 참인 경우 표시되는 내용 없음
• (왼쪽에서부터 참이 하나라도 나오는 부분에서 식이 끝남 밑에선 articleList가 false이고 JSX구문 자체가 참으로 인식되서 JSX출력 )
  • { false || false || true || JSX } -> true부분이 출력되어야하는데 boolean이므로 아무것도 출력되지 않음
  • { false || false || JSX1 || JSX2 } -> JSX1 출력

const articleList = undefined;
  /** 출력할 내용이 없는 경우 */
  // -> undefined, null, 0, false, ''(빈문자열) 중 하나를 return 할 경우 정상적인 화면 렌더링이 이루어지지 않음.
  // -> 특히 undefined 변수를 바로 리턴하는 경우 에러 발생함.

  return (
    <div>
      <h2>If3</h2>
      {articleList || <p>조회된 게시글이 없습니다.</p>}
    </div>
  );

JSX 조건분기 (4) - 조건식과 '&&' 연산자 사용

• {조건 ? (조건이 참인 경우 출력할 내용) : (그렇지 않은 경우 출력할 내용)}
• 조건이 거짓인 경우를 사용하지 않고자 한다면 null 사용
  • ex) { point === 80 ? (...) : (null) }

  const isLogin = true;

  return (
    <div>
      <h2>If4</h2>
      {isLogin === true ? <button type="button">로그아웃</button> : <button type="button">로그인</button>}
    </div>
  );

반복문

• 반복적으로 처리되는 컴포넌트 요소는 각 항목을 식별하기 위해 고유한 값을 갖는 key 값을 포함해야 함 (React 권고사항)

  const myArray = ["hello", "world"];
  .
  .
  return (
    <div>
      <h2>Loop1</h2>
      <ul>
        { myArray.map((v, i) => (<li key={i}>{v}</li>)) }
  .
  .