‼ 중요 ‼
JSX 문법 8가지는 꼭 외울 것!!

오늘 하루 느낀점 : 빡세다 ..

학습 목표

---

• Component 의 개념과 종류에 대해 설명할 수 있다.
• JSX에 대한 정의와 기본 특성에 대해 설명할 수 있다.
• CRA를 설치하고 폴더와 파일이 어떻게 구성되어 있는지 설명할 수 있다.

React의 정의 및 특징

1. React의 정의

• React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리 입니다.

- React를 사용하는 이유

1. UI를 자동으로 업데이트 해준다. 이로 인해 우리는 데이터 기반의 선언적 개발이 가능해지며, 자동으로 UI를 업데이트하는 과정에서 Virtual DOM (가상돔)을 통해 최적화된 업데이트를 할 수 있다.

2. Component 기반의 개발을 통해 복잡한 UI를 효과적으로 구성할 수 있으며, JSX 문법으로 컴포넌트를 편리하게 작성할 수 있습니다.

2. React의 특징

2-1. 선언적

• 개발 방식에는 크게 절차적인 개발과 선언적인 개발이 있습니다.

• 절차적 : 문제를 어떻게 해결할 것인가?

• 선언적 : 무엇을 해결할 것인가?

• 프론트엔드 개발에서 바닐라 자바스크립트의 프로그래밍 방식이 절차적으로 프로그래밍 방식이고, 리엑트에게 전달해주면 "어떻게" 하는지에 대한 중간과정은 리엑트가 알아서 처리해줍니다.

2-2. Virtual DOM

• 현대의 복잡하고 규모가 큰 웹 애플리케이션에서는 상호작용이 많은 만큼 DOM 조작이 많이 발생합니다. 이 때 DOM을 조작할 떄마다 위와 같은 작업을 수행하게 되면 수백, 수천 개의 요소를 새로 그려야 하기 때문에 성능이 저하되고, 전체적인 프로세스를 비효율적으로 만듭니다.
• 이런 문제를 해결하기 위해서, 리액트는 이전 UI 상태를 메모리에 유지하는 가상 DOM을 통해 변경될 UI의 최소 집합을 계산하여 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다.

2-3. Component

2-3-1. 컴포넌트의 정의

• 프론트앤드 개발에서 컴포넌트(Component)란 재활용 가능한 UI 구성 단위를 의미 합니다. UI를 여러 조각으로 나누고, 각 조각을 개별적으로 사용할 수 있습니다.

2-3-2. 컴포넌트의 특징

1. 필요한 곳에서 재사용 할 수 있다.
2. 독립적으로 사용할 수 있기 때문에 코드의 유지보수에 좋다.
3. 또 다른 컴포넌트를 포함할 수 있다.
4. 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.

2-3-3. 컴포넌트의 종류

1. 클래스 컴포넌트

• 클래스 컴포넌트는 위와 같이 반드시 render() 메서드가 있어야 하며, 그 안에서 화면에 보여줄 JSX(Javascript Syntax eXtension)를 반환합니다. state 및 lifecycle(라이프사이클) API를 통해 관련 기능을 재 사용할 수 있습니다.

export default App;

2. 함수 컴포넌트

• 함수 컴포넌트는 render() 메서드 없이 JSX를 반환하는 방식으로, 클래스 컴포넌트에 비해서 훨씬 간단하고 단순하지만 state와 라이프사이클을 관리하지 못한다는 단점이 있어 잘 사용되지 않았습니다. 하지만 React 16.8 버전에서 Hook 기능이 추가되면서 함수 컴포넌트에서도 state를 사용할 수 있게 되었고, 그 후부터 클래스 컴포넌트보다는 함수 컴포넌트가 더 많이 사용되기 시작했습니다.
  

// App.js

import React from 'react'

const App = () => {
  return <h1>This is Function Component!</h1>;
};

export default App;

2-3-4. 컴포넌트의 사용

• 리액트는 소문자로 시작하는 요소를 HTML 태그로 인식하기 때문에 컴포넌트명은 항상 첫 글자가 대문자가 되도록 작성해야 합니다.

• 선언한 컴포넌트는 다른 곳에서 import하여 사용할 수 있습니다.
  

마켓컬리 화면 컴포넌트 코드

		// src/pages/ListPage/ListPage.js

		import GNB from '../components/GNB/GNB';
		import List from './List/List';
		
			const ListPage = () => {
			  return (
			    <>
			      <GNB />
						<List />
				    </>
				  );
				}

			export default ListPage;
			```
			
```javascript
			// src/pages/ListPage/List/List.js

			import ListTitle from './ListTitle/ListTitle';
			import ListItem from './ListItem/ListItem';
			
			const List = () => {
			  return (
			    <>
			      <ListTitle />
						<div className="listContainer">
							<ListItem />
							<ListItem />
							.
							.
							.
						</div>
			    </>
			  );
			}
			
			export default List;

3. JSX (중요)

3-1. JSX의 정의

• JSX(JavaScript Syntax eXtension)란 리액트에서 사용하는 자바스크립트 확장 문법입니다.

• 기존에 바닐라 자바스크립트를 통해 기능을 구현할 때는 HTML에서 markup(마크업) 된 부분들을 확인하면서 직접 해당 DOM에 접근하고, Event Listener를 부착하는 등 HTML과 자바스크립트 로직은 서로 긴밀하게 연결되어 있습니다.

