1. 오늘 한 것 (What I Did)
- 컴포넌트 만들기
- 컴포넌트는 반드시 하나의 요소만 return해야 함
- <div>로 감싸거나 빈 태그 <></> 사용하기
- 다른 파일에서 import/export 해봤음
- HTML을 JSX로 바꿔봤음
- class → className (JS예약어 충돌 방지)
- 모든 태그 반드시 닫기
- <br> → <br />
- <img> → <img />
- App.js 실행까지 성공
- React 앱을 실제로 브라우저에서 돌려봤음
- npm install / npm run dev 명령어 사용 (꼭 실행 위치 폴더를 잘 확인하자!)
- 내가 만든 컴포넌트가 화면에 나타나는 걸 봤음
2. 새로 이해한 것 (What I Learned)
React 앱 실행 흐름
- 컴포넌트 파일 만들기
- App.js에서 import하기
- npm run dev로 실행하기
- 브라우저에서 결과 확인하기
컴포넌트의 의미
- 컴포넌트 = 재사용 가능한 조각 (레고 블록 같은 것)
- 한 번 만들면 여러 번 쓸 수 있음
- 각각의 컴포넌트는 독립적인 기능(?)을 가짐 → 함수 만들듯이 만들면 됨
Import/Export의 두 가지 방식
파일 하나에 함수 하나 있을 때: Default Export/Import
// 내보내기 (Export)
function Button() {
return <button>클릭하세요</button>;
}
export default Button;
// 가져오기 (Import)
import Button from './Button';
import MyButton from './Button'; // 이름 바꿔도 됨!
- 파일당 하나만 가능
- 이름을 자유롭게 바꿀 수 있음
- 중괄호 {} 없이 import
- 파일 이름 = 컴포넌트 이름 → Default
파일 하나에 함수 여러개 있을 때: Named Export/Import
// 내보내기 (Export)
export function formatDate() { /* */ }
export function validateEmail() { /* */ }
export const API_URL = 'https://api.com';
// 가져오기 (Import)
import { formatDate, validateEmail, API_URL } from './utils';
- 파일에서 여러 개 가능
- 정확한 이름으로 import해야 함
- 중괄호 {} 필수
- 파일 안에 여러 개 → Named
3. 여전히 모르겠는 부분
- function vs const 화살표함수 실제로 뭐가 다른 거지?
