※ 본 강좌는 node.js와 yarn이 설치되어 있다는 가정하에 진행합니다.
기호에 따라 yarn 대신 npm을 사용해도 되오나, 관련 명령어는 별도의 서칭이 필요할 수 있습니다.잘못 된 내용에 대한 지적은 언제든 환영입니다.
npx create-react-app 프로젝트_디렉토리명
create-react-app 보일러플레이트를 통해 리액트 프로젝트를 명령어 입력 한번에 바로 생성할 수 있다.
👉 복잡한 환경 셋팅을 직접 할 필요가 없기에 매우 간편하다😋
보통 src
디렉토리 내부에서 컴포넌트를 생성하며, components
디렉토리를 src
내부에 생성하여 사용하기도 한다.
Q. 왜 npm이 아닌 npx를 사용하나요?
A. 업데이트가 잦고 용량이 큰 프로젝트 생성 패키지를 로컬에 남기지 않기 위함
👉 >npx를 사용하면 항상 최신 버전의 패키지를 설치하여 실행하며, 실행 후 해당 패키지가 제거된다.
생성한 CRA 프로젝트 디렉터리로 들어간 다음, 개발 모드로 서버를 실행하여 작동 여부를 확인한다.
cd 프로젝트_디렉토리명
yarn start
src
디렉토리에 Hello.js
를 생성하여, 아래와 같이 작성하여 보자
function Hello() {
return <div>Hello World</div>; // 뷰를 정의하는 JSX 코드 반환
}
export default Hello; // 함수 컴포넌트 Hello를 내보내기
컴포넌트에서 뷰를 정의하기 위해서는 JSX를 사용하며, 이를 반환하여 클라이언트 단에서 해당 뷰를 띄울 수 있다.
export
를 통해 컴포넌트 함수를 내보내어 외부 파일에서 해당 컴포넌트를 사용할 수 있도록 한다.
export default Hello
👉 여기서 default
는 Hello.js
파일의 기본값으로 설정하는 문법이며, 기본값 여부에 따라 추후 다른 파일에서 불러올 때 차이가 생긴다.
import Hello from "./Hello"; // default
import { Hello } from "./Hello"; // non-default
src/App.js
에서 기존의 코드를 지우고, 아래와 같이 작성하여 보자
import Hello from "./Hello" // Hello.js에서 Hello 컴포넌트 함수 불러오기
function App() {
// Hello 컴포넌트 사용
return (
<div>
<Hello />
<div>
)
}
export default App;
컴포넌트는 여러 번 재사용할 수 있다.
return (
<div>
<Hello />
<Hello />
<Hello />
</div>
);
return (
/* 배열 렌더링 :
users 배열의 각 요소를 map 배열함수를 통해 렌더링하는 코드이다. */
<div>
{users.map(user => (
<User user={user} key={index} />
))
</div>
);
src/index.js
를 살펴보자
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(<App />, document.getElementById("root"));
reportWebVitals();
ReactDom.render
를 통해, App.js
내부의 App
컴포넌트 내용을 실제 DOM 내부에 렌더링한다.
public/index.html
가 실제 DOM에 해당하며, <div id="root"></div>
이 그 대상이다.
서버를 켠 상태에서 컴포넌트를 수정하더라도, 1~2초 이내에 변경 사항이 적용 된 리렌더링이 진행된다.
👉 이러한 리액트의 기술을 Fast Refresh라고 한다.
References
"2. 작업환경 준비" .velopert
"3. 나의 첫번째 리액트 컴포넌트" .velopert
"(2) React 보일러 플레이트 Boiler Plate CRA(Create-React-App)" .lua.aw