Notice
Recent Posts
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
- JS setInterval
- JS classList
- JS value속성
- JS form
- CSS속성정리
- JS clearInterval
- JS 연산
- JS append
- js 변수
- JS 숫자
- JS 기초
- JS 화살표함수
- JS setTimeout
- JS 함수
- HTML기초
- JS appendChild
- JS localStorage
- JS typeof연산자
- JS 스코프
- JS redirection
- CSS기초
- JS preventDefault
- JS null undefined
- JS prompt
- JS 타이머기능
- JS 삼항연산
- JS form action
- git 협업셋팅
- JS 데이터타입
- JS 형변환
Archives
공부기록용
React입문 1주차(Props Children) 본문
// src/App.js
import React from "react";
function User(props) {
console.log(props)
return <div>{props.name}</div>;
}
function App() {
const name = "상위컴포넌트이름"
return <User name={name}/>;
}
export default App;
Props Children
<User hello='안녕하세요'> 이렇게 props를 보내던 방식과는 조금 다르다
정보를 받는 방식은 기존과 동일합니다. 대신 그 이름이 children 으로 정해져 있다.
// src/App.js
import React from "react";
function User(props) {
console.log('props', props);
return <div>{props.children}</div>; // 2.react에서는 자동적으로 children props를 가지고 있다고 인식함
}
function App() {
return <User>안녕하세요</User>; // 1. 열고 닫는 태그를 사용해서 정보를 자식 컴포넌트에 전달해주면
}
export default App;
> User 컴포넌트에서 props.children을 받아 렌더링 해
Props Children 사용 경우
Layout 컴포넌트를 만들 때 자주 사용
Layout 컴포넌트 안에는 header 라는 컴포넌트가 있고, header 아래에 {props.children} 를 통해서 props를 받아 렌더링 하고 있다. 즉, Layout 컴포넌트가 쓰여지는 모든 곳에서 <Layout>…</Layout> 안에 있는 정보를 받아서 가져올 수 있는 것이다.
// src/About.js
import React from "react";
import Layout from "./components/Layout";
function About() {
return (
<Layout>
<div>여긴 About의 컨텐츠가 들어갑니다.</div>
</Layout>
);
}
export default About;
> 태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props
> 그러니까 미리 만들어둔 데이터를 일반적인 props처럼 부모 컴포넌트를 지정할 필요없이 import를 지정해서 children이라는 명목하에 동일하게 받아온다고 생각하면 되는 것 같음
'📚강의록📚 > 스파르타)React' 카테고리의 다른 글
React입문 1주차(state) (0) | 2023.06.25 |
---|---|
React입문 1주차(Props 추출) (0) | 2023.06.24 |
React입문 1주차(Props) (0) | 2023.06.24 |
React입문 1주차(JSX) (0) | 2023.06.24 |
React입문 1주차(React Component) (0) | 2023.06.24 |
Comments