React는 사용자 인터페이스를 만들기 위한 라이브러리이다.
프레임워크가 아니고, 심지어 웹에만 사용할 수 있는것도 아니다.
- React는 다른 라이브러리들과 함께 특정한 환경을 렌더링하는데 사용된다.
- React Native는 모바일 애플리케이션을 만드는데 사용 될 수 있다.
- React 360은 가상 현실 애플리케이션을 만드는 데 사용 할 수 있다.
웹을 만들기 위해서는 React 를 ReactDOM과 함께 사용한다.
React와 ReactDOM은 다른 실제 웹 프레임워크들과 동일한 공간에서 논의되고 동일한 문제를 해결하기 위해 사용된다.
- React를 "프레임워크"로 지칭할 때는 통상적인 뜻으로 받아들이면 된다.
React의 주요한 목표는 개발자가 UI를 만들 때 일어나는 버그들을 최소화 하는것이다.
이를 달성하기 위해서는 React는 사용자 인터페이스의 일부를 나타내는 자족적이고, 논리적인 코드 조각인 컴포넌트들을 사용한다.
- 이 컴포넌트들은 전체 UI를 구성할 수 있고, React는 렌더링 작업의 대부분을 추상화하여 개발자가 UI 디자인에 집중할 수 있게 한다.
React는 JavaScript를 어떻게 사용할까?
- React는 JavaScript의 특징을 이용한다.
- JavaScript와 가장 다른 부분은 JSX 구문의 사용이다.
- JSX는 스크립트의 구문을 확장하여 HTML과 유사한 코드를 함께 사용 할 수 있도록 한다.
const heading = <h1> Hello! </h1>;JSX 표현식 ( JSX expressrion) - 얼핏보면 HTML 같이 생겼지만, 실제로는 JavaScript
사용해보자 React!
create-react-app은 애플리케이션의 이름을 인수로 가진다.
create-react-app은 새로운 디렉토리를 만들 때 사용한 후 그 안에 중요한 파일을 생성한다.
npx create-react-app moz-todo-react이 명령어는 moz-todo-react 디렉토리를 만들고 다음과 같은 일을 한다.
- 앱 기능에 필수적인 npm 패키지를 설치한다.
- 애플리케이션을 시작하고 서비스하기 위한 스크립트를 작성한다.
- 기본적인 앱 아키텍처를 정의하는 파일과 디렉토리의 구조를 만든다.
- 컴퓨터에 깃이 설치되어있다면, 디렉토리를 깃 레포지토리로 초기화한다.
1. 애플리케이션 구조
moz-todo-react
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.jsscr 디렉토리는 애플리케이션의 소스코드가 있는곳으로, 가장 많은 시간을 보내는곳이다.
1-1. public 디렉터로는 앱을 개발하는 동안 브라우저가 읽을 파일을 가지고 있다. 이들 중 가장 중요한것은 index.html이다.
-> React는 코드를 html 파일에 주입하여 브라우저가 코드를 실행할 수 있게 한다.
2. Import
상단의 import문은 App.js가 다른 곳에 정의된 코드들을 사용 할 수 있게 해준다.
import React from 'react';
import logo from './logo.svg';
import './App.css';1. 첫번째 명령문은 React 라이브러리를 불러온다.
작성한 JSX를 React.createElement()로 변환하기 때문에, 모든 React 컴포넌트들은 반드시 React 모듈을 불러와야 한다.
2. 두번째 명령문은 ./logo.svg 로부터 로고를 불러온다.
./를 경로의 시작에, .svg 익스텐션을 마지막에 사용한다는것은 해당 파일이 로컬에 위치하며 JavaScript 파일이 아니라는것을 뜻한다.
React 모듈을 불러올 때는 경로나 익스텐션을 쓰지 않는다. 이것들은 로컬 파일이 아니라, package.json의 의존성 목록에 포함되어 있다. 로컬과 이들을 구분!
3. 세번째 명령문은 App 컴포넌트에 관련된 CSS를 불러온다.
어떤 변수 이름이나 from 지시가 없다. 이 import 구문은 JavaScript 모듈 구문이 아니라 웹팩 (Webpack)으로부터 온것이다.
- 웹팩은 create-react-app이 우리의 모든 스크립트 파일을 함께 번들하고 브라우저에 제공하기 위해 사용하는 도구이다.
