React 입문 第二番目 : 리액트의 설치 및 설정

리액트 설치

프로젝트에 리액트 패키지를 설치하기 위해서는, 먼저 노드 패키지 매니저(node package manager = npm)를 설치해야 합니다

npx install react || npx i react (간략히)

만약 컴퓨터에 로컬 리액트 프로젝트를 세팅하고 싶다 할시에는, 터미널에 npx craete-react-app 디렉토리명 을 입력해서 만드시는 것을 추천합니다.

참고자료 (Create-React-App)

리액트 가져오기

• 리액트는 브라우저의 일부가 아니므로, 필요한 곳에JavaScript 파일로 가져올 필요가 있습니다.
• 모든 JavaScript 파일은 독립적 모듈입니다. 즉, 변수 함수 및 하나의 파일/ 모듈로의 가져오기는 다른 파일이나 모듈에 영향을 주지 않습니다.

리액트를 가져오는 방법은 하기와 같습니다.

import React from "react";

이것은 소위 말해 default import 라고 하는데, 이것은 import Sometihng from "package-name" 의 문법을 따르기 때문입니다. 이름이 명명되어 있는 것을 내보 낼때는

import {Something} from "package-name"

이렇게 적습니다. 여기서, "react"에서 내보낸다는거에 초점을 맞출 필요가 있는데, 파일 경로에서 보내는게 아니기 때문에 이것을 bare import라고 얘기합니다.

webpack이나 Parcel 같은 코드번들러 (여기선 webpack을 사용한 create-react-app)를 실행할 때, 이 bare import는, node_modules에서 확인 되며, node_modules/react/ 해당 패키지에서 가져오는 것입니다. 이것이 리액트를 첫번째 로 node_modules folder에 다운로드 해서 설치하는 이유입니다.

요약

• npx install react 혹은 npx i react로 설치한다
• 리액트가 필요한 모든 파일에 import React from "react" 를 해줘야 한다.