[React] JSX, Component

JSX란?

JavaScript XML

자바스크립트에 XML을 추가한 확장형 문법

XML 또한 HTML의 표현법을 확장한 문법이므로

JSX = HTML + JS라고 보면 될 듯하다. 

하나의 파일에 JS와 HTML을 동시에 작성할 수 있다.

하지만 HTML이 아니라 XML 마크업 규칙을 따른다. 예) <>, < /> 같은 표현

 

React 동작 방식

npm start를 하면 가장 먼저 index.js 파일이 실행된다.

index.js

//필수 리액트 구동 모듈
import React from 'react';
import ReactDOM from 'react-dom';
//초기 화면을 구성하는 사용자 코드
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

//리액트 엔진이 화면을 출력하는 코드
//id가 root인 엘리먼트에 컴포넌트를 출력
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Component (컴포넌트)

기존 웹 프레임워크의 동작 방식

기존의 웹 프레임워크는 MVC 방식으로 정보, 화면, 구동 코드를 분리하여 관리했다.

정보 담당은 Model, 화면 담당은 View, 구동 담당을 Controller라고 부르는 것에서 MVC라는 용어가 나왔다.

이 방식의 장점 : 코드 관리를 효율적으로 할 수 있다.

이 방식의 단점 : MVC 각 요소의 의존성이 높아서(하나만 바꾸기 쉽지 않음) 재활용이 어렵다.

 

컴포넌트의 개념 

MVC의 뷰를 독립적으로 구성하여 재사용할 수 있도록 만든 블록 같은 것

 

컴포넌트 구성요소

• 프로퍼티 : 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터
• state : 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터
• 컨텍스트 : 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터

---

그 외

Import문에서 파일 이름의 확장자가 생략된 이유

 

create-react-app은 js 또는 jsx 파일의 확장자를 생략해도 해당 파일을 자동으로 찾을 수 있게 설정되어 있다.

그 이유는 '웹팩 코드 검색 확장자(webpack module resolution)' 기능 덕분이다.

이 웹팩 코드 검색 확장자는 다음과 같은 순서로 파일을 검색한다.

1. 확장자가 있는 파일을 먼저 임포트 한다.
2. 확장자가 없는 경우 웹팩의 확장자 옵션에 정의된 확장자 목록을 보고 해당 이름을 포함한 파일이 있는지 확인하여 임포트 한다. 예) import 'MyFile'; 의 경우 MyFile.js > MyFile.jsx 순서로 파일을 확인하여 임포트한다. 
3. 만약 지정 경로에 해당 파일이 없으면 같은 이름의 폴더가 있는지 검색한다. 같은 이름의 폴더가 있다면 그 안에 있는 index 파일을 검색한다. 예) import 'MyComponent'의 경우, MyComponent.js > MyComponent.jsx > MyComponent 폴더 > 폴더 안에서 index.js > index.jsx 순서로 파일을 확인하여 임포트 한다. 

---

React rule 1

컴포넌트 이름의 첫 번째 글자는 반드시 대문자여야 한다.

이유 : 기존의 HTML 마크업과 구분하기 위해