2장. JSX

티스토리 뷰

FrontEnd/React

2장. JSX

맹정 2022. 12. 22. 12:11

안녕하세요. 맹정입니다!

오늘은 JSX에 대해 알아봅시다.

# import 문

import logo from "./logo.svg";
import "./App.css";

import 문은 특정 파일을 불러오는것을 의미합니다. 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import 문을 사용하여 다른 파일들을 불러와 사용할 수 있습니다.

잠깐! 모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능입니다. 자바스크립트를 실행 할수 있게 해주는 환경인 Node.js 에서 지원하는 기능입니다. 참고로 , Node.js 는 import 가 아닌 require 라는 구문으로 패키지를 불러올 수 있습니다.

이러한 기능들을 브라우저에서 사용하기 위해 번들러(bundler) 를 사용합니다.

대표적인 번들러로는 Webpack, Parcel, Browserify 라는 도구들이 있으며 리액트에서는 Webpack 을 사용하는 추세입니다. 번들러 도구를 사용하면, import(require) 로 모듈을 불러왔을 경우 불러 온 모듈을 모두 합쳐 하나의 파일을 생성해줍니다. 또, 최적화 과정에서 여러 개의 파일로 분리 될 수도 있습니다.

번들 : 파일을 묶듯이 연결하는 것

2017년 이후부터는 브라우저에서도 import 문을 사용 할 수 있게 되었지만, 이는 단순히 다른 경로에 있는 자바스크립트를 불러오는 용도로 프로젝트 번들링과는 다릅니다.

Webpack 을 사용하면, SVG 파일과 CSS 파일도 불러와 사용할 수 있습니다. 이렇게 파일을 불러오는 것을 로더(loader) 라는 기능이 담당하게 됩니다.

로더(loader)
- css-loader : CSS 파일을 불러오는 것
- babel-loader : 자바스크립트 파일들을 불러오면서, 최신 자바스크립트 문법으로 작성된 코드를 바벨이 ES5로 변환

# JSX 란?

이제 본격적으로 JSX 에 대해 알아봅시다.

JSX는 자바스크립트의 확장 문법으로, XML 과 매우 유사하게 생겼습니다. 아래와 같은 형식으로 작성한 코드는 브라우저에서 실행 하기 전에 코드가 번들링 되는 과정에서 바벨을 사용하면 일반 자바스크립트 형태의 코드로 변환됩니다.

function App(){
	return (
    <div>
    	Hello <b>react</b>
    </div>
	);
}

이러한 코드가 다음과 같이 변환됩니다.

function App(){
	return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));
}

컴포넌트를 렌더링할때마다 JSX 코드를 작성하는 것이 아닌 매번 React.createElement 함수를 사용한다면 매우 불편하겠죠? JSX 를 사용하면 편하게 UI를 렌더링 할 수 있습니다.

# JSX 의 장점

1. 보기 쉽고 익숙하다.

일반 자바스크립트만 사용한 코드와 JSX 로 작성한 코드를 비교해보세요. JSX는 HTML 코드와 비슷하고, 확실히 가독성이 높다고 생각합니다. 이것이 JSX를 사용하는 이유입니다.

2. 더욱 높은 활용도

JSX에서는 우리가 알고 있는 div 나 span 같은 HTML 태그를 사용할 수 있을 뿐만 아니라, 앞으로 만들 컴포넌트도 JSX 안에서 작성 할 수 있습니다.

React.StrictMode : 리액트 프로젝트에서 앞으로 사라질 레거시 기능을 사용할때 경고를 주고, 앞으로 미래의 리액트 버전에 도입될 기능들이 정상적으로 호환될 수 있도록 개발환경에서만 활성화 되는 디버깅용 컴포넌트

reportWebVitals : 웹 성능을 측정하는 도구

# JSX 문법

1. 감싸인 요소

컴포넌트에 여러 요소가 있다면 부모 요소 하나로 감싸야 합니다.

function App(){
	return (
    <h1>리액트 안녕!</h1>
    <h2>잘 작동하니?</h2>
    )
 }
 export default App;

요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생하였습니다. 이 오류는 다음과 같이 코드를 작성하여 해결 할 수 있습니다.

