Post

REACT) JSX에 대해 알아보자

Posted Updated
Preview Image
By parksohyunnn 6 min read

리액트 JSX: 정의와 사용 방법

리액트(React)는 현대 웹 개발에서 매우 인기 있는 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다. 리액트의 핵심 개념 중 하나는 JSX(JavaScript XML)입니다. JSX는 JavaScript를 확장한 문법으로, HTML과 유사한 구조를 갖지만 JavaScript의 기능을 그대로 사용할 수 있게 해줍니다. 이번 글에서는 JSX의 정의, 특징, 사용 방법 및 예시를 통해 JSX에 대해 깊이 있게 알아보겠습니다.

JSX란 무엇인가?

JSX는 JavaScript의 확장 문법으로, XML처럼 보이는 구문을 사용해 리액트 컴포넌트를 작성할 수 있게 합니다. JSX는 HTML과 매우 유사하지만, 몇 가지 중요한 차이점이 있습니다. JSX를 사용하면 코드의 가독성이 높아지고, UI를 정의하는 방식이 직관적이어서 개발 생산성이 향상됩니다.

JSX의 특징

  1. HTML과 유사한 문법: JSX는 HTML과 매우 유사한 문법을 사용하기 때문에, 기존 HTML을 작성해 본 경험이 있다면 쉽게 적응할 수 있습니다.
  2. JavaScript 표현식 사용 가능: JSX 내부에서 중괄호 {}를 사용하여 JavaScript 표현식을 삽입할 수 있습니다.
  3. JSX는 함수 호출: JSX 코드가 JavaScript 코드로 변환되면서 함수 호출 형태로 변환됩니다. 이는 브라우저에서 JSX가 직접 실행되지 않기 때문입니다.
  4. JSX의 보안: JSX는 XSS(교차 사이트 스크립팅) 공격을 방지하기 위해 기본적으로 모든 값을 문자열로 변환하여 렌더링합니다.

JSX의 기본 사용법

1. JSX 기본 구문

JSX를 사용하여 간단한 리액트 컴포넌트를 작성해보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is a simple JSX example.</p>
    </div>
  );
}

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

2. JSX에서 JavaScript 표현식 사용

JSX 내부에서 JavaScript 표현식을 사용할 수 있습니다. 이를 통해 동적으로 콘텐츠를 생성하거나 조건부 렌더링을 할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  const name = 'React';
  const element = <h1>Hello, {name}!</h1>;

  return (
    <div>
      {element}
      <p>Current time: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

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

3. JSX에서 조건부 렌더링

JSX에서는 JavaScript의 조건문을 사용하여 조건부로 컴포넌트를 렌더링할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}

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

4. JSX에서 배열과 반복문

JSX는 배열을 렌더링할 수 있으며, 배열의 각 요소를 반복하여 컴포넌트를 생성할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  const numbers = [1, 2, 3, 4, 5];
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );

  return (
    <div>
      <ul>{listItems}</ul>
    </div>
  );
}

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

5. JSX에서 스타일링

JSX에서 스타일을 적용하는 방법은 여러 가지가 있습니다. 인라인 스타일을 사용하거나 CSS 클래스명을 지정할 수 있습니다.

  • 인라인 스타일
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  const divStyle = {
    color: 'blue',
    backgroundColor: 'lightgray',
    padding: '10px'
  };

  return (
    <div style={divStyle}>
      <h1>Styled with Inline Styles</h1>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
  • CSS 클래스 사용
1
2
3
4
5
6
7
8
9
10
11
12
13

import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css'; // CSS 파일 임포트

function App() {
  return (
    <div className="app">
      <h1>Styled with CSS Classes</h1>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
  • styles.css 파일:
1
2
3
4
5

.app {
  color: blue;
  background-color: lightgray;
  padding: 10px;
}

결론

JSX는 리액트에서 UI를 정의하는 매우 강력한 도구입니다. HTML과 유사한 문법을 사용하면서도 JavaScript의 기능을 그대로 사용할 수 있어 코드의 가독성과 유지보수성을 높여줍니다. JSX의 기본 구문과 다양한 사용 예시를 통해 JSX가 얼마나 유용한지 이해하셨기를 바랍니다. 이제 JSX를 활용하여 더욱 직관적이고 효율적인 리액트 컴포넌트를 만들어보세요.

REACT
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github