2장 JSX

2.1 코드 이해하기

create-react-app은 번들러(웹팩, Parcel browserify) 중 웹팩을 사용하는 프로젝트를 생성함.

이로 인해,

- import 구문을 사용해서 모듈 통합이 가능함.

- 최적화 과정에서 파일 분리가 가능함.

- 로더를 통해서 svg, css, 웹폰트, 미디어 파일 등을 불러와서 사용할 수 있음.

- 최신 자바스크립트 파일을 ES5문법으로 변환해줌.

 

2.2 JSX란?

자바스크립트의 확장 문법이며 XML과 유사. 번들링 과정에서 일반 자바스크립트 형태의 코드로 변환됨.

1.번들링 전
function App() {
	return (
    	<div>
        	Hello <b>react</b>
        </div>
    );  
}

2.번들링 후
function App() {
	return React.createElement("div", null, "Hello", React.createElement("b", null, "react")));
}

 

2.3 JSX의 장점

- 보기 쉽고 익숙하다. (html과 유사)

- 활용도가 높다. (html 태그뿐만 아니라, 새로 만드는 컴포넌트도 JSX안에서 작성 가능)

 

2.4 JSX 문법

2.4.1 감싸인 요소

- 부모 요소 하나로 감싸야함. (Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 하는 컴포넌트 내부는 하나의 DOM트리 구조로 이 류어 져야 한다는 규칙 존재)

1.잘못된 예
import React from 'react';

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

export default App;

2.올바른 예
import React from 'react';

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

export default App;

3.v16이상 Fragment 사용 가능
import React, {Fragment} from 'react';

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

export default App;

4.Fragment를 아래와 같은 형태로도 사용 가능
import React, {Fragment} from 'react';

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

export default App;

 

2.4.2 자바스크립트 표현

JSX 내부에서 자바스크립트 표현식을 사용하려면 {}를 사용

import React from 'react';

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

export default App;

 

2.4.3 If문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if문 사용 불가. 때문에 JSX밖에서 if문을 사용하여 사전에 값을 설정하거나, { }안에 조건부 연산자(삼항 연산자)를 사용

import React, {Fragment} from 'react';

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

export default App;

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

특정 조건을 만족할 때만 내용을 보여줄 때 사용.

1.null을 렌더링
import React from 'react';

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

export default App;

2.false를 렌더링 하는 경우 null과 마찬가지로 취급(0은 예외적으로 화면에 나타남)
import React from 'react';

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

export default App;

2.4.5 undefined를 렌더링하지 않기

1.함수에서 undefine만 반환하여 랜더링할 수 없음
import React from 'react';

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

export default App;

2.OR연산자를 통한 해결
import React from 'react';

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

export default App;

3.JSX내부에서 undefined 랜더링 가능
import React from 'react';

function App() {
    const name = undefiend;
    return <div>{name}</div>;
}

export default App;

2.4.6 인라인 스타일링

- DOM요소에 스타일을 적용할 때 객체 형태로 넣어 주어야 함. (문자열 x)

- 카멜표기법으로 작성해야 함 (background-color ==> backgroundColor)

1.객체를 선언하여 전달
import React from 'react';

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

export default App;

2.inline 형태로 전달 시
import React from 'react';

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

export default App;

2.4.7 class대신 className

JSX에서는 class가 아닌 className으로 class 지정.

(v16이상부터는 class로 지정하면 className으로 변환시켜 주고 콘솔에 경고 띄움._

import React from 'react';

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

export default App;

2.4.8 꼭 닫아야 하는 태그

태그는 꼭 닫아야 함

ex> <input> (x), <input></input>, <input/> (o)

2.4.9 주석

JSX 내부에서 주석을 작성할 때는 {/* !@#!@#!#  */}와 같은 형식으로 작성

import React, {Fragment} from 'react';

function App() {
    const name = '리액트';
    return (
        <>
            {/*주석은 이렇게 작성합니다*/}
            <div 
                className="react" //시작 태그를 여러 줄로 작성하게 된다면 여기에 가능.
            >
                {name}
            </div>
            // 하지만 이런 주석이나
            /*이런 주석은 페이지에 그대로 나타나게 됨*/
        </>
    )
}

export default App;

2.5 ESLint와 Prettier 적용하기

- ESLint : 문법 검사도구, 잘못된 문법 시 경고 메시지 화면에 보임. (VS Code : 보기 > 문제 (상단 메뉴))

- Prettier : 코드 스타일 자동 정리 도구 (VS Code : f1 -> format document), 루트 디렉터리에 .prettierrc를 작성해서 커스터마이징

- 저장할 때 코드 자동 정리 :  Code(파일) > 기본 설정 > 설정 (상단메뉴) 에서 텍스트 박스에 format on save 검색하여 체크. 

 

2.6 정리

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