[React] 1. CRA 프로젝트 생성, 컴포넌트의 기본 개념

※ 본 강좌는 node.js와 yarn이 설치되어 있다는 가정하에 진행합니다.
기호에 따라 yarn 대신 npm을 사용해도 되오나, 관련 명령어는 별도의 서칭이 필요할 수 있습니다.

잘못 된 내용에 대한 지적은 언제든 환영입니다.

CRA 프로젝트 생성

npx create-react-app 프로젝트_디렉토리명

• create-react-app 보일러플레이트를 통해 리액트 프로젝트를 명령어 입력 한번에 바로 생성할 수 있다.
  👉 복잡한 환경 셋팅을 직접 할 필요가 없기에 매우 간편하다😋

• 보통 src디렉토리 내부에서 컴포넌트를 생성하며, components 디렉토리를 src내부에 생성하여 사용하기도 한다.

Q. 왜 npm이 아닌 npx를 사용하나요?

A. 업데이트가 잦고 용량이 큰 프로젝트 생성 패키지를 로컬에 남기지 않기 위함
👉 >npx를 사용하면 항상 최신 버전의 패키지를 설치하여 실행하며, 실행 후 해당 패키지가 제거된다.

CRA 프로젝트 개발 모드 서버 실행하기

생성한 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>
);

실제 DOM 내부에 가상 DOM이 렌더링되는 구조

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

"React 개발 환경 세팅 & React 개발 서버 실행 & Github 연동" .xiubindev