[React 기초] 그래서 JSX가 뭔데? (정의와 기초 문법)

이 포스트는 노마드 코더의 ReactJS로 영화 웹 서비스 만들기 를 수강하고 추가적으로 각 개념에 대해 학습하여 정리한 내용입니다.

JSX란?

• javascript 에 XML을 추가한 추가 확장 문법이다.
  • React에 엘리먼트를 추가할 수 있게 해주며, 그 형태가 html 과 유사하여 FE개발자들의 편의를 도모한다.
• JSX 는 자바스크립트의 공식 문법이 아니다.
  • 브라우저가 실행될 때 때 babel 을 통해 일반 자바스크립트 문법(React.createElement)형식으로 변환되어 실행된다. (즉, 바벨 설치가 선행되어야 한다.)
• React 개발에 있어 JSX 의 사용은 필수가 아니다. 다만 자바스크립트 코드 내에서 UI를 개발하는 데 직관성을 높여주는 효과가 있어 많이 사용된다.

지난 시간에 사용했던 React.createElement 를 JSX에선 다음과 같이 아주 간단하게 표현할 수 있다.

React.createElement를 사용한 결과

const Title = React.createElement("h3", {
  id:"first",
  onMouseEnter: ()=>{
  console.log("hello!")
}, style:{color:"red"}}, "Hello World");
const Button = React.createElement("button", {
  onClick: ()=>{
    console.log("clicked")
  },
  style:{
    backgroundColor:"red"
  }
}, "Click me");

JSX를 사용한 결과

const Title = (<h3 id="title" onMouseEnter={() => console.log("hello")}>Hello World</h3>);
const Button = (<button style={{backgroundColor:"red"}} onClick={()=>{console.log("clicked")}}>Click me</button>)

이렇게 보기에도 익숙한 html을 사용한 모양이며, 보기에도 훨씬 직관적으로 어떤 기능이 있는지 알 수 있다.

div 변환하기

다음과 같이 앞서 변환한 Title, Button을 포함한 div를 좀 더 명확하게 바꾸기 위해서는 먼저 우리가 만든 두 앨리먼트를 함수 형으로 바꿔줄 필요가 있다.

const div = React.createElement("div", null, [span, button])

• 변환

const Title = () => (<h3 id="title" onMouseEnter={() => console.log("hello")}>Hello World</h3>);
const Button = () => (<button style={{backgroundColor:"red"}} onClick={()=>{console.log("clicked")}}>Click me</button>)

• 컨테이너 안에 import 하기

const Container = <div>
    <Title />
    <Button />
</div>;

여기서 주의할 점은, 컴포넌트의 첫글자는 반드시 대문자여야 한다는 것이다. 소문자로 쓸 경우 이것이 JSX 문법이 아닌 html로 인식해 버린다.

JSX에 표현식 포함하기

다음과 같은 {} 방식으로 JSX 에 표현식을 포함할 수 있습니다.

const name = 'Bruce';
const element = <h1>my name is {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX에 함수 넣기

JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있으며, 앨리먼트 내에서도 표현할 수 있다.

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

const user = {
  firstName: 'Bruce',
  lastName: 'Wayne'
};

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

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX도 표현식이다

jsx도 어쨌든 자바스크립트 문법(비공식)이므로 함수에 포함할 수도 있다. 컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식되기 때문이다.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}