2# JSX

GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판

(본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.)

 

 

 

 

'코드 이해하기'

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

• 리액트 프로젝트 생성시 node_modules 디렉터리도 함께 생성
• 디렉터리 안에 react 모듈이 함계 생성
• import 구문을 통해서 리액트를 불러와 사용 가능
• 모듈을 불러와 사용하는 것은 원래 브라우저에 없던 기능, Node.js에서 지원가능한 기능
• 이러한 기능은 브라우저에서도 사용하기 위해 번들러(bundler)를 사용함
• 파일들을 불러오는 기능을 웹팩의 로더가 담당하는 로더(Loader)를 사용함

[ 번들러 ]
파일을 묶듯이 연결하는 것이며, 각 도구(웹팩, Parcel, browserify)마다 특성이 다르다. 리액트 프로젝트에서는 편의성과 확장성이 뛰어난 웹팩을 주로 사용한다. import로 모듈을 불러왔을 때 모든 모듈을 합쳐서 하나의 파일로 생성 - 최적화 과정에서 여러 개의 파일로 분리한다.

[ 로더의 기능 ]
- css-loader : css 파일을 불러옴
- file-loader : 웹 폰트나 미디어 파일 등을 불러올 수 있음
- babel-loader : 최신 자바스크립트 문법으로 작성된 코드를 ES5 문법으로 변환
- create-react-app : 웹팩의 로더는 직접 설정해야 하지만 create-react-app은 번거로운 작업을 모두 대신함

 

 

 

---

 

'JSX?'

JSX 코드

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

자바스크립트로 변환된 코드

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

• 자바스크립트의 확장 문법이며, XML과 매우 비슷하게 생김
• JSX로 작성된 코드는 브라우저에서 실행되기 전에 코드를 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환
• JSX를 통해 편하게 UI를 렌더링 할 수 있음

 

 

---

 

'JSX 장점'

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

[ ReactDOM.render ]
- 컴포넌트를 페이지에 렌더링하는 역할
- react-dom 모듈을 불러와 사용 가능
- 첫 번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로 작성, 두 번째 파라미터에는 해당 JSX를 렌더링할 document 내부 요소를 설정

[ React.StrictMode ]
- 리액트 프로젝트에서 리액트의 레거시 기능들을 사용하지 못하게 하는 기능
- 나중에 완전히 사라지게 될 옛날 기능을 사용했을 때 경고를 출력

 

 

 

---

 

 

'JSX 문법'

감싸인 요소
컴포넌트에 여러 요소는 반드시 하나의 부모 요소로 감싸야 하며, Virtual DOM에서 컴포넌트 변화를 감지하기위해 하나의 DOM 트리구조로 이뤄져야 하는 규칙

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

export default App;

 

자바스크립트 표현
JSX 안에서 자바스크립트 표현식 작성하려면 { }로 감싸면 된다.

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

export default App;

 

(If 문 대신) 조건부 연산자
JSX 내부의 자바스크립트 표현식에서는 if문 사용 불가

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

 

AND 연산자(&&)를 사용한 조건부 렌더링
리액트에서 false를 렌더링 할 때는 null과 같다.

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

예외적인 경우(falsy한 값인 0)

const number = 0;
return number && <div>내용</div>

 

underfined를 렌더링하지 않기
함수에서 underfined만 반환하고 렌더링하는 상황을 만들면 안된다. 하지만 JSX 내부에서는 사용 가능하다. OR(||) 연산자로 해당 값이 undefined일 때 사용할 값을 지정해 오류 방지가 가능하다.

import './App.css';

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

export default App;

 

인라인 스타일링
DOM 요소에 스타일을 적용할 때는 문자열 형태가 아닌 카멜(camelCase) 표기법을 사용하여 객체 형태로 적용한다.

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;

 

class 대신 class Name

<div className="react"> </div>

 

꼭 닫아야 하는 태그
css 클래스 사용할 시 javascript 문법과 혼동될 수 있기 때문에 태그를 선언하면서 동시에 닫을 수 있는 태그를 사용한다. 태그 사이에 별도의 내용이 들어가지 않아야 한다.
<input />

 

주석
{/* -- */} 와 같은 형식으로 작성한다. 시작 태그를 여러줄로 작성할 경우 내부에서 // 와 같은 형태로 주석을 작성이 가능하다.