[React] JSX

1. JSX의 정의

const element = <h1>Hello, world!</h1>;
// String 도 아니고 HTML 도 아닌 애매하게 생겼다

 JSX는 Javascript XML의 약어이다. 공식적인 javascript문법이 아닌 확장 문법이지만 javascript의 모든 기능이 함께 제공된다. JSX의 사용이 필수적이진 않지만 React 공식문서에서는 사용을 권장하고 있다. 그 이유로는 개발자가 javascript 코드 안에서 UI 관련 작업을 할 때 시각적으로 편하게 해 주며 오류 발생 시 React가 도움이 되는 에러나 오류 메시지를 표시해줄 수 있기 때문이다.

 

function App() {
  return (
    <div>
      Hello <b>react</b>
    </div>
  );
}
//////////////////(Babel Compiler)///////////////////////////
function App() {
  return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

// 위 두 코드는 react 상에서 동일하게 작동한다.
// 상단의 코드가 컴파일러를 거치면 하단의 코드로 브라우저에서 작동한다.

 JSX로 작성된 코드는 브라우저에서 실행되기 전 바벨(Babel)이라는 컴파일러를 거치게 된다. 바벨은 타입스크립트나 JSX 같은 새로운 문법이나 언어들을 모든 브라우저에서 작동하도록 호환성을 위해 사용되는 컴파일러이다.

 

 개발자 입장에서 하단의 코드처럼 일일이 createElement() 를 불러내며 코드를 작성하는 것은 시각적으로 불편하고 효율적이지 못하다. 따라서 상단의 코드처럼 JSX사용을 권장한다.

 

2. JSX의 특징

• ' {} ' 에 표현식을 넣어 사용한다. 중괄호에는 유효한 모든 javascript 표현식과 react 변수가 들어갈 수 있다.
• 큰 단위의 HTML 블록이 들어온다면 ' () ' 안에 작성해야한다.
• react 요소를 생성한다.
• XML 규칙을 따른다.
• 컴파일 후, JSX 식은 일반적인 javascript 함수 호출이 된다.
• HTML 속성의 이름은 camelCase로 지어야 한다. 예를 들어 font-size는 fontSize로 사용해야 한다. 특히 class는 className으로 사용함에 유의하자.
• input을 사용하거나 img 태그 등 HTML에서 닫지 않아도 동작하는 태그들도 JSX로 작성 시 반드시 닫아줘야 한다.
• 사용자 정의 컴포넌트는 반드시 대문자로 시작해야 한다. 소문자의 경우 <div>, <span> 등 내장 컴포넌트를 뜻하기 때문에 문자열 형태로 React.createElement에 전달되어 오류가 발생할 수 있다.

// 추가적인 설명이 필요한 특징은 컴포넌트가 여러개 있다면 반드시 부모요소로 감싸야 한다는 점이다.
function Welcome(props) { //대문자로 시작
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div> // div, header, content 등 부모요소로 감싸줘야 한다.
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

3. 예시

function Name(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {Name(user)}!
  </h1>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

codepen 으로 실행한 결과

추가적으로 JSX의 장점을 더 알고 싶다면 https://www.geeksforgeeks.org/jsx-full-form/

react 공식문서 https://reactjs.org/docs/getting-started.html 한글 번역이 잘돼 있지만 이해를 돕기 위해 원문도 같이 보는 것을 추천한다.