06. Props(프로퍼티)
1. Props란?
Props(Properties)는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법입니다.
React에서는 컴포넌트끼리 직접 데이터를 공유하지 않습니다.
항상
부모
↓
자식
방향으로만 데이터를 전달합니다.
2. Props를 사용하는 이유
예를 들어 동부산CC에는
EAST COURSE
WEST COURSE
VALLEY COURSE
3개의 코스가 있습니다.
HTML 방식이라면
<div>
EAST COURSE
</div>
<div>
WEST COURSE
</div>
<div>
VALLEY COURSE
</div>
처럼 모두 따로 작성해야 합니다.
React에서는
<CourseCard />
<CourseCard />
<CourseCard />
하나의 컴포넌트를 재사용합니다.
3. 부모 컴포넌트
예를 들어
CourseSection.jsx
<CourseCard
title="EAST COURSE"
level="중상급"
/>
여기서
title
level
이 Props입니다.
4. 자식 컴포넌트
CourseCard.jsx
function CourseCard(props){
return(
<>
<h2>{props.title}</h2>
<p>{props.level}</p>
</>
)
}
출력
EAST COURSE
중상급
5. 구조분해 할당
실무에서는 대부분 이렇게 작성합니다.
function CourseCard({
title,
level
}){
}
그러면
props.title
대신
title
만 사용하면 됩니다.
예제
function CourseCard({
title,
level
}){
return(
<>
<h2>{title}</h2>
<p>{level}</p>
</>
)
}
6. 문자열 전달
<CourseCard
title="EAST COURSE"
/>
받기
function CourseCard({
title
}){
}
7. 숫자 전달
<CourseCard
par={36}
/>
받기
function CourseCard({
par
}){
}
출력
{par}
8. 객체 전달
동부산CC에서는 대부분 객체를 전달합니다.
const course={
name:"EAST COURSE",
par:36,
distance:"3210m"
}
전달
<CourseCard
course={course}
/>
받기
function CourseCard({
course
}){
}
사용
{course.name}
{course.par}
9. 배열 전달
부모
const courses=[
"EAST",
"WEST",
"VALLEY"
]
전달
<CourseList
courses={courses}
/>
자식
function CourseList({
courses
}){
}
출력
courses.map(...)
10. 함수 전달
React에서 가장 많이 사용하는 Props입니다.
부모
<CourseCard
onOpen={setSelectedCourse}
/>
자식
<button
onClick={()=>onOpen(course)}
>
상세보기
</button>
버튼을 누르면
부모의
setSelectedCourse()
가 실행됩니다.
11. 동부산CC 예제
부모
{
courseData.map((course)=>(
<CourseCard
key={course.id}
course={course}
/>
))
}
여기서
course
가 Props입니다.
자식
function CourseCard({
course
}){
return(
<>
<h2>
{course.name}
</h2>
</>
)
}
12. 데이터 흐름
React는
부모
↓
Props 전달
↓
자식
↓
화면 출력
순으로 동작합니다.
반대로
자식
↓
부모
직접 데이터를 보낼 수는 없습니다.
대신
함수(Props)
를 이용합니다.
13. Props 특징
Props는
읽기 전용(Read Only)입니다.
예를 들어
course.name="WEST"
처럼 수정하면 안 됩니다.
Props는 부모가 관리하고
자식은 화면에 출력만 합니다.
14. Props와 State 차이
Props State
부모가 전달 컴포넌트가 직접 관리
읽기 전용 변경 가능
화면 출력용 화면 상태 관리
수정 불가 setState(useState)로 변경
예를 들어
코스 이름
은 Props가 적합합니다.
반면
좋아요
모달 열림
예약 입력값
처럼 사용자 동작에 따라 바뀌는 값은 State가 적합합니다.
정리
Props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 기능입니다.
React에서는 항상 부모 → 자식 방향으로 데이터를 전달하며, Props는 읽기 전용이기 때문에 자식 컴포넌트에서 직접 수정할 수 없습니다.
문자열, 숫자, 객체, 배열, 함수 등 다양한 형태의 데이터를 전달할 수 있으며, 함수형 Props를 이용하면 자식 컴포넌트에서 부모의 상태를 변경하는 동작도 구현할 수 있습니다.
동부산CC 프로젝트에서는 CourseSection이 부모 컴포넌트가 되어 CourseCard에 코스 정보를 Props로 전달하고, CourseCard는 전달받은 데이터를 화면에 출력하는 방식으로 구현할 수 있습니다.
1. Props란?
Props(Properties)는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법입니다.
React에서는 컴포넌트끼리 직접 데이터를 공유하지 않습니다.
항상
부모
↓
자식
방향으로만 데이터를 전달합니다.
2. Props를 사용하는 이유
예를 들어 동부산CC에는
EAST COURSE
WEST COURSE
VALLEY COURSE
3개의 코스가 있습니다.
HTML 방식이라면
<div>
EAST COURSE
</div>
<div>
WEST COURSE
</div>
<div>
VALLEY COURSE
</div>
처럼 모두 따로 작성해야 합니다.
React에서는
<CourseCard />
<CourseCard />
<CourseCard />
하나의 컴포넌트를 재사용합니다.
3. 부모 컴포넌트
예를 들어
CourseSection.jsx
<CourseCard
title="EAST COURSE"
level="중상급"
/>
여기서
title
level
이 Props입니다.
4. 자식 컴포넌트
CourseCard.jsx
function CourseCard(props){
return(
<>
<h2>{props.title}</h2>
<p>{props.level}</p>
</>
)
}
출력
EAST COURSE
중상급
5. 구조분해 할당
실무에서는 대부분 이렇게 작성합니다.
function CourseCard({
title,
level
}){
}
그러면
props.title
대신
title
만 사용하면 됩니다.
예제
function CourseCard({
title,
level
}){
return(
<>
<h2>{title}</h2>
<p>{level}</p>
</>
)
}
6. 문자열 전달
<CourseCard
title="EAST COURSE"
/>
받기
function CourseCard({
title
}){
}
7. 숫자 전달
<CourseCard
par={36}
/>
받기
function CourseCard({
par
}){
}
출력
{par}
8. 객체 전달
동부산CC에서는 대부분 객체를 전달합니다.
const course={
name:"EAST COURSE",
par:36,
distance:"3210m"
}
전달
<CourseCard
course={course}
/>
받기
function CourseCard({
course
}){
}
사용
{course.name}
{course.par}
9. 배열 전달
부모
const courses=[
"EAST",
"WEST",
"VALLEY"
]
전달
<CourseList
courses={courses}
/>
자식
function CourseList({
courses
}){
}
출력
courses.map(...)
10. 함수 전달
React에서 가장 많이 사용하는 Props입니다.
부모
<CourseCard
onOpen={setSelectedCourse}
/>
자식
<button
onClick={()=>onOpen(course)}
>
상세보기
</button>
버튼을 누르면
부모의
setSelectedCourse()
가 실행됩니다.
11. 동부산CC 예제
부모
{
courseData.map((course)=>(
<CourseCard
key={course.id}
course={course}
/>
))
}
여기서
course
가 Props입니다.
자식
function CourseCard({
course
}){
return(
<>
<h2>
{course.name}
</h2>
</>
)
}
12. 데이터 흐름
React는
부모
↓
Props 전달
↓
자식
↓
화면 출력
순으로 동작합니다.
반대로
자식
↓
부모
직접 데이터를 보낼 수는 없습니다.
대신
함수(Props)
를 이용합니다.
13. Props 특징
Props는
읽기 전용(Read Only)입니다.
예를 들어
course.name="WEST"
처럼 수정하면 안 됩니다.
Props는 부모가 관리하고
자식은 화면에 출력만 합니다.
14. Props와 State 차이
Props State
부모가 전달 컴포넌트가 직접 관리
읽기 전용 변경 가능
화면 출력용 화면 상태 관리
수정 불가 setState(useState)로 변경
예를 들어
코스 이름
은 Props가 적합합니다.
반면
좋아요
모달 열림
예약 입력값
처럼 사용자 동작에 따라 바뀌는 값은 State가 적합합니다.
정리
Props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 기능입니다.
React에서는 항상 부모 → 자식 방향으로 데이터를 전달하며, Props는 읽기 전용이기 때문에 자식 컴포넌트에서 직접 수정할 수 없습니다.
문자열, 숫자, 객체, 배열, 함수 등 다양한 형태의 데이터를 전달할 수 있으며, 함수형 Props를 이용하면 자식 컴포넌트에서 부모의 상태를 변경하는 동작도 구현할 수 있습니다.
동부산CC 프로젝트에서는 CourseSection이 부모 컴포넌트가 되어 CourseCard에 코스 정보를 Props로 전달하고, CourseCard는 전달받은 데이터를 화면에 출력하는 방식으로 구현할 수 있습니다.
#06. Props(프로퍼티)