• JSX로 작성한 코드는 브라우저에서 동작하기 전에 Babel이라는 transcompiler를 통해 일반 자바스크립트 코드 형태로 변환됩니다.

JSX는 HTML과 자바스크립트 로직을 하나의 자바스크립트 파일 안에서 모두 처리하기 위해 확장한 문법입니다.

• JSX로 작성한 코드

const element = (
	<h1 className="greeting">
		hello, world!
	</h1>
);

• Babel로 변환된 JSX 코드

const element = React.createElement(
	'h1',
	{calssName: 'greeting'},
	'hello, world!'
);

3-2. JSX의 특징

• JSX는 HTML 태그와 유사한 형태로 사용하기 때문에 보기 쉽고 익숙합니다.
• 또한 별도의 .html, .js 파일이 아닌 하나의 자바스크립트 파일에서 HTML 마크업과 자바스크립트 로직을 동시에 작성할 수 있기 때문에 편리합니다.

3-3. JSX 문법

1. JSX element

• JSX 문법을 통해 자바스크립트 파일 어디에서나 필요한 곳에 HTML 처럼 작성할 수 있습니다.
• 아래 예시처럼 변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있습니다.

const hi = <p>Hi</p>

2. Javascript 표현식

• JSX 내부에서 자바스크립트 값을 출력하고 싶다면 { ... JavaScript } 와 같이 { } 안에 유효한 자바스크립트 표현식을 작성할 수 있습니다.

// Greetings.js
import React from 'react'

const Greetings = () => {
	const name = '김개발';

  return <h1>{name}님, Welcome to Wecode!</h1>;
};

export default Greetings;

3. JSX attribute

• 태그의 attribute name(속성명)은 camelCase로 작성해야 합니다.
• 실제 HTML에서 쓰는 attribute name(속성명)과 다를 수 있으니 주의해야 합니다.
• 예를 들어, class를 주고 싶을 때 원래 속성명은 class 이지만 JSX에서는 className 을 사용해야 합니다.

// HTML
<h1 class="greetings">Welcome to Wecode!</h1>

// JSX
<h1 className="greetings">Welcome to Wecode!</h1>

4. Event 처리하기

• React가 아닌 바닐라 자바스크립트에서는, 해당하는 DOM 요소에 직접 접근해 이벤트 리스너(Event Listener)를 부착하는 방식으로 이벤트를 처리했습니다.
• JSX에서는, 태그를 작성할 때 직접 이벤트와 이벤트 핸들러(Event Handler)를 부여할 수 있습니다.
  - 이벤트는 앞에 on 을 붙여 camelCase로 작성합니다.
  - 문자열이 아닌 함수로 이벤트 핸들러를 전달 합니다.

// JS
const title = document.getElementsByClassName('title')[0];
title.addEventListener('click', handleClick);

// JSX
<h1 className="title" onClick={handleClick}>Welcome to Wecode!</h1>

5. Inline Styling

• style 속성은 HTML에서 문자열로 받는 것과 달리 camelCase를 요소로 가지는 자바스크립트 객체를 받습니다.
• 그렇기 때문에 아래처럼 중괄호를 두 번 겹쳐서 쓰는 형태로 사용합니다.
• 바깥의 { }는 JSX 문법을 의미하며 안쪽의 { }는 자바스크립트 객체를 의미합니다.

// HTML
<h1 style="color:red;background-image:yellow">Welcome to Wecode!</h1>

// JSX
<h1 style={{ color: "red", backgroundImage: "yellow" }}>
  Welcome to Wecode!
</h1>

6. Self-Closing Tag

• 어떤 태그라도 self-closing tag로 사용할 수 있습니다.
• <img>와 같이 하나의 태그가 요소인 경우, 기존 HTML은 /으로 끝내지 않아도 되지만, JSX에서는 <img />와 같이 항상 / 으로 끝내줘야 합니다.
• <div /> 와 <div></div> 는 같은 표현 입니다.

7. Nested JSX

• 반드시 최상위를 감싸고 있는 하나의 태그가 있어야 합니다.

// Bad
const Greetings = () => {
	return (
		<h1>김개발님!</h1>
		<h2>위코드에 오신 걸 환영합니다!</h2>
	);
}

// Good
const Greetings = () => {
	return (
		<div>
			<h1>김개발님!</h1>
			<h2>위코드에 오신 걸 환영합니다!</h2>
		</div>
	);
}

• Bad 예시의 경우, h1 태그 h2 태그를 감싸고 있는 태그가 없기 때문에 에러가 발생합니다.
• Good 예시처럼 최상위를 하나의 태그로 감싸주어야 합니다.

8. React.Fragment

• 앞서 JSX에서는 반드시 최상위를 하나의 태그로 감싸야 한다고 했습니다.
• 그런데 최상위를 감싸고 있는 태그에 특별한 의미나 스타일이 없다면 불필요한 요소를 생성하게됩니다.
• 이 때 유용하게 사용하게 되는 것이 <React.Fragment> 입니다.
• Fragment는 추가적인 DOM element를 생성하지 않고, 하나의 컴포넌트 안에 여러 요소(자식)를 간단하게 그룹화 할 수 있는 기능입니다.
• 축약형 문법으로도 동일하게 사용할 수 있습니다.

const Greetings = () => {
	return (
		<>
			<h1>김개발님!</h1>
			<h2>위코드에 오신 걸 환영합니다!</h2>
		</>
	);
}