%F0%9F%8E%86%20(1).png)
2장 JSX
번들러
// in index.js
import React from 'react';
/*
* 이렇게 모듈을 불러와서 실행하는건 Node.js에서 지원! (js 실행)
* Node.js에서는 import가 아닌 require 구문으로 패키지를 불러옴
*
* 이러한 기능을 브라우저에서도 사용할 수 있게 번들러를 사용
* (파일을 묶듯이 연결한다는 뜻)
*/대표적인 번들러 종류
- 웹팩 (리액트에서 주요 사용 / 편의성, 확장성이 뛰어남)
- Parcel
- browserify
번들러 도구 사용하면 발생하는 일?
- import(또는 require)로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해줌
- 최적화 과정에서 여러 개의 파일로 분리될 수 있음
- 즉, 해당 프로젝트에서는 src/index.js를 시작으로 필요한 파일을 다 불러와서 번들링!
웹팩
// in App.js
import logo from './logo.svg';
import './App.css';- 웹팩을 사용하면 svg 파일과 css파일도 불러와서 사용할 수 있음
- 웹팩의 로더 : 파일들을 불러오는 역할을 담당
로더의 종류
1) css-loader : CSS 파일을 불러옴
2) file-loader : 웹 폰트, 미디어 파일 등을 불러올 수 있게 해줌
3) babel-loader : JS 파일들을 불러오면서 최신 js문법으로 작성된 코드를 바벨을 사용해 ES5 문법으로 변환! (구버전 웹 브라우저와 호환하기 위함)
import logo from './logo.svg';
import './App.css';
function App() { // 함수형 컴포넌트
// 1. App 이라는 컴포넌트를 만듦
// 2. 프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타냄!
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
// 이러한 코드를 JSX라고 부름
);
}
export default App;JSX란?
- 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생김
- 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용해 JS 형태의 코드로 변환됨
function App() {
return (
<div>
Hello <b>react</b>
</div>
);
}
// 이렇게 작성된 코드는 다음과 같이 변환됨
function App() {
return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있음!
JSX의 장점
- 보기 쉽고 익숙함
- 높은 활용도
ex) App.js에서 App 컴포넌트를 만들면 이 App 컴포넌트를 마치 HTML 태그 쓰듯이 그냥 작성할 수 있음
ReactDOM.render() 함수란?
- 컴포넌트를 페이지에 렌더링하는 역할 수행
- react-dom 모듈을 불러와 사용
- Parameters (jsx, document 요소)
첫번째 파라미터) 페이지에 렌더링할 내용을 JSX 형태로 작성
두번째 파라미터) 해당 JSX를 렌더링할 document 내부 요소를 설정
ReactDOM.StrictMode
- 리액트 프로젝트에서 리액트의 레거시 기능들을 사용하지 못하게 하는 기능
- 이를 사용하면 문자열 ref, componentWillMount 등 나중에는 완전히 사라지게 될 옛날 기능을 사용했을 때 경고를 출력
JSX 문법
1. 감싸인 요소
- 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함
import React from 'react';
function App() {
return (
<h1>안녕!</h1>
<h2>잘 동작하니?</h2>
);
}
export default App;
// 요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류 발생!import React from 'react';
function App() {
return (
<div>
<h1>안녕!</h1>
<h2>잘 동작하니?</h2>
</div>
);
}
export default App;요소 여러 개를 하나의 요소로 감싸 주어야 하는 이유✨
Virtual DOM에서 컴포넌트 변화를 감지해낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있음!
import React from 'react';
function App() {
return (
<Fragment> // === <>
<h1>안녕!</h1>
<h2>잘 동작하니?</h2>
</Fragment> // === </>
);
}
export default App;Fragment 기능
오직 메모리상에만 존재하는 경량화된 노드!
2. 자바스크립트 표현
- JSX 내부에서 코드를 {}로 감싸면, 자바스크립트 값을 사용할 수 있음!
import React from 'react';
function App() {
const name = '리액트';
return (
<Fragment> // === <>
<h1>{name} 안녕!</h1>
<h2>잘 동작하니?</h2>
</Fragment> // === </>
);
}
export default App;3. If문 대신 조건부 연산자
조건에 따라 다른 내용을 렌더링헤야 할 때는
1) JSX 밖에서 if문을 사용하여 사전에 값을 설정
2) { } 안에 조건부 연산자를 사용하면 됨! ( === 삼항 연산자)
import React from 'react';
function App() {
const name = '리액트';
return (
<Fragment> // === <>
{name === '리액트' ? (
<h1>리액트입니다.</h1>
) : (
<h2>리액트가 아닙니다.</h2>
)}
</Fragment> // === </>
);
}
export default App;4. AND 연산자(&&)를 사용한 조건부 렌더링
return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null}</div>;
// ===
return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>;&&연산자로 조건부 렌더링을 할 수 있는 이유
리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타내지 않음!
이 때, falsy한 값인 0은 예외적으로 화면에 나타남
const number = 0;
return number && <div>내용</div>JSX는 언제 괄호로 감싸야 하나요?
주로 JSX를 여러 줄로 작성할 때 괄호로 감싸고, 한 줄로 표현할 수 있는 JSX는 감싸지 않음
5. undefined를 렌더링하지 않기 (|| 연산자 사용)
- JSX 내부에서 undefined를 렌더링하는 것은 ㅇ
- 함수가 undefined를 반환해서 렌더링하면 X
import React from 'react';
function App() {
const name = undefined;
return <div>{name || '리액트'}</div>
}
export default App;6. 인라인 스타일링
- 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어주어야 함
ex) background-color에 경우 - 문자를 없애고 카멜 표기법으로 작성! => backgroundColor
import logo from './logo.svg';
import './App.css';
function App() {
const name = '리액트';
const style = {
backgroundColor: 'white',
color: 'aqua',
fontSize: '14px',
fontWeight: '800',
padding: 16 // 단위를 생략하면 px로 지정
}
return (
<div style={style} className="App"></div>;
/*
미리 선언하지 않고 인라인으로 작성하고 싶다면
<div style={{
backgroundColor: 'black', // 이런식으로 작성!
}}
className="App"
>
{name}
</div>;
*/
);
}
export default App;7. class 대신 className
- className이 아닌 class 값을 설정해도 스타일이 적용되긴 하지만, console에 경고창 뜸 (class를 className으로 변환시켜 주고 경고를 띄움)
8. 꼭 닫아야 하는 태그
- JSX에서는 태그를 닫지 않으면 오류가 발생!
- self-closing 으로라도 작성해야 됨
9. 주석
- JSX 내부에서의 주것 작성 : {/ 주석은 이렇게 작성/}
- 시작 태그를 여러 줄로 작성할 때는 그 내부에서 // ...과 같은 형태의 주석도 작성 ㅇ
정리
- JSX는 HTML과 비슷하지만 완전히 똑같지는 않음
- 코드로 보면 XML 형식이지만 실제로는 JS 객체이며, 용도도 다르고 문법도 차이남
Front-End Developer