function App(){
	return (
    <div>
        <h1>리액트 안녕!</h1>
        <h2>잘 작동하니?</h2>
    </div>
    )
 }
 export default App;

왜 리액트 컴포넌트에서 요소 여러개를 하나의 요소로 감싸줘야 할까요?

그 이유는 Virtual DOM 에서 컴포넌트 변화를 감지 해 낼때 효율적으로 비교 할 수 있도록 컴포넌트 내부의 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.

div 를 사용하고 싶지 않을때를 대비해, 리액트 v16 이상 부터는 Fragment 라는 기능이 도입되어 사용하면 됩니다.

import { Fragment } from 'react';

function App(){
	return (
    <Fragment>
        <h1>리액트 안녕!</h1>
        <h2>잘 작동하니?</h2>
    </Fragment>
    )
 }
 export default App;

코드 상단 import 구문에서 Fragment 라는 컴포넌트를 추가로 불러 올 수 있습니다.

<Fragment></Fragment> 는 <></> 로 대체 되어 사용될 수 있습니다.

2. 자바스크립트 표현

JSX안에서는 자바스크립트 표현식을 쓸 수 있습니다. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { } 로 감싸주면 됩니다. 자바스크립트 값을 JSX 안에서 한번 렌더링해 봅시다.

function App() {
	const name = '리액트';
    return (
    <>
    	<h1>{name} 안녕!</h1>
        <h2>잘 작동하니?</h2>
    </>
   );
}
export default App;

3. if 문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서는 if 문을 사용 할 수 없습니다.

하지만, 조건에 따라 다른 내용을 렌더링 할때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나,

{ } 안에 조건부 연산자를 사용하면 됩니다.

조건부 연산자의 또 다른 이름은 삼항 연산자입니다.

function App() {
	const name = '리액트';
    return (
    <div>
     { name === '리액트' ? (
     	<h1> 리액트입니다. </h1>
      ) : (
      	<h2> 리액트가 아닙니다. </h2>
      )}
    </div>
    );
   }
export default App;

이렇게 작성하면 삼항 연산자로 name = '리액트' 이면 true 이므로 리액트입니다. 가 뜨고, false 이면 리액트가 아닙니다. 가 뜰 것입니다.

4. AND 연산자를 사용한 조건부 렌더링

개발하다 보면 특정 조건을 만족할때 내용을 보여주고, 만족하지 않을 시 아무것도 렌더링 하지 않아야 하는 상황이 올수도 있습니다. 이런 경우에는 조건부 연산자를 사용합니다.

function App() {
	const name = '뤼액트';
    return <div>{name === '리액트' ? <h1> 리액트입니다. </h1> : null}</div>;
   }
export default App;

위와 같은 코드로 작성 시 null 을 렌더링하면 아무것도 보여주지 않습니다. 하지만, AND 연산자를 사용하면 더 짧은 코드를 사용할 수 있습니다.

function App() {
	const name = '뤼액트';
    return <div>{name === '리액트' && <h1> 리액트입니다. </h1>}</div>;
   }
export default App;

위와 같이 코드를 작성 시 브라우저 상에서 아무것도 나타나지 않을 것입니다. 다시 name === '리액트' 를 설정하면

'리액트 입니다' 라는 문구가 나타날 것입니다. && 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 fasle 를 렌더링 할 때는 null 과 마찬가지로 아무것도 나타나지 않습니다. 하지만, 0은 예외적으로 화면에 나타나니 조심합시다!

5. undefined 를 렌더링 하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링 하는 상황을 만들면 안됩니다.

예를 들어 다음과 같은 코드는 오류를 발생시킵니다.

import './App.css';

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

export default App;

어떤 값이 undefined 일 수 도 있다면, OR (||) 연산자를 사용하면 해당 값이 undefined 일때 사용 할 값을 지정 할 수 있으므로 간단하게 오류를 방지 할 수 있습니다.

import './App.css';

function App() {
	const name = undefined;
    return <div>{name || '리액트'}</div>; // return name || '값이 undefined 입니다.';
}

export default App;

6. 인라인 스타일링

