리액트 복습-1 환경구축, 컴포넌트 만들기

1. 리액트 설치하기

npx create-react-app my-app
cd my-app

 

왜 npm 이 아닌 npx로 환경을 세팅하는가?

npm은 패키지를 설치만 합니다 패키지를 직접 관리해야 하는 귀찮음이 있어요 그에 비해 npx는 패키지를 자동으로 설치하고 실행합니다 쉽게 말해서 설치화 실행(프로젝트생성 등)을 같이하는 자동화 도구라고 볼 수 있습니다

 

본 코드에서는 react 애플리케이션을 my-app 라는 폴더명으로 만들고 my-app 폴더로 이동하겠다는 명령어입니다

 

2. 리액트의 표준 프로젝트 구조

my-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/             # 이미지, 폰트, CSS 등 정적 파일
│   ├── components/         # 재사용 가능한 UI 컴포넌트
│   ├── pages/              # 페이지 단위 컴포넌트 (Route 기준)
│   ├── layout/             # 공통 레이아웃 (Header, Footer 등)
│   ├── hooks/              # 커스텀 훅
│   ├── utils/              # 유틸 함수 (포맷팅, 계산 등)
│   ├── services/           # API 요청 함수 모음
│   ├── store/              # Redux 또는 상태관리 관련 파일
│   ├── App.js              # 루트 컴포넌트
│   └── index.js            # 앱 진입점
├── .env                    # 환경 변수
├── package.json
└── README.md

리액트의 표준적인 프로젝트 구조입니다 리액트에선 컴포넌트를 어떻게 나눠야 하는지가 굉장히 중요합니다 저는 보통

components/slide or banner 등 폴더로 구조적으로 나눠 사용하는 편입니다

 

3. 함수형 컴포넌트 만들고 적용해 보기

// src/layout.js
const Header = () => {
  return (
    <header>
      <h1>My Blog</h1>
    </header>
  );
};

export default Header;

 

Header라는 함수형 컴포넌트를 생성하는 코드입니다 화살표함수를 통해 작성하고

return(리턴값) 을 이용해 JSX 코드를 반환합니다 여기서 JSX 코드란? JS + XML의 약자로

JSX라고 합니다 자바스크립트 내부에서 HTML처럼 UI를 표현할 수 있는 문법입니다

 

export default 는 다른 파일에서 이 파일을 사용할 수 있도록 내보내기 하는 코드입니다

import Header from "./layout/Header";

다른 파일에서 위 코드처럼 import 할 수 있게 됩니다

 

4. app에 컴포넌트를 사용해 보기

// app.js
import Header from "./layout/Header"; //만들어뒀던 Header 컴포넌트를 불러오기

//최상위 루트 컴포넌트
function App() {
//리턴할 JSX 코드 (화면에 보일 HTML 코드)
  return (
    <>
      <Header />
    </>
  );
}

export default App;

실제 보이는 화면에서 만든 컴포넌트를 사용하려면 root 폴더의 app.js 파일에서 코드를 작성해야 합니다

JSX 코드가 리턴될 때는 반드시 1개의 박스태그가 존재해야 합니다 <></>, 또는 <div></div> 태그를 작성하도록 합니다

여기서는 Header 컴포넌트를 불러오고 있기 때문에 <> 를 사용하지 않아도 되지만 예시로 사용해 봤습니다