✅ JSX란

Javascript XML로 자바스크립트의 확장 문법

• 공식적인 자바스크립트 문법은 아님
• 브라우저가 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용해 일반 자바스크립트 형태의 코드로 변환됨
  (Bundling: 여러 개로 흩어져 있는 파일들을 압축, 난독화 등을 하여 하나의 파일로 모아주는 역할)

🌈 JSX의 특징

• 보기 쉽고 익숙하며, 활용도가 높다.
• HTML과 비슷해 보이지만, 코드는 XML 형식이고, 실제로는 자바스크립트 객체이며, 용도와 문법에 조금씩 차이가 있다.

✅ 컴포넌트

⭐️ 컴포넌트 사용 방법

1. 컴포넌트 작성

MyComponent.js

const MyComponent = () => {
	return <div>나의 컴포넌트</div>
};

2. 모듈 내보내기

// 방법 1.
export default MyComponent;

// 방법 2.
export MyComponent;

3. 모듈 불러오기

// 방법 1로 모듈 내보낸 경우
import MyComponent from './MyComponent';

// 방법 2로 모듈 내보낸 경우
import { MyComponent } from './MyComponent';

4. 컴포넌트 사용

App.js

const App = () => {
	return <MyComponent />
};

❓ 모듈 vs 컴포넌트

모듈

• 비슷하거나 연관된 것들로 이루어진 메소드, 클래스의 집합
  자동차를 예시로 들면,
  엔진을 이루고 있는 구성품 = 메소드나 클래스
  엔진 = 모듈
• 구조의 최소단위
• 정적인 구조

컴포넌트

• 기능의 최소단위
• 런타임에 독립적으로 배포, 실행되는 단위
  런타임: 컴파일이 완료된 이후 사용자에 의해서 응용프로그램이 동작되어지는 때
• 동작하는 모듈의 수

Client-Server 시스템을 예로 들자면,
하나의 서버가 10개의 클라이언트에게 정보를 제공할 때
모듈은 '서버 + 클라이언트 = 2개'를 가지지만
컴포넌트는 '서버 + 클라이언트 10개 = 11개'가 된다.

참고: 모듈과 컴포넌트의 차이점

⚡️ props와 state

컴포넌트 간에 값을 주고 받기 위해 props, state를 사용한다.

props

properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.
부모 컴포넌트가 설정할 수 있다.

• children: 태그 사이의 내용을 보여주는 props

<MyComponent>children</MyComponent>

state

컴포넌트는 자신의 props를 읽기 전용으로 밖에 확인할 수 없다.
값을 내부적으로 업데이트 하기 위해 state를 사용한다.

비구조화 할당 문법

• 사용법 1.

MyComponent.js

const MyComponent = props => {

	// 비구조화 할당 문법
	const { name, children } = props;
    return (
    	<div>
        	안녕하세요. 제 이름은 {name}입니다. <br />
            children 값은 {children} 입니다.
        </div>
    );
}
MyComponent.defaultProps = {
	name: '기본값';
};
export default MyComponent;

• 사용법 2

MyComponent.js
import PropTypes from 'prop-types';

// 비구조화 할당 문법
const MyComponent = ({ name, children }) => {
	return (...);
};
MyComponent.defaultProps = {
	name: '기본 이름';
};
MyComponent.propTypes = {
	name: PropTypes.string;
};
export default MyComponent;