React_2. JSX

JSX 문법

JSX는 리액트에서 UI 구성을 위해 사용되는 확장된 자바스크립트 문법이다. 리액트는 JSX를 사용하지 않아도 작성할 수 있지만 코드가 복잡해지는 단점을 감수해야 한다. 이러한 JSX로 작성된 코드는 Babel이라는 컴파일러를 이용해 자바스크립트 코드로 변환되어 브라우저에서 실행된다. 작성된 코드는 HTML과 비슷한 태그를 이용하여 직관적이고 자바스크립트만으로 웹 어플리케이션을 구현할 수 있다. 이러한 부분이 바로 HTML과 JS를 따로 작성해야 하는 DOM과의 차이점이다.

HTML vs JSX

다음 예제는 JSX가 기존 방식에 비해 얼마나 직관적인지를 보여준다.

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
  // JSX 없이 활용한 React
  return React.createElement("h1", null, `Hello, ${formatName(user)}!`);

  // JSX 를 활용한 React
  return <h1>Hello, {formatName(user)}!</h1>;
}

JSX로 작성한 코드는 JSX 없이 작성한 코드에 비해 확연히 짧고 태그를 통해서 구조를 쉽게 예측할 수 있다. 이러한 점이 바로 리액트의 강점이라고 할 수 있다.

JSX 유의사항

JSX는 HTML과 다른 몇 가지 특징이 있다. 그중 하나는 바로 클래스 속성이다. JSX에선 다음과 같이 className을 통해서 클래스를 지정하여야 한다. 만약 그대로 class를 사용하면 자바스크립트 클래스로 인식하게 된다.
<div className="hi">hello</div>

또한 JSX 내에서 자바스크립트를 사용하려면 중괄호{}를 사용해야 한다. 그렇지 않으면 일반적인 텍스트로 인식하기 때문이다.
<div>hello, {name}</div>

리액트 엘리먼트 작성은 반드시 대문자로 시작하여야 하며 이러한 엘리먼트를 사용자 정의 컴포넌트라고 한다. 만약 소문자로 작성하면 일반적인 HTML엘리먼트로 인식한다.

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

return <Hello />;

리액트의 조건문은 if문이 아닌 삼항연산자를 이용해야 한다.

<div>{name === 'React' ? <h1>true</h1> : <h1>false</h1>}</div>

리액트에서 여러 HTML엘리먼트를 표시할 때는 map()함수를 사용한다. 이때 반드시 "key"속성을 넣어줘야 경고가 표시되지 않는다.

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

여기서 key는 변하지 않고 예상 가능한 유일한 id값을 할당해야 하며 불가능하다면 배열요소의 인덱스 값을 사용할 수 있지만, 이는 최후의 수단으로 사용되어야 한다. Math.random()을 이용한 무작위 생성도 성능 저하를 초래하기 때문에 공식문서에서 권장하지 않는다.

참고
리액트 공식문서