끄적끄적 코딩
article thumbnail
Published 2023. 4. 18. 02:06
[React] JSX React

코드 이해하기

import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div className="greet">Hello, I'm Jetty!</div>
      </header>
    </div>
  );
}

export default App;


import구문

- 특정 파일을 불러오는 것을 의미
- 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일들을 불러와 사용할 수 있음
- import는 Node.js에서 지원하는 기능. Node.js에서는 require라는 구문으로 패키지를 불러옴
  * Node.js - 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경
- 이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용

대표적인 번들러로 웹팩, Parcel, browserify라는 도구가 있으며, 각 도구마다 특성이 다릅니다.
* 리액트는 주로 웹팩을 사용하는 추세

번들러 도구
import(또는 require)로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성
최적화 과정에서 여러 개의 파일로 분리 될 수도 있음

웹팩
웹팩을 사용하면 SVG 파일과 CSS 파일도 불러와서 사용 가능
파일들을 불러오는 것은 웹팩의 로더(loader)라는 기능이 담당

css-loader - css 파일을 불러올 수 있게 해 줌
file-loader - 웹 폰트나 미디어 파일 등을 불러 올 수 있게 해줌
babel-loader - 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5 문법으로 변환해 줌


최신 자바스크립트로 작성된 코드를 변환 하는 이유
최신 자바스크립트 문법을 ES5 형태로 변환하는 것은 구버전 웹 브라우저와 호환하기 위해서 입니다.
현재 대부분의 웹 브라우저에서는 자체적으로 최신 자바스크립트 문법을 바로 실행 가능 하지만,
구버전 웹 브라우저에서는 실행되지 않기 때문에 사전에 꼭 변환해 주어야 함
리액트 컴포넌트에서 사용하는 JSX 문법도 정식 자바스크립트 문법이 아니므로 ES5형태의 코드로 변환해야 함

 

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div className="greet">Hello, I'm Jetty!</div>
      </header>
    </div>
  );
}

위 코드는 App이라는 컴포넌트를 만들어 줍니다.
function 키워드를 사용하여 컴포넌트를 만들었으며 이러한 컴포넌트를 함수 컴포넌트라고 부릅니다.
프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타냅니다.
HTML로 작성한 것 같이 보이는 위의 코드를 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의 장점

1. 보기 쉽고 익숙하다.
- 자바스크립트와 JSX로 작성한 코드를 비교해보면 JSX를 사용하는 편이 가독성도 높고 작성하기가 쉽습니다.

2. 더욱 높은 활용도
- div, span과 같은 HTML 태그를 사용할 수 있고, 컴포넌트도 JSX 안에서 작성할 수 있습니다.

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

*ReactDOM.render 란?
- 컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있습니다.
- 이 함수의 첫번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로 작성하고, 두번째 파라미터에는 해당 JSX를 렌더링할 document 내부 요소를 설정합니다.

*React.StrictMode 란?
- 리액트 프로젝트에서 리액트의 레거시 기능들을 사용하지 못하게 하는 기능입니다.
- 문자열 ref, componentWillMount 등 나중에는 완전히 사라지게 될 옛날 기능을 사용했을 때 경고를 출력합니다.


JSX 문법 - 규칙

1. 감싸인 요소

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

function App() {
	return (
		<div>
			<h1>안녕 리액트</h1>
			<h2>JSX도 안녕</h2>
		</div>
	);
};

export default App;

* 위의 코드에서 div로 묶여있지만 div태그가 없다면 h1과 h2의 부모 요소가 없으므로 오류가 발생합니다.
* Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문.

import { Fragment } from 'react';

function App() {
	return (
		<Fragment>
			<h1>안녕 리액트</h1>
			<h2>JSX도 안녕</h2>
		</Fragment>
	);
};

export default App;

리액트 v16이상부터 Fragment라는 기능이 도입되어 div 태그를 사용하지 않고 대체해서 사용할 수 있습니다.

아래와 같은 형태로도 표현할 수 있습니다.

function App() {
	return (
		<>
			<h1>안녕 리액트</h1>
			<h2>JSX도 안녕</h2>
		</>
	);
};

export default App;


2. JavaScript 표현

JSX 안에서 자바스크립트 표현식을 사용할 수 있습니다.
JSX 내부에서 코드를 { }로 감싸서 사용합니다.

function App() {
  const name = "Jetty";
  return (
    <>
      <div>Hello, I'm {name}!</div>
      <div>React & JSX</div>
    </>
  );
}

export default App;


3. if문 대신 조건부 연산자
JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수 없습니다.
조건문을 사용하기 위해서 { }안에 조건부 연산자(삼항 연산자)를 사용합니다.

true의 경우

function App() {
  const name = "Jetty";
  return (
    <>
      <h1>Hello</h1>
      <div>
        {name === "Jetty" ?
          <div>I'm {name}!</div>
          :
          <div>React & JSX</div>}
      </div>
    </>
  );
}

export default App;

결과 값

 

false의 경우

function App() {
  const name = "Coke";
  return (
    <>
      <h1>Hello</h1>
      <div>
        {name === "Jetty" ?
          <div>I'm {name}!</div>
          :
          <div>React & JSX</div>}
      </div>
    </>
  );
}

export default App;


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

특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때 아무것도 렌더링 하지 않아야 하는 상황에 조건부 연산자를 통해 구현 가능합니다.

function App() {
  const name = "Coke";
  return (
    <>
      <h1>Hello</h1>
      <div>{name === "Jetty" ? <div>I'm {name}!</div> : null}</div>
    </>
  );
}

export default App;

* null을 렌더링하면 아무것도 보여주지 않습니다.

&&연산자를 사용해서 조건부 렌더링

function App() {
  const name = "Jetty";
  return (
    <>
      <h1>Hello</h1>
      <div>{name === "Jetty" && <div>I'm {name}!</div>}</div>
    </>
  );
}

export default App;

* false의 경우 렌더링이 되지 않음
* 예외적으로 falsy한 값이 0인 경우 0이 출력됩니다.

5. undefined를 렌더링하지 않기

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

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

export default App;


위와 같이 undefined일 수 있는 상황을 막기 위해서 OR(||) 연산자를 사용해서 오류를 방지합니다.

function App() {
  const name = undefined;
  return name || "값이 undefined 입니다";
}

export default App;


결과 화면


6. 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 합니다.
스타일 이름 중에서 background-color처럼 - 문자가 포함되는 이름은 -문자를 없애고 카멜 표기법(camelCase)로 작성해야 합니다.
background-color => backgroundColor

function App() {
  const name = "Jetty";
  const style = {
    backgroundColor: "black",
    color: "aqua",
    fontSzie: "48px",
    fontWeight: "bold",
    padding: 16,
  };
  return <div style={style}>{name}</div>;
}

export default App;


결과 화면

7. class 대신 className

class를 지정할 때 class가 아닌 className으로 설정해 주어야 합니다.

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

export default App;

*className이 아닌 class로 값을 설정해도 스타일이 적용되기는 하지만 브라우저 개발자 도구의 Console 탭에 경고가 나타납니다.

8. 꼭 닫아야 하는 태그

HTML 코드를 작성할 때 태그를 닫아주지 않으면 오류가 발생합니다.

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

export default App;

위처럼 input태그를 닫지 않을 경우 오류가 발생합니다.


9. 주석

JSX 안에서 주석을 작성하는 자바스크립트 표현식 안에서 /* */를 사용해 작성합니다.
=> {/* ... */}

function App() {
  return (
    <>
      <div className="react">리액트</div>
      {/* <div>주석 처리된 내용</div> */}
      <div>// 주석처리 되지 않은 내용 </div>
      <div>/* 주석처리 되지 않은 내용 */</div>
    </>
  );
}

export default App;


결과 화면


정리

JSX는 HTML과 비슷하지만 완전히 똑같지 않습니다.
코드로 보면 XML 형식이지만 실제로는 자바스크립트 객체이며, 용도도 다르고 문법도 조금씩 차이가 납니다.

저작자표시

'React' 카테고리의 다른 글

[React] 리액트 라우터  (1) 2023.05.02
[React] ToDo List 만들기  (0) 2023.04.25
[React] props, defaultProps, propTypes  (0) 2021.03.06
[React] React Native  (0) 2021.02.09
[React] 라이프 사이클  (0) 2021.02.03

검색 태그

티스토리툴바