5.1 JSX로 리액트 엘리먼트 정의하기
- JSX: JS + XML
- JS 코드 안에서 태그 기반의 구문을 써서 리액트 엘리먼트 정의 가능한 JS 확장 문법
- 태그를 사용해 엘리먼트의 타입 지정
- 태그의 속성은 프로퍼티 표현
- 여는 태그와 닫는 태그 사이에 엘리먼트의 자식을 넣음
- 중괄호로 감싼 코드 => JavaScript expression (JSX)
- JSX 팁
- 내포된 컴포넌트; 다른 컴포넌트의 자식으로 컴포넌트 추가 가능
- className; JS에서 class가 예약어이므로 className 속성 사용
- 자바스크립트 식; 중괄호로 JS 식 감싸면 중괄호 안의 식을 평가해서 결과값을 사용해야 한다는 의미
- 평가; 중괄호 안에 들어간 JS 코드는 값을 평가받음
- 배열을 JSX로 매핑하기
- JS 함수 안에서 JSX 직접 사용 가능 (배열을 JSX 엘리먼트로 변환 가능)
- 브라우저는 JSX 해석 불가 => 바벨 도구 이용
5.2 바벨
- 바벨; 개발자가 작성한 최신 소스 코드를 브라우저가 해석할 수 있는 코드로 변환해줌 (컴파일링)
- JSX를 순수 리액트로 변환해줌 (JSX 처리 표준)
- 클라이언트가 script 안의 코드 실행 전에 컴파일 수행해 줌
5.3 JSX로 작성한 조리법
<!DOCTYPE html>
<html>
<head>
<title>리액트 예제</title>
</head>
<body>
<div id="root"></div>
<!-- React와 ReactDOM 라이브러리(개발 버전) -->
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// 데이터는 조리법 객체의 배열
const data = [
{
name: 'Baked Salmon',
ingredients: [
{ name: '연어', amount: 500, measurement: '그램' },
{ name: '잣', amount: 1, measurement: '컵' },
{ name: '버터 상추', amount: 2, measurement: '컵' },
{
name: '옐로 스쿼시(Yellow Squash, 호박의 한 종류)',
amount: 1,
measurement: '개',
},
{ name: '올리브 오일', amount: 0.5, measurement: '컵' },
{ name: '마늘', amount: 3, measurement: '쪽' },
],
steps: [
'오븐을 180도로 예열한다.',
'유리 베이킹 그릇에 올리브 오일을 두른다.',
'연어, 마늘, 잣을 그릇에 담는다.',
'오븐에서 15분간 익힌다.',
'옐로 스쿼시를 추가하고 다시 30분간 오븐에서 익힌다.',
'오븐에서 그릇을 꺼내서 15분간 식힌 다음에 상추를 곁들여서 내놓는다.',
],
},
{
name: '생선 타코',
ingredients: [
{ name: '흰살생선', amount: 500, measurement: '그램' },
{ name: '치즈', amount: 1, measurement: '컵' },
{ name: '아이스버그 상추', amount: 2, measurement: '컵' },
{ name: '토마토', amount: 2, measurement: '개(큰것)' },
{ name: '또띠야', amount: 3, measurement: '개' },
],
steps: [
'생선을 그릴에 익힌다.',
'또띠야 3장 위에 생선을 얹는다.',
'또띠야에 얹은 생선 위에 상추, 토마토, 치즈를 얹는다.',
],
},
];
// 조리법 하나를 표현하는 상태가 없는 함수 컴포넌트
const Recipe = ({ name, ingredients, steps }) => {
return (
<section id={name.toLowerCase().replace(/ /g, '-')}>
<h1>{name}</h1>
<ul className="ingredients">
{ingredients.map((ingredient, i) => (
<li key={i}>{ingredient.name}</li>
))}
</ul>
<section className="instructions">
<h2>조리 절차</h2>
{steps.map((step, i) => (
<p key={i}>{step}</p>
))}
</section>
</section>
);
};
// 조리법으로 이뤄진 메뉴를 표현하는 상태가 없는 함수 컴포넌트
const Menu = ({ recipes, title }) => {
return (
<article>
<header>
<h1>{title}</h1>
</header>
<div className="recipes">
{recipes.map((recipe, i) => (
<Recipe key={i} {...recipe} />
))}
</div>
</article>
);
};
ReactDOM.render(
<Menu recipes={data} title="맛있는 조리법" />,
document.getElementById('root')
);
</script>
</body>
</html>5.4 리액트 프래그먼트
- 리액트 프래그먼트; 새로운 태그를 실제로 만들지 않고 래퍼의 동작 흉내내기 가능
- 리액트는 둘 이상의 인접한 형제 엘리먼트를 컴포넌트로 렌더링 하지 않음
- React.Fragment 태그 또는 <> 이용
5.5 웹팩 소개
- 프로젝트 설정하기
- 번들 로딩하기
- 소스 맵
- create-react-app
'Books > 러닝 리액트 ✔️' 카테고리의 다른 글
| [Learning React] 7장 - 훅스로 컴포넌트 개선하기 (0) | 2022.02.01 |
|---|---|
| [Learning React] 6장 - 리액트 상태 관리 (0) | 2022.02.01 |
| [Learning React] 4장 - 리액트의 작동 원리 (0) | 2022.01.31 |
| [Learning React] 3장 - 자바스크립트를 활용한 함수형 프로그래밍 (0) | 2022.01.30 |
| [Learning React] 2장 - 리액트를 위한 자바스크립트 (0) | 2022.01.28 |
댓글