[React] JSX 소개

vanLan·2022년 11월 15일
0

React

목록 보기
2/11
post-thumbnail

🔑 JSX 란?


🗝 작동원리

  • Babel 트랜스파일러를 사용하여, React.createElement()와 같은 결과로 해석된다.
    const element = (<h1 className='greeting'>Hello, World!</h1>);
    const element = React.createElement('h1', {className: 'greeting'}, 'Hello, World');

🗝 JSX에 Javascript표현식을 포함 하는 방법

  • JSX의 중괄호 안에는 유요한 모든 JavaScript 표현식을 넣을 수 있다.

    
    const name = 'Vanlan';
    const element = <h1>Hello, {name}</h1>;
  • JSX도 표현식이다.

    
    function getGreeting(user) {
      if(user) {
        return (<h1>Hello, {user}!</h1>);
      }
    }
    // JSX는 if구문, for loop안에서 사용 및 변수에 할당이 가능하고 인자로 받아들인 후 함수로 부터 반환   할 수 있다.
  • 조건부 렌더링
    JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나, AND 연산자를 이용한다.
    반면, if문은 사용할 수 없다. (사용해야 한다면 즉시 실행함수 표현(IIFE)를 사용해야 한다.)

    
    // 삼항 연산자를 이용
    function App() {
      return (
        <div>
        {
          1 + 1 === 2 ? (<div>True</div>) : (<div>False</div>);
        }
        </div>
      );
    }
    
    // AND 연산자를 이용
    function App() {
      return (
        <div>
        {
          1 + 1 === 2 && (<div>True</div>);
        }
        </div>
      );
    }
    
    // if문 사용(즉시 실행 함수 표현(IIFE))
    function App() {
      const value = 1;
      
      return (
        <div>
        {
          (function() {
            if(value === 1) return (<div>하나</div>);
            if(value === 2) return (<div></div>);
            if(value === 3) return (<div></div>);
          })();
        }
        </div>
      );
    }
  • JSX속성 정의
    속성에 따옴표를 이용하여 문자열 리터럴을 정의할 수 있다.

    const element = <a href="https://www.reactjs.org">link</a>;

    중괄호를 사용하여 속성에 Javascript 표현식을 삽입할 수 있다.

    const element = <img src={user.url} />;

    단, Javascript의 예약어와 동일한 속성명은 camelCase프로퍼티 명명 규칙을 사용한다.

    
    // index 대신 tabIndex 사용
    <div className='App' tabIndex='0'></div>
    
    // class 대신 className 사용
    <img src={logo} className='App-logo' alt='logo' />
    
    // for 대신 htmlFor 사용
    <input type='checkbox' name='agreement' id=''agreemnt-el></input>
    <label htmlFor='agreement-el'>동의</label>

    JSX로 자식 태그 정의

    
    // 태그가 비어있다면 XML 처럼 />를 이용하여 바로 닫아주어야 한다.
    const element = <img src={user.url} />;
    
    // 자식 태그를 포함 할 수 있다.
    const element = (
      <div>
      <h1>Hello!</h1>
      <h2>Good to see you here.</h2>
      </div>
    );
profile
프론트엔드 개발자를 꿈꾸는 이

0개의 댓글