리액트에서는 DOM 요소에 스타일을 적용 할때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 합니다.

스타일 이름 중에서 background-color 처럼 - 문자가 이름에 포함되어있으면 - 문자를 없애고 카멜 표기법으로 작성해야합니다. backgroundColor 처럼 작성합니다.

function App() {
	const name = '리액트';
    const style = {
    backgroundColor : 'black',
    color : 'aqua';
    fontSize : '48px';
    fontWeight : 'bold';
    padding : 16
	};
return <div style = {style}>{name} </div> // {name}
}

export default App;

지금은 style 객체를 미리 선언하고 div 의 style 값으로 지정해 주었는데요.

미리 선언하지 않고 바로 style 값을 지정하고 싶다면 다음과 같이 작성하면 됩니다.

7. class 대신 className

일반 HTML 에서 CSS 클래스를 사용할 때는 <div class = "myclass"></div> 와 같이 class 라는 속성을 설정합니다.

하지만 JSX 에서는 class 가 아닌, className 으로 설정해 주어야 합니다.

import './App.css';

function App() { 
	const name = '리액트';
    return <div className = "react">{name}</div>;
}

export default App;

JSX 를 작성할 때, CSS 클래스를 설정하는 과정에서 className 이 아닌 class 값을 설정해도 스타일이 적용되기는 합니다. 하지만 그렇게 사용하면 개발자 도구의 Console 탭에서 경고가 뜨게 됩니다.

8. 꼭 닫아야 하는 태그

HTML 코드를 작성할 때 가끔 태그를 닫지 않은 상태로 코드를 작성하기도 합니다. 예를 들면, input HTML 요소는

<input></input> 이라 입력하지 않고 <input> 이라고만 입력해도 작동합니다.

// 태그를 닫지 않은 HTML 코드
<form>
	성 : <br>
   <input><br>
   이름 : <br>
   <input>
</form>

JSX 에서는 위 코드처럼 태그를 닫지 않으면 오류가 발생합니다.

import './App.css';

function App() {
	const name = '리액트';
    return (
        <>
            <div className = "react">{name}</div>
            <input> <!--> </input> 닫아줘야함 또는 <input/> <-->
        </>
   );
  }
export default App;

<input /> 처럼 스스로 태그를 선언하면서 동시에 닫을 수 있는 태그르 self-closing 태그 라고 부릅니다.

9. 주석

JSX 안에서 주석을 작성하는 방법은 일반 자바스크립트 때와는 조금 다릅니다.

import './App.css';

function App() {
	const name = '리액트';
    return (
        <>
        {/* 주석 */}
            <div className = "react">{name} // 시작태그를 여러 줄 작성시 여기에 주석 작성 가능
            </div>
            // 하지만 이런 주석이나
            /* 이런주석은 페이지에 그대로 나오니 조심! */
            <input/>
        </>
   );
  }
export default App;

{/* -- */} 와 같은 형식으로 작성합니다. 그리고, 시작 태그를 여러줄로 작성할 경우에는 그 내부에서 // 와 같은 형태로 주석을 작성할 수 있습니다. 주석을 아무데나 달면 페이지에 노출될 수있으니 그점은 주의 합시다!

'FrontEnd > React' 카테고리의 다른 글

6장. 컴포넌트 반복 (2)	2023.03.03
5장. ref : DOM 에 이름 달기 (0)	2023.02.18
4장. 이벤트 핸들링 (0)	2023.02.11
3장. 컴포넌트 (0)	2022.12.28
1장. 왜 리액트를 사용하는가? (0)	2022.12.20

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

맹정의 행복코딩랜드

티스토리 뷰

2장. JSX

# import 문

# JSX 란?

# JSX 의 장점

1. 보기 쉽고 익숙하다.

2. 더욱 높은 활용도

# JSX 문법

1. 감싸인 요소

2. 자바스크립트 표현

3. if 문 대신 조건부 연산자

4. AND 연산자를 사용한 조건부 렌더링

5. undefined 를 렌더링 하지 않기

6. 인라인 스타일링

7. class 대신 className

8. 꼭 닫아야 하는 태그

9. 주석

'FrontEnd > React' 카테고리의 다른 글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30