JSX

1. JSX란?

  • React에서 UI를 구성할 때 사용하는 JavaScript를 확장한 문법이며, 이를 활용해 React element를 만들 수 있음

  • 'Babel'로 JSX를 브라우저가 이해할 수 있는 JavaScript로 compile -> JavaScript를 브라우저가 읽고 화면에 렌더링 가능

  • React에서는 DOM과는 다르게 CSS, JSX 문법만으로 웹 애플리케이션 개발 가능. 즉, JavaScript만으로 마크업 형태의 코드를 작성하여 DOM에 배치 가능 (단, JSX는 HTML이 아니기에 Babel로 compile 필요)

2. JSX 문법

  • 하나의 엘리먼트 안에 모든 엘리먼트가 포함. 최상위에서 opening tag와 closing tag로 감싸주어야 함

    <div>
  <div>
    <h1>Hello</h1>
  </div>
  <div>
    <h2>World</h2>
  </div>
</div>

  • 엘리먼트 클래스 사용 시, className으로 표기

    <div className = "greeting">Hello</div>

  • JavaScript 표현식 사용 시, 중괄호 이용

    function App () {
  const name = 'Ella Choi';
  return (
    <div>
    Hello, {name}!
    </div>
  );
}

  • 사용자 정의 컴포넌트는 대문자로 시작

    function Hello() {
  return <div>Hello!</div>
}

function HelloWorld() {
  return <Hello />;
}

  • 조건부 렌더링에는 if문이 아닌, 삼항연산자 사용

    <div>
  {
    (1+1 === 2) ? (<p>정답</p>) : <p>탈락</p>)
  }
</div>

  • 여러 개의 HTML 엘리먼트를 표시할 때, map()함수 사용하며, 반드시 'key'JSX 속성을 넣어야 함.

    const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm'}
];

function Blog() {
  const content = posts.map((post) =>
    <div key = {post.id}>
    <h3>{post.title}</h3>
    <p>{post.content}</p>
    </div>
  );
  return (
    <div>
    {content}
    </div>
  );
}

  • 배열의 각 요소는 각각 변수에 담길 수 있는 하나의 JSX 표현식임.

    const Hello - () => {
  return (
    [<div>안녕하세요</div>, <div>반갑습니다</div>]
  )
}
PreviousHookNextRedux

Last updated