Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 컴포넌트
- 풀스택 개발
- tanStack Query
- 비동기 요청 처리
- JavaScript
- 국제화(i18n)
- 퍼포먼스 최적화
- React
- Node.js
- 웹 성능
- 동적 웹 페이지
- dom
- 웹 성능 최적화
- 패키지 스크립트
- 리액트 기초
- #프론트엔드개발
- 자바스크립트공부
- jsx
- 코드리뷰
- 프론트엔드
- 자바스크립트
- 프라미스체이닝
- fe
- 비동기프로그래밍
- html
- Promise
- 웹 개발
- 상태 관리 라이브러리
- 웹개발
- css
Archives
- Today
- Total
sodol-dotcom
Props 전달 과정(부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기) 본문
1. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법: `props`
- 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하려면, `props`라는 특별한 방법을 사용한다.
- `props`는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 필요한 속성이다. 예를 들어, 자식 컴포넌트에 이름이나 나이 같은 정보를 전달하고 싶을 때, `props`로 보낼 수 있다.
React에서 자식 컴포넌트가 props를 매개변수로 받는 이유
https://sodol-dotcom.tistory.com/78
2. `props`가 객체로 전달되는 이유
- 부모 컴포넌트에서 여러 데이터를 전달하려면 `props`를 객체 형태로 묶어서 보낸다. 이 객체 안에는 전달하려는 데이터가 프로퍼티로 저장되어 있다.
- 예를 들어, `name`과 `age`라는 두 가지 정보를 자식 컴포넌트로 보내면, `props`라는 객체 안에 `name`과 `age`가 각각 프로퍼티로 들어간다.
// 부모 컴포넌트
import "./App.css";
import Button from "./components/Button";
function App() {
return (
<>
<Button text={"메일"} color={"red"} />
<Button text={"카페"} />
<Button text={"블로그"} />
</>
);
}
export default App;
3. 자식 컴포넌트에서 `props` 받기
- 자식 컴포넌트는 부모 컴포넌트로부터 전달된 `props`를 받아 사용할 수 있다.
- `props`는 항상 객체로 전달되고, 그 안에 부모가 보낸 데이터가 담겨 있다.
// 자식 컴포넌트
const Button = (props) => {
console.log(props);
return <button>{props.text}</button>;
};
export default Button;
4. `console.log`로 확인
- 자식 컴포넌트에서 `console.log(props)로 확인해 보면, `props`가 하나의 객체로 전달된 것을 확인할 수 있다.
- 이 객체 안에는 부모가 보낸 데이터가 각각 프로퍼티로 들어가 있어서, 자식 컴포넌트는 그 프로퍼티들을 꺼내 사용할 수 있다.
5. 요약
부모 컴포넌트는 자식 컴포넌트에 여러 데이터를 `props`를 사용해 전달하고, 이 데이터는 객체 형태로 전달된다. 자식 컴포넌트는 이 객체를 받아서 그 안에 있는 데이터를 꺼내 사용할 수 있다. `console.log(prop)`로 확인하면, 객체 안에 전달된 데이터가 프로퍼티로 들어있다는 것을 알 수 있다.
'Frameworks & Libraries > React' 카테고리의 다른 글
React 컴포넌트에서 props의 기본값을 설정하는 방법: defaultProps (0) | 2024.10.04 |
---|---|
React에서 자식 컴포넌트가 props를 매개변수로 받는 이유 (0) | 2024.10.04 |
React에서 객체 전달을 위한 중괄호 사용법 이해하기 (0) | 2024.10.04 |
리액트에서 HTML을 자바스크립트처럼 쓰는 법: JSX 이해하기 (1) | 2024.10.04 |
Outlet 컴포넌트 (0) | 2024.09.12 |