REACT JSX를 알아보자

skyier·2023년 11월 2일

REACT

목록 보기

4/15

JSX(java script extension)란?

자바스크립트 확장 문법

가상 트리를 만들기 위해 사용된다.

자바스크립트와 HTML을 동시에 사용하며, 함수가 HTML을 반환하거나
HTML에 자바스크립트 변수들을 바로 사용할 수 있는 일종의 템플릿 언어이다

가상트리와 실제트리

리액트가 가상트리를 실제 트리로 변환 후 문서에 주입한다

1. 가상트리 (Virtual tree)

자바스크립트 템플릿의 트리 (가상트리가 실제트리로 변환되 주입된다.)

2. 실제트리 (Real tree)

HTML 문서의 트리

JSX를 사용해보자!

📕 Fragment

가상태그를 감싸는 빈 태그

가상트리는 하나의 트리로 감싸야 된다.

불필요하게 감싸줘야 할때는 Fragment를 사용한다.

ex)

function Snippet(){
  return(
    <> //여기 빈태그가 Fragment
      <h1>JSX Fragment</h1>
      <ul>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
      </ul>
    </>
  )
}

📕 JSX에서 변수 출력하기

변수를 출력할 때는 {}를 사용해주자!

function Snippet(){
  const cat = {
    name: '치즈',
    age:2,
    home:null,
    sound:function(){
      return '야옹'
    }
  }

  return (
    <dl> 
      <dt>{cat.name}</dt>
      <dd>나이: {cat.age}</dd>
      <dd>집: {cat.home}</dd>
      <dd>울음소리: {cat.sound()}</dd>
    </dl>
  )
}

📕 조건부 랜더링

1. && (논리 연산자 그리고)
표현식1 && 표현식2

표현식1이 참일경우 표현식2를 출력한다
표현식1이 거짓일 경우 출력하지 않는다

2. || (논리연산자 또는)
표현식1 || 표현식2

표현식1이 참일경우 표현식1을 출력한다
표현식1이 거짓일 경우 표현식2를 출력한다

3. ? (삼항연산자)
조건 ? 표현식1 : 표현식2
조건이 참일 경우 표현식1을 출력한다
조건이 거짓일 경우 표현식2를 출력한다

ex)

function Snippet(){
  return(
    <>
      <h2>Conditional rendering</h2>

      <h3>&& (AND)</h3>
      <ol>
        <li>{true && '표현식2'}</li>
        <li>{false && '표현식2'}</li>
      </ol>

      <h3>|| (OR)</h3>
      <ol>
        <li>{'표현식1' || '표현식2'}</li> 
        <li>{'' || '표현식2'}</li>
      </ol>

      <h3>? (삼항연산자)</h3>
      <ol>
        <li>{true ? '표현식1':'표현식2'}</li>
        <li>{false ? '표현식1':'표현식2'}</li>
      </ol>
    </>
  )
}

결과:

📕 리스트 랜더링

리스트를 반복하여 랜더링 해야할때, arr.map(function(){})를 이용하여 랜더링 할 수 있다.

ex)

function Snippet(){
  const beers= [
    {name: '하이네켄', origin:'네덜란드'},
    {name: '기네스', origin:'아일랜드'},
    {name: '버드와이저', origin:'미국'},
  ];

  //가상트리는 소괄호로 감싸준다.
  const beerList = beers.map(beer => (
    <li key={beer.name}>{beer.name}, {beer.origin}</li>
  ))

  return (
    <>
      <h3>세계맥주</h3>
      <ul>
        {beerList}
      </ul>
    </>
  )
}