[React] JSX 02

JSX 문법에서 지켜야 할 것들 🐣

• 닫힘 규칙

  JSX의 모든 태그는 여는 태그가 있으면 닫는 태그가 있어야 한다는 규칙입니다.
  
  

• 최상위 태그 규칙

  JSX가 반환하는 모든 태그는 반드시 최상위 태그로 감싸야 합니다.
  페이지에서 렌더링되지 않는 <React.Fragment> or <> 태그를 사용할 수 있습니다. (선택사항)

  function Body() {
     return (
         <React.Fragment>
             <div>div 1</div>
             <div>div 2</div>
         </React.Fragment>
     );
  }
  export default Body;
  

  function Body() {
    return (
        <>
            <div>div 1</div>
            <div>div 2</div>
        </>
    );
  }
  export default Body;

  
  

조건부 렌더링 🐨

• 조건부 렌더링이란?

  리액트 컴포넌트가 조건식의 결과에 따라 각기 다른 값을 페이지에 렌더링하는 것을 조건부 렌더링이라고 합니다.
  
  

• 삼항 연산자를 활용한 조건부 렌더링

  import React from "react";
   function Body() {
     const num=19;
     return (
         <>
         <h2>
             {num}은 {num % 2 === 0 ? "짝수" : "홀수"}입니다.
         </h2>
         </>
     );
  }
  export default Body;

  
  

• 조건문을 이용한 조건문 렌더링

  import React from "react";
   function Body() {
     const num = 200;
     if (num % 2 === 0) {
         return <div>{num}은 짝수</div>;
     } else {
         return <div>{num}은 홀수</div>
     }
  }
  export default Body;

  
  

• 장단점

1. 삼항 연산자는 코드가 매우 간결하지만, 자주 사용할 경우 가독성을 해칠 우려가 있으며 다중 조건을 작성하기 힘듭니다.

2. 조건문은 가독성은 좋으나 기본적으로 작성해야 할 코드가 많고 중복 코드가 발생할 우려도 있습니다.