[리액트를 다루는 기술] 2장 JSX

 

코드 이해하기

리액트 프로젝트 생성시 node_modules 디렉터리도 함께 생성되는데

이 디렉터리 안에 react 모듈이 함께 생성됩니다.

import React from 'react'   구문을 통해서 리액트를 불러와 사용가능하다.

 

[알아둘것 !]

이렇게 모듈을 불러와 사용하는 것은 원래 브라우저에 없던 기능, Node.js 에서 지원하는 기능입니다.

( Node.js에서는 import X > require Yes! )

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

 

[번들러?]

파일을 묶듯이 연결하는 것,

대표적인 번들러 : 웹팩, Parcel, browserify  각 도구마다 특성이 다르다.

리액트 프로젝트에서는 편의성과 확장성이 더 뛰어난 "웹팩" 을 주로 사용합니다.

"기능- import로 모듈을 불러왔을 때 모든 모듈을 합쳐서 하나의 파일로 생성- 최적화 과정에서 여러 개의 파일로 분리"

 

로더(loader)

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

<로더(loader) 기능의 예>

: 파일들을 불러오는 기능을 웹팩의 로더가 담당합니다.

 

<로더의 기능>

• css-loader : css 파일을 불러옵니다.
• file-loader : 웹 폰트나 미디어 파일 등을 불러올 수 있게 해줍니다.
• babel-loader : 최신 자바스크립트 문법으로 작성된 코드를 ES5 문법으로 변환해줍니다.

[create-react-app]

웹팩의 로더는 원래 직접 설치하고 설정해야 하지만  create-react-app 이 번거로운 작업을 모두 대신해줍니다.

 

JSX ?

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


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

jsx는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 보입니다. 

이런 형식으로 작성한 코드는 브라우저에서 실행되기 전, 코드가 번들링되는 과정에서

바벨을 이용해 일반 자바스크립트 형태의 코드로 변환됩니다.

 

JSX를 통해서 편하게 UI를 렌더링할 수 있습니다.

 

 

JSX  장점

• 보기 쉽고 익숙하다 : 가독성 높고 작성하기 쉽다.
• 더욱 높은 활용도 :  만들어놓은 컴포넌트를 HTML 태그 쓰듯이 작성가능

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

[Q : ReactDOM.render]

컴포넌트를 페이지에 렌더링하는 역할. react-dom 모듈을 불러와 사용할 수 있습니다.

첫번째파라미터 - 페이지 렌더링내용 JSX로 작성 / 두번째파라미터 - JSX를 렌더링할 document 내부 요소 

 

JSX  문법

 

제목	내용	예제
감싸인 요소	컴포넌트에 여러 요소는 반드시 하나의 부모 요소로 감싸야 함. ( Virtual DOM에서 컴포넌트 변화를 감지하기위해 하나의 DOM 트리구조로 이뤄져야 한다는 규칙..!)	<div>     <h1>리액트</h1>      <h3>정상작동</h3> </div>	v16 이상부터 Fragmnet 기능 사용가능 import React,{Fragment} from 'react' <Fragment> --> <>     <h1>리액트</h1>      <h3>정상작동</h3> </Fragment>
자바스크립트 표현식		<h1>{name}</h1>
if문	조건부 연산자	{name=='감자' ? (<h1>맞구나</h1>) : (<h3>아니구나</h3>)}
AND (&&) 연산자		return <div>    {name==='감자' && <h1>맞구나</h1>} </div>
undefined 렌더링	1.OR ( || ) 연산자로 해결  2.jsx 내부에서 사용은 가능!	1. const name = undefined; return name || '값이 undefined';	2. const name = undefined; return <div>{name}</div>
인라인 스타일링	카멜(camelCase)표기법사용하여 객체 형태로 적용	const style = {      backgroundColor : 'blue' fontSize : '15px'} return <div style={style}>{name}</div>	return <div style={{ backgroundColor : 'blue' fontSize : '15px'}} > {name}</div>
class X > className	css 클래스 사용시에 Javascript 문법과 혼동될 수 있기때문	return <div className="potato">{name}</div>