JSX

💻 1. JSX란?

JSX는 Js 확장 문법이며 XML과 매우 유사하게 생겼다.

//JSX
functio App() {
	return (
   	<div>
       	Hello <b>react</b>
		</div>
	);
}
//JS
function App() {
	return React.createElement("div",null,"Hello ", 
   React.createElement("b",null,"react"));
}

이처럼 React.createElement 함수를 사용하면 귀찮고 불편하기에 JDX를 사용하여 편하게 UI를 렌더링 하고자 한다.

🔥 2. JSX 장점

• JSX를 사용하는것이 JS로 사용한 코드보다 가독성이 높고 작성하기 쉽다.
• JSX에서는 div,span 같은 HTML 태그를 사용할 수 있을 뿐만아니라 앞으로 만들 컴포넌트도 JSX안에서 작성할 수 있다.

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

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

ReactDOM.render은 무엇인가?
코드를 컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있다.

React.StrictMode는 무엇인가?
리액트 프로젝트에서 리액트의 레거시 기능들을 사용하지 못학 하는 기능이다. 이는 사라지게 될 옛날 기능을 사용하였을 때 경고를 출력한다.

⌨ 3. JSX 문법

3.1 감싸인 요소

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

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

위와 같은 코드는 정상적으로 잘 작동하지 않는다.

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

이렇게 하나의 요소로 감싸야하는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

! 그러나! 여기서 꼭 div 요소를 사용하지 않아도 된다.

// v16 이상부터 도입된 Fragment라는 기능을 사용해도 된다.
import {Fragment} from 'react';
// react 모듈에 있는 Fragment컴포넌트도 추가로 불러온다.

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

export default App;

이런식으로도 표현이 가능하다.

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

export default App;

3.2 JS표현

JS표현식을 작성하려면 JSX내부에 코드를 {}로 감싸면 된다.

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

3.3 IF문 대신 조건부 연산자

JSX내부에서는 If 문을 사요알 수 없다. 그러나, 조건에 따라 다른 내용을 렌더링해야 할 때는
1. JSX 밖에서 if 문을 사용하여 사전에 값을 설정
2. {} 안에 조건부 연산자를 사용하면 된다.

조건부 연산자의 다른 이름 = 삼항 연산자

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

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

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

export default App;

null을 렌더링하면 아무것도 보여주지 않는다.
그러나, 이보다 짧은 코드로 작업할 수 있다.

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

export default App;

&& 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 랜더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다.

3.5 undefined를 렌더링하지 않기

import './App.css';

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

export default App;

↑이런 코드는 오류가 난다.
어떤 값이 undefined 일수도 있다면. or(||) 연산자를 사용하면 해당 값이 undefined 일때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.

import './App.css';

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

그러나 JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.

import './App.css';

function App() {
	const name = 'undefined';
    return <div>{name}</div>;
}
export default App;

값이 undefined 일때 보여주고 싶은 문구가 있다면 이렇게 코드를 작성하면 된다.

import './App.css';

function App() {
	const name = undefined;
    return <div>{name || '리액트'} </div>;
}

export default App;

3.6 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때 문자열 형태가 아닌 객체 형태로 넣어주어야한다.
Ex. background-color => backgroundColor

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

이 코드에서는 style 객체를 미리 선언하고 div의 style 값으로 지정해주었다. 미리 선언하지 않고 바로 style 값을 지정하고싶다면 이렇게 해야한다.

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

3.7 class 대신 className

JSX에서는 class 가 아닌 className으로 설정해주어야한다.

//App.css
.react{
	background : aqua;
    color: black;
    font-size : 48px;
    font-weight : bold;
    padding : 16px;
}
//App.js
import './App.css';

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

export default App;

3.8 주석

JSX안에서 주석을 작성하는 방법은 JS에서 주석을 작성할 떄와 다르다.

import './App.css';

function App() {
	const name = '리액트';
    return (
    	<>
        { /*주석은 이렇게 작성하는것임. */}
        <div
        	className = "react"
            //시작 태그를 여러줄로 작성하게 된다면 여기에 주석을 작성할 수 있다.
		>
        {name}
	</div>
    //이런주석이나
    /*이런 주석은 페이지에 그대로 나타난다.*/
	</>
	);
}
export default App;

JSX 내부에서 주석을 작성할 때는 예시처럼 {/../} 와 같이 작성해야한다.
그리고 시작 태그를 여러줄로 작성할 때 내부에서 // 과 같은 형태의 주석도 작성할 수 있다.

🐱‍🏍4. ESLint 와 Prettier 적용하기

• ESLint : 문법 검사 도구
• Prettier : 코드 스타일 자동 정리 도구
  VS Code에서 F1을 누르고 format을 입력한 후 Enter를 누르면 코드가 잘 정리된다. (이때 Beautify 포맷 도구를 설치했다면 충돌이 발생할 수 도 있다.)