[리액트] JSX 문법 9가지 완벽 정리

 

⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

포스팅에 해당하는 목차는 다음과 같습니다:

2장 JSX

• 2.1 코드 이해하기
• 2.2 JSX란?
• 2.3 JSX의 장점
• 2.4 JSX 문법

 

---

 

JSX

JSX는 JavaScript XML로 HTML 문법을 사용할 수 있는 자바스크립트 파일을 의미한다. 확장된 자바스크립트 문법이지만 HTML과 비슷하게 생겼기 때문에 사용하기가 쉽다. 일반 자바스크립트가 아니기 때문에 번들링(파일을 하나로 합치는) 과정에서 바벨을 사용하여 일반 자바스크립트로 변환해야한다.

 

JSX 문법을 사용한 코드

function App() {
  return (
    <p>Hello React</p>
  )
}

 

JSX를 Babel을 사용해 일반 자바스크립트로 변환한 코드

function App() {
  return React.createElement(“p”, null, “Hello React”)
}

 

JSX 문법을 사용하면 자바스크립트 사이에 HTML 코드를 넣을 수 있다. 일반적으로 자바스크립트로 엘리먼트를 만들고 화면에 표시하려면 createElement()나 appendChild()와 같은 메소드가 필요한데 JSX를 사용하면 HTML같이 생긴 코드를 자바스크립트안에 쓸 수 있으므로 쉽고 편리하게 코드를 짤 수 있다.

 

리액트가 DOM을 그리는 방법

리액트에서는 JSX 문법을 사용해서 리액트 요소를 만들어주고 DOM에 렌더링 시켜 뷰를 그려준다.

 

JSX 문법

1. 부모태그로 감싸기

컴포넌트 안에 있는 여러 요소를 반드시 부모 태그로 감싸야만 리액트가 정상적으로 작동한다. 즉 return하는 요소는 하나뿐이어야 리액트가 동작한다. 아무것도 리턴해주고 싶지 않다면 return null을 해준다. (무조건 한개의 객체는 리턴해라!)

 

부모태그로 감싸지 않았기 때문에 작동하지 않는 리액트 코드

function App() {
  return (
    <p>Hello</p>
    <p>React</p>
  )
}

컴포넌트 안에 있는 요소를 반드시 부모 태그로 감싸야하는 이유는 React에서 Virtual DOM이 컴포넌트 변화를 감지하기 위해서는 컴포넌트가 반드시 하나의 DOM 트리 구조로 이루어져야 하기 때문이다.

 

부모태그 <div>로 감싼 리액트 컴포넌트

function App() {
  return (
    <div>
      <p>Hello</p>
      <p>React</p>
    </div>
  )
}

 

만약 의미없는 <div>로 감싸고 싶지 않다면 <Fragment>를 사용하면 된다. 이때 import로 react 모듈에 있는 Fragment 컴포넌트를 불러온다.

import { Fragment } from 'react';

function App() {
  return (
    <Fragment>
      <p>Hello</p>
      <p>React</p>
    </Fragment>
  )
}

 

<Fragment>는 생략이 가능하다. <Fragment>를 사용하지 않았으니 import 구문도 필요없다.

function App() {
  return (
    <>
      <p>Hello</p>
      <p>React</p>
    </>
  )
}

 

2. 자바스크립트 표현식

표현식이란 값을 반환하는 식 또는 코드이다. JSX 내부에서 { }를 사용하면 자바스크립트의 표현식을 사용할 수 있다.

 

JSX 내부에서 { }을 사용해 변수를 불러왔다.

function App() {
  const name = 'React';

  return <p>Hello {name}</p>;
}

export default App;

 

3. 조건문을 사용할때는 if문이 아닌 삼항 연산자

JSX 안에서는 if문을 사용할 수 없다. 조건문을 사용할때는 JSX 밖에서 if문을 사용하거나 JSX 내부에서 삼항연산자를 사용해야한다. 여기서 삼항연산자란 A ? B : C의 형태로 A라는 조건이 맞을때는 B를 실행하고 조건이 맞지 않을때는 C를 실행하는 조건부 연산자다.

 

JSX 내부에서 조건문을 사용할때는 삼항연산자를 사용한다.

function App() {
  const name = 'React';
  return (
    <div>
      {name === 'React' ? <p>This is {name}</p> : <p>This is not {name}</p>}
    </div>
  );
}

export default App;

 

🔍 코드 해석 

1. 변수 name에 문자열 'React'를 넣는다
2. 리턴문에 삼항연산자가 있다
3. 이 삼항연산자는 변수 name에 문자열 'React'가 있으면 'This is {name}'을 없으면 'This is not {name}'을 리턴한다
4. name에 문자열 'React'가 있으므로 'This is {name}'을 리턴한다
5. 여기서 name은 변수로 자바스크립트 표현식에서 미리 정의해 놓았던 'React'를 의미한다
6. 그러므로 This is React가 App 컴포넌트에서 최종적으로 리턴이 된다

 

4. 간단하게 조건부를 표현할 수 있는 AND 연산자 (&&)

AND 연산자 예제

result = A && B

1. A, B가 모두 true일때 true를 리턴한다 (하나라도 false값이 있으면 false를 리턴한다)
2. A가 true면 B를 리턴하고 A가 false면 null을 리턴한다 (0, undefined, null을 제외한 모든 값은 true다)

 

AND 연산자를 사용해 조건식 만들기

function App() {
  const name = 'React';
  return (
    <div>
      {name === 'React' && <p>This is {name}</p>}
    </div>
  );
}

export default App;

 

🔍  코드 해석

1. 변수 name에 'React'라는 문자열이 있으면 p태그를 리턴하고 없으면 null을 리턴해라
2. 변수 name에 'React'라는 문자열이 있으므로 p태그 안에 있는 This is {name}을 리턴한다
3. 변수 name에는 'React'라는 문자열이 있으므로 최종적으로 This is React를 리턴한다

 

AND 연산자 조건부를 삼항연산자로 표현하면 밑에 있는 코드와 같다

function App() {
  const name = 'React';
  return (
    <div>
      {name === 'React' ? <p>This is {name}</p> : null}
    </div>
  );
}

export default App;

 

❗️예외

function App() {
  const zero = 0;
  return <div>{zero && <p>This is content</p>}</div>;
}

export default App;

0 && A일 경우 0이 리턴된다.

 

6. undefined 렌더링하지 않기

OR 연산자 예제 

result = A || B

1. A, B 중 하나만 true여도 true를 리턴한다
2. A가 true면 null을 리턴하고 A가 false면 B를 리턴한다 (0, undefined, null을 제외한 모든 값은 true다)

 

undefined를 렌더링하면 에러가 발생한다

function App() {
  const name = undefined;
  return name;
}

export default App;

 

undefined를 리턴할일이 있을 경우에는 OR 연산자 ( | | )를 사용해 처리해준다

function App() {
  const name = undefined;
  return name || <p>There is nothing to return</p>;
}

export default App;

변수 name에 false 취급을 받는 undefined가 있으므로 p태그가 리턴된다

 

 

JSX 내부에서 undefined 값을 리턴하는 것은 가능하다

function App() {
  const name = undefined;
  return <p>{name}</p>;
}

export default App;

 

6. 인라인스타일은 객체형태로 넣어야한다

CSS코드를 객체형태로 만든 후 해당 요소에 넣어준다.

function App() {
  const name = 'React';
  const container = {
    backgroundColor: '#282c34',
    color: '#fff',
    padding: '60px',
  };
  const heading = {
    margin: '0',
    color: '#61dafb',
    textAlign: 'center',
    fontSize: '45px',
  };
  const tagline = {
    margin: '0',
    paddingTop: '15px',
    textAlign: 'center',
    fontSize: '24px',
  };
  return (
    <div style={container}>
      <p style={heading}>{name}</p>
      <p style={tagline}>A JavaScript library for building user interfaces</p>
    </div>
  );
}

export default App;

객체 형태이기 때문에 key 이름에 -를 사용할 수 없고 카멜 표기법으로 이름을 짓는다. 카멜 표기법(Camel Case)이란 위의 예시처럼 background-color는 backgroundColor와 같이 새로 시작하는 단어를 대문자로 짓는 형태를 의미한다.

 

7. class 대신 className을 쓴다

리액트에서는 클래스이름을 넣을때 className을 사용해 속성을 넣는다.

import './App.css'

function App() {
  return <p className='style'>Hello React</p>;
}

export default App;

 

8. 태그는 반드시 닫혀있어야한다

HTML에서는 꼭 닫지 않아도 작동하는 코드가 있었다

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

위의 예제처럼 input태그는 closing tag인 </input> 없이도 잘 동작한다

 

JSX에서는 모든 태그가 반드시 닫혀있어야한다

function App() {
  return (
    <>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname"></input>
    </>
  );
}

export default App;

 

태그안에 내용이 없으면 self-closing 태그를 사용한다

function App() {
  return <input />
  );
}

export default App;

 

9. 주석처리

일반 자바스크립트에서는 한줄일때는 //를 사용해서 여러줄일때는 /**/를 사용해 주석처리를 했지만 JSX 내부에서는 다른 기호를 사용해 주석처리를 한다.

 

JSX에서는 {/* ... */}를 사용해 주석처리를 한다

function App() {
  return (
    <div>
      {/* this is title */}
      <p>React</p>
      {/* this is subtitle */}
      <p>A JavaScript library for building user interfaces</p>
    </div>
  );
}

export default App;