Lesson 02
- 학습 목표
- 컴포넌트 간 데이터 전달의 기본 개념인 props를 이해한다.
- 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 방법을 배운다.
- props를 활용해 컴포넌트를 재사용 가능하게 만드는 실습을 한다.
- props의 불변성(immutability)과 기본 사용 팁을 익힌다.
- props로 함수를 전달해 이벤트 핸들러(onClick 등)를 처리하는 방법을 배운다.
이번 주차는 1주차에서 배운 functional 컴포넌트를 기반으로, 컴포넌트가 데이터를 주고받는 방법에 초점을 맞춥니다. props는 React의 핵심 개념으로, 컴포넌트를 모듈화하고 동적 UI를 만드는 데 필수적입니다. 30~40분 세션에 맞춰 간단한 예시 위주로 진행하겠습니다.
0. 준비사항
Vite.js로 React 프로젝트가 이미 생성되어 있다고 가정합니다.
| 항목 | 버전/설명 |
|---|---|
| Node.js | v20.9.0 이상 |
| Editor | VS Code 추천 |
| 프로젝트 | Vite + React 프로젝트 (src/App.jsx, src/main.jsx 등 존재) |
기존 프로젝트의 src/App.jsx와 src/main.jsx를 사용합니다.
STEP 1 Props 기본 개념 이해하기
Props(Properties의 약자)는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터입니다. 이는 컴포넌트를 재사용할 때 유용합니다. 예를 들어, 같은 버튼 컴포넌트를 사용하되 텍스트를 다르게 전달할 수 있어요.
- 왜 props가 필요한가?: 컴포넌트가 고정된 UI만 렌더링하면 재사용성이 떨어집니다. props를 통해 외부 데이터를 받아 동적으로 렌더링할 수 있습니다.
- 특징:
- 불변성: props는 자식 컴포넌트에서 변경할 수 없습니다. (변경하려면 부모에서 새 props를 전달해야 함)
- 타입: 문자열, 숫자, 객체, 배열, 함수 등 다양한 데이터를 전달할 수 있습니다.
STEP 2 간단한 자식 컴포넌트 만들기
새 파일 Greeting.jsx를 src 폴더에 생성하세요. 이는 props를 받는 자식 컴포넌트입니다.
// src/Greeting.jsx
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;- 설명:
props객체를 매개변수로 받아,props.name처럼 접근합니다. JSX 안에서{}로 동적으로 렌더링합니다.
2-1 App.jsx 수정 (부모 컴포넌트에서 props 전달)
src/App.jsx를 부모 컴포넌트로 사용해 Greeting을 불러오고 props를 전달합니다.
// src/App.jsx
import Greeting from './Greeting';
function App() {
return (
<div>
<Greeting name="React Learner" />
<Greeting name="Grok" />
</div>
);
}
export default App;- 설명:
<Greeting name="React Learner" />처럼 HTML 속성(attribute) 형태로 props를 전달합니다. 여러 props를 전달할 수 있어요 (e.g.,age={25}).
STEP 3 고급 예시: 객체 props 전달
Props로 객체를 전달해 보세요. Greeting.jsx를 수정합니다.
// src/Greeting.jsx
function Greeting(props) {
return (
<div>
<h1>Hello, {props.user.name}!</h1>
<p>Age: {props.user.age}</p>
</div>
);
}
export default Greeting;App.jsx 수정:
// src/App.jsx
import Greeting from './Greeting';
function App() {
const user1 = { name: 'Alice', age: 30 };
const user2 = { name: 'Bob', age: 25 };
return (
<div>
<Greeting user={user1} />
<Greeting user={user2} />
</div>
);
}
export default App;- 설명:
user={user1}처럼 객체를 전달하고,props.user.name으로 접근합니다. 이는 복잡한 데이터를 쉽게 전달합니다.
React Study: Props 실습 확장
1주차 회원가입 폼에 props 적용해 보세요.
- FormInput.jsx 컴포넌트 생성: label과 placeholder를 props로 받음.
- 부모 컴포넌트에서 여러 입력 필드에 props 전달 (e.g., name, email).
예시 코드:
// src/FormInput.jsx
function FormInput(props) {
return (
<div>
<label>{props.label}</label>
<input type="text" placeholder={props.placeholder} />
</div>
);
}
export default FormInput;// src/App.jsx
import FormInput from './FormInput';
function App() {
return (
<form>
<FormInput label="Name" placeholder="Enter your name" />
<FormInput label="Email" placeholder="Enter your email" />
</form>
);
}
export default App;숙제
- 위 실습을 바탕으로 3개 이상의 props를 사용하는 컴포넌트 만들기 (e.g., 버튼에 color, text, onClick 전달).
- React 공식 문서 컴포넌트에 Props 전달하기 섹션 읽고,
spread문법으로도 컴포넌트 만들어보기.- 구조분해할당 이라고도 합니다.
다음 주차: useState로 상태 관리 배우기. 질문 있으시면 언제든! 🚀
.png)