App.js 파일 구조 완전 쉽게 설명하기

초보 개발자가 App.js 파일을 처음 마주했을 때 "이게 대체 뭘 의미하지?" 하는 마음이 들기 쉽지. 그래서 최대한 쉽게, 한 줄 한 줄 의미를 설명해줄게!

 

React 프로젝트를 만들고 열어보면 src 폴더 안에 App.js 라는 파일이 있어요. 이건 우리가 만든 앱의 시작점, 즉 메인 화면을 그리는 곳이에요!

한 번 기본 코드를 예시로 볼게요.

 

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

 

 

🔍 하나씩 설명해볼게요!

---

1. import React from 'react';

👉 React라는 라이브러리를 불러옵니다.

💡 예전에는 JSX를 쓰려면 꼭 React를 import 해야 했어요. 최신 버전에서는 꼭 필요한 건 아니지만, 초보라면 일단 그대로 써보면서 익숙해지는 게 좋아요!

---

2. import './App.css';

👉 App.css라는 파일에서 스타일을 불러옵니다.

CSS는 "어떻게 생겼는지"를 정하는 거죠. 예쁘게 꾸미는 역할이에요!

---

3. function App() { ... }

👉 이 부분이 진짜 핵심! App이라는 컴포넌트(=화면 조각)를 만드는 함수입니다.

함수형 컴포넌트라고 부릅니다. React에서는 화면을 컴포넌트 단위로 쪼개서 만들어요!

---

4. return ( ... )

👉 이 함수에서 무엇을 화면에 보여줄지 결정합니다. HTML처럼 생긴 코드를 리턴하는데, 바로 이게 JSX예요.

jsx

복사편집

<div className="App"> <h1>Hello, React!</h1> <p>This is my first React app.</p> </div>

• <div className="App">는 HTML에서 <div class="App">와 같아요.
  단, JSX에서는 class 대신 className 을 씁니다! (중요!)
• 그 안에 <h1>과 <p>는 우리가 실제로 웹 화면에 보고 싶은 텍스트들이에요.

---

5. export default App;

👉 이건 이 파일의 App 컴포넌트를 밖에서도 쓸 수 있게 내보내는 코드입니다.

이 덕분에 다른 파일에서 import App from './App';처럼 사용할 수 있어요!

---

🎯 정리하면!

코드 줄하는 역할

import	React, CSS 파일 불러오기
function App()	App 컴포넌트를 정의
return	화면에 보여줄 내용(HTML처럼 보이는 JSX)
export default	이 컴포넌트를 다른 데서도 쓸 수 있게 함

---

💡 팁

처음엔 App.js 하나만 가지고 실습해보면서

• <h1>이나 <p>를 바꿔보기도 하고
• 이미지나 버튼을 추가해보면서
  화면이 어떻게 변하는지 직접 확인해보는 것이 제일 좋은 학습 방법이에요!