18. React 데이터 흐름(Data Flow)
1. React 데이터 흐름이란?
React 데이터 흐름(Data Flow)은 데이터가 컴포넌트 사이를 어떻게 이동하는지를 의미합니다.
React는 단방향 데이터 흐름(One-Way Data Flow)을 사용합니다.
즉, 데이터는 항상 부모 → 자식 방향으로만 전달됩니다.
부모
↓
Props
↓
자식
이 원칙 덕분에 데이터의 흐름을 예측하기 쉽고, 유지보수가 편리합니다.
2. React 전체 흐름
React 애플리케이션은 일반적으로 아래 순서로 동작합니다.
State 생성
↓
Props 전달
↓
화면 출력
↓
사용자 이벤트
↓
State 변경
↓
React 렌더링
↓
화면 업데이트
이 흐름을 이해하면 대부분의 React 코드가 자연스럽게 읽힙니다.
3. App이 시작점
React는 main.jsx에서 시작합니다.
main.jsx
↓
App.jsx
App.jsx는 화면을 조립하는 부모 컴포넌트입니다.
4. 부모에서 자식으로 데이터 전달
예를 들어 코스 데이터를 전달하는 경우입니다.
<CourseCard
course={course}
/>
course 데이터가 Props를 통해 자식으로 전달됩니다.
자식에서는
function CourseCard({
course
}){
}
처럼 받아서 화면에 출력합니다.
5. State는 어디에 있을까?
State는 데이터를 실제로 관리하는 곳입니다.
예를 들어
const [liked,setLiked]
=
useState(false);
좋아요 상태는
CourseCard 안에서 관리됩니다.
6. Event 발생
사용자가
좋아요 클릭
하면
onClick
이 실행됩니다.
setLiked(
!liked
);
State가 변경됩니다.
7. React 렌더링
State가 변경되면
React는
Component
↓
다시 실행
합니다.
그리고 화면도 자동으로 변경됩니다.
♡
↓
♥
8. 부모 State 변경
자식이 부모 State를 변경해야 하는 경우
부모
<CourseCard
onOpen={
setSelectedCourse
}
/>
자식
<button
onClick={()=>{
onOpen(course)
}}
>
버튼을 누르면
부모의
selectedCourse
가 변경됩니다.
9. useEffect 실행
State가 변경되면
필요한 작업을 실행합니다.
useEffect(()=>{
console.log(
"좋아요 변경"
);
},[liked]);
10. localStorage 저장
좋아요
localStorage.setItem(
"liked",
liked
);
새로고침
↓
useEffect()
↓
복원
11. 동부산CC 예제
CourseSection
↓
Props
↓
CourseCard
↓
좋아요 클릭
↓
setLiked()
↓
React 렌더링
↓
♥ 출력
↓
localStorage 저장
12. 예약 흐름
사용자 입력
↓
onChange
↓
handleChange
↓
State 변경
↓
예약 버튼
↓
onSubmit
↓
localStorage 저장
↓
예약 완료
13. 모달 흐름
상세보기 클릭
↓
onOpen(course)
↓
부모 State 변경
↓
selectedCourse 저장
↓
modal=true
↓
CourseModal 출력
14. React 전체 데이터 흐름
App
↓
Props
↓
Component
↓
Event
↓
State
↓
useEffect
↓
React 렌더링
↓
화면 변경
15. React 실행 순서
main.jsx
↓
App.jsx
↓
Component 실행
↓
JSX 반환
↓
브라우저 출력
↓
사용자 이벤트
↓
State 변경
↓
렌더링
↓
화면 변경
16. 데이터 흐름과 컴포넌트 구조
App
↓
CourseSection
↓
CourseCard
↓
Button
데이터는 항상 위에서 아래로 전달됩니다.
17. React에서 가장 중요한 연결
Props
↓
State
↓
Event
↓
useEffect
↓
렌더링
이 다섯 가지가 React의 핵심입니다.
18. 동부산CC 프로젝트 전체 흐름
Header
↓
Hero
↓
CourseSection
↓
CourseCard
↓
Reservation
↓
Notice
↓
Footer
각 컴포넌트는
Props와 State를 이용하여
데이터를 주고받습니다.
정리
React는 단방향 데이터 흐름(One-Way Data Flow)을 사용합니다.
데이터는 항상 부모 컴포넌트에서 자식 컴포넌트로 Props를 통해 전달되며, 사용자의 이벤트가 발생하면 State가 변경되고 React가 자동으로 화면을 다시 렌더링합니다.
필요한 후속 작업은 useEffect에서 처리하며, localStorage를 함께 사용하면 새로고침 후에도 데이터를 유지할 수 있습니다.
동부산CC 프로젝트에서는 코스 목록 출력, 좋아요, 예약하기, 상세보기 모달 등 모든 기능이 Props → Event → State → useEffect → 렌더링이라는 동일한 데이터 흐름 안에서 동작합니다.
React를 이해하는 가장 중요한 방법은 문법을 따로 외우는 것이 아니라, 데이터가 어떻게 이동하는지 흐름을 따라가는 것입니다.
1. React 데이터 흐름이란?
React 데이터 흐름(Data Flow)은 데이터가 컴포넌트 사이를 어떻게 이동하는지를 의미합니다.
React는 단방향 데이터 흐름(One-Way Data Flow)을 사용합니다.
즉, 데이터는 항상 부모 → 자식 방향으로만 전달됩니다.
부모
↓
Props
↓
자식
이 원칙 덕분에 데이터의 흐름을 예측하기 쉽고, 유지보수가 편리합니다.
2. React 전체 흐름
React 애플리케이션은 일반적으로 아래 순서로 동작합니다.
State 생성
↓
Props 전달
↓
화면 출력
↓
사용자 이벤트
↓
State 변경
↓
React 렌더링
↓
화면 업데이트
이 흐름을 이해하면 대부분의 React 코드가 자연스럽게 읽힙니다.
3. App이 시작점
React는 main.jsx에서 시작합니다.
main.jsx
↓
App.jsx
App.jsx는 화면을 조립하는 부모 컴포넌트입니다.
4. 부모에서 자식으로 데이터 전달
예를 들어 코스 데이터를 전달하는 경우입니다.
<CourseCard
course={course}
/>
course 데이터가 Props를 통해 자식으로 전달됩니다.
자식에서는
function CourseCard({
course
}){
}
처럼 받아서 화면에 출력합니다.
5. State는 어디에 있을까?
State는 데이터를 실제로 관리하는 곳입니다.
예를 들어
const [liked,setLiked]
=
useState(false);
좋아요 상태는
CourseCard 안에서 관리됩니다.
6. Event 발생
사용자가
좋아요 클릭
하면
onClick
이 실행됩니다.
setLiked(
!liked
);
State가 변경됩니다.
7. React 렌더링
State가 변경되면
React는
Component
↓
다시 실행
합니다.
그리고 화면도 자동으로 변경됩니다.
♡
↓
♥
8. 부모 State 변경
자식이 부모 State를 변경해야 하는 경우
부모
<CourseCard
onOpen={
setSelectedCourse
}
/>
자식
<button
onClick={()=>{
onOpen(course)
}}
>
버튼을 누르면
부모의
selectedCourse
가 변경됩니다.
9. useEffect 실행
State가 변경되면
필요한 작업을 실행합니다.
useEffect(()=>{
console.log(
"좋아요 변경"
);
},[liked]);
10. localStorage 저장
좋아요
localStorage.setItem(
"liked",
liked
);
새로고침
↓
useEffect()
↓
복원
11. 동부산CC 예제
CourseSection
↓
Props
↓
CourseCard
↓
좋아요 클릭
↓
setLiked()
↓
React 렌더링
↓
♥ 출력
↓
localStorage 저장
12. 예약 흐름
사용자 입력
↓
onChange
↓
handleChange
↓
State 변경
↓
예약 버튼
↓
onSubmit
↓
localStorage 저장
↓
예약 완료
13. 모달 흐름
상세보기 클릭
↓
onOpen(course)
↓
부모 State 변경
↓
selectedCourse 저장
↓
modal=true
↓
CourseModal 출력
14. React 전체 데이터 흐름
App
↓
Props
↓
Component
↓
Event
↓
State
↓
useEffect
↓
React 렌더링
↓
화면 변경
15. React 실행 순서
main.jsx
↓
App.jsx
↓
Component 실행
↓
JSX 반환
↓
브라우저 출력
↓
사용자 이벤트
↓
State 변경
↓
렌더링
↓
화면 변경
16. 데이터 흐름과 컴포넌트 구조
App
↓
CourseSection
↓
CourseCard
↓
Button
데이터는 항상 위에서 아래로 전달됩니다.
17. React에서 가장 중요한 연결
Props
↓
State
↓
Event
↓
useEffect
↓
렌더링
이 다섯 가지가 React의 핵심입니다.
18. 동부산CC 프로젝트 전체 흐름
Header
↓
Hero
↓
CourseSection
↓
CourseCard
↓
Reservation
↓
Notice
↓
Footer
각 컴포넌트는
Props와 State를 이용하여
데이터를 주고받습니다.
정리
React는 단방향 데이터 흐름(One-Way Data Flow)을 사용합니다.
데이터는 항상 부모 컴포넌트에서 자식 컴포넌트로 Props를 통해 전달되며, 사용자의 이벤트가 발생하면 State가 변경되고 React가 자동으로 화면을 다시 렌더링합니다.
필요한 후속 작업은 useEffect에서 처리하며, localStorage를 함께 사용하면 새로고침 후에도 데이터를 유지할 수 있습니다.
동부산CC 프로젝트에서는 코스 목록 출력, 좋아요, 예약하기, 상세보기 모달 등 모든 기능이 Props → Event → State → useEffect → 렌더링이라는 동일한 데이터 흐름 안에서 동작합니다.
React를 이해하는 가장 중요한 방법은 문법을 따로 외우는 것이 아니라, 데이터가 어떻게 이동하는지 흐름을 따라가는 것입니다.
#18. React 데이터 흐름(Data Flow)