(반응) JSX

by

코드를 이해

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;


수입 명세서

– 특정 파일을 로드하는 수단
– React로 만든 프로젝트의 JavaScript 파일에서 가져오기를 사용하여 다른 파일을 가져올 수 있습니다.
– 가져오기는 Node.js에서 지원하는 기능입니다. Node.js에서 패키지는 require 문으로 로드됩니다.
* Node.js – 비브라우저 환경에서 자바스크립트를 실행할 수 있는 환경
– 브라우저에서 이러한 기능을 사용하려면 번들러를 사용하십시오.


전형적인 번들러~처럼 웹팩, 소포, 브라우저화라는 도구가 있고 각 도구마다 특성이 다릅니다.
* React는 주로 webpack을 사용하고 있습니다.

번들러 도구
모듈이 import(또는 require)로 로드되면 가져온 모든 모듈을 결합하여 하나의 파일이 생성됩니다.
최적화 중에 여러 파일로 분할될 수 있음

웹팩
webpack을 사용하면 SVG 및 CSS 파일도 로드하고 사용할 수 있습니다.
웹팩에서 로더라는 함수는 파일을 로드하는 역할을 합니다.

CSS 로더 – css 파일 로딩 허용
파일 로더 – 웹폰트나 미디어 파일 로딩 가능
바벨 로더 – JavaScript 파일을 로드하는 동안 최신 JavaScript 구문으로 작성된 코드 바벨라는 도구를 사용하여 ES5 구문~에 의해 변환주다

최신 JavaScript로 작성된 코드를 변환하는 이유는 무엇입니까?
최신 JavaScript 구문을 ES5 형식으로 변환하면 이전 웹 브라우저와 호환됩니다.
현재 대부분의 웹 브라우저는 자체적으로 최신 JavaScript 구문을 직접 실행할 수 있지만
구형 웹브라우저에서는 실행되지 않으니 미리 변환을 하셔야 합니다.
반응 구성 요소에 사용 JSX 구문도 공식적인 JavaScript 구문이 아니므로 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란 무엇입니까?
JavaScript용 확장 구문이며 XML과 매우 유사합니다.
이 형식으로 작성된 코드는 브라우저에서 실행되기 전에 코드 번들링 프로세스 중에 Babel을 사용하여 일반 JavaScript와 같은 코드로 변환됩니다.

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

변환된 코드

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

JSX의 장점

1. 보기 쉽고 친숙하다.
– JavaScript와 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를 렌더링하기 위한 문서 내부의 요소설정.

*React.StrictMode 란?
– React 프로젝트에서 React의 레거시 기능을 사용하지 못하도록 하는 기능입니다.
– string refs, 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;

React v16 이상부터 Fragment라는 기능이 도입되어 div 태그를 사용하는 대신 사용할 수 있습니다.

다음과 같은 형태로도 표현할 수 있습니다.

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

export default App;

2. 자바스크립트 표현

JSX 내에서 JavaScript 표현식을 사용할 수 있습니다.
JSX 내부에서 코드를 { }로 래핑하여 사용합니다.

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

export default App;

3. if 문 대신 조건부 연산자
JSX 내부의 JavaScript 표현식에는 if 문을 사용할 수 없습니다.
조건문을 사용하려면 { } 안에 조건 연산자(삼항 연산자)를 사용합니다.

만약 사실이라면

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;

결과 값


거짓이면

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인 경우 렌더링이 되지 않습니다.
* 예외적으로 거짓된 값이 0이면 0이 출력됩니다.

5. 정의되지 않은 렌더링하지 않기

React 구성 요소에서 함수가 정의되지 않은 값만 반환하고 렌더링하는 상황을 만들어서는 안 됩니다. – 에러 발생됨

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

export default App;

위와 같이 정의되지 않을 수 있는 상황을 방지하기 위해 OR(||) 연산자를 사용하여 오류를 방지합니다.

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

export default App;

결과 화면


6. 인라인 스타일링

React에서 DOM 요소에 스타일을 적용할 때 문자열이 아닌 객체 형태로 넣어야 합니다.
스타일 이름 중 배경색과 같이 – 문자가 포함된 이름은 – 문자를 제거합니다. 캬멜 표기(camelCase)다음과 같이 작성해야 합니다.
배경색 => 배경색

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. 클래스 대신 클래스 이름

클래스가 아닌 클래스를 지정할 때 클래스 이름로 설정해야 합니다

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

export default App;

값을 *className이 아닌 class로 설정해도 여전히 스타일이 적용되지만 브라우저 개발자 도구의 콘솔 탭에 경고가 표시됩니다.

8. 닫아야 하는 태그

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

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

export default App;

위와 같이 입력 태그가 닫히지 않으면 오류가 발생합니다.


9. 주석

JavaScript 표현식 내부에서 /* */를 사용하여 JSX에서 주석을 작성합니다.
=> {/* … */}

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

export default App;

결과 화면


정리하다

JSX는 HTML과 유사하지만 완전히 동일하지는 않습니다.
코드를 보면 XML 형식이지만 실제로는 자바스크립트 객체사용법이 다르고 문법도 약간 다릅니다.