[React] app.jsx, main.jsx, package.json, api.js 파일설명

React 프로젝트 파일 설명 및 예제

리액트 프로젝트의 구성 파일들에는 다양한 역할이 있습니다. 여기에서는 app.jsx, main.jsx, package.json, api.js 파일의 사용 용도와 예제를 다룹니다.

1. app.jsx

app.jsx 파일은 주로 애플리케이션의 주 컴포넌트를 정의합니다. 여기서는 주로 루트 컴포넌트 및 하위 컴포넌트들을 가져와서 조립합니다.

예제:

jsx

import React from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
import MainContent from './components/MainContent';

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

export default App;

위 예제에서는 Header, MainContent, Footer 컴포넌트를 가져와서 최종적으로 렌더링하는 App 컴포넌트를 정의합니다.

2. main.jsx

main.jsx 파일은 애플리케이션의 시작점을 정의하며, 리액트DOM 라이브러리를 사용하여 App 컴포넌트를 HTML 요소에 렌더링합니다.

예제:

jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

위 예제에서는 App 컴포넌트를 HTML의 root 요소에 렌더링합니다.

3. package.json

package.json 파일은 프로젝트의 메타데이터를 포함하며, 프로젝트에서 사용하는 의존성 및 스크립트를 정의합니다.

예제:

json

{
  "name": "my-react-app",
  "version": "1.0.0",
  "description": "A simple React application",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "devDependencies": {},
  "author": "",
  "license": "ISC"
}

위 예제에서는 프로젝트의 기본 정보를 설정하고 react, react-dom, react-scripts 등의 의존성을 포함합니다.

4. api.js

api.js 파일은 외부 API와의 통신을 처리하는 데 사용됩니다. 주로 Axios 라이브러리를 사용하여 HTTP 요청을 보냅니다.

예제:

js

import axios from 'axios';

const API_URL = 'https://api.example.com';

export const fetchData = async () => {
  try {
    const response = await axios.get(`${API_URL}/data`);
    return response.data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
};

위 예제에서는 fetchData 함수를 정의하여 외부 API로부터 데이터를 가져오고, 에러 발생 시 콘솔에 로그를 출력합니다.