TIL. React. <22.04.16>
오늘 해야 할 것
CS스터디 책 키워드 정리
디테일 페이지 만듬
공통IP 연결?
오늘 공부 한 것
props(property)란?
어디에도 있지만 어딘가에 연결되는것. 부모가 어딘가에 있으니 무서워 말고 props.객체를 읽어보자.
1. 프로퍼티(props)란?
- 프로퍼티, props라고 한다.
- 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다.(단방향 데이터 흐름 갖는다.)
- 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)
2. 사용방법?
- 프로퍼티에 문자열을 전달할 때는 큰따옴표("")를, 문자열 외의 값을 전달할 때는 중괄호({})를 사용한다.
2개의 프로퍼티 넘기기
App.js
import Main from './component/Main';
function App(){
return(
<div>
<Main name="강형원" color="blue"/>
<div>
);
}
Main.js
import React from 'react';
function Main(props){
return(
<div>
<main>
<h1 style={{color:props.color}}>안녕하세요. {props.name}입니다.</h1>
</main>
</div>
);
}
4. 프로퍼티 기본값 설정 및 필수값 설정
1) 기본값 설정
Main.js (name 프로퍼티가 없는 경우, 'Default'라는 값을 사용하게 처리
import React from 'react';
function Main({name, color}){
return(
<div>
<main>
<h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
</main>
</div>
);
}
Main.defaulProps = {
name: 'Default'
}
export default Main;
App.js
import React, {Component} from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';
function App(){
return (
<div>
<Header />
<Main color='blue'/>
<Footer />
</div>
)
}
export default App;
6.props.children 활용하기
-
children을 사용하여 내부에 있는 내용을 표현할 수 있다.
Wrapper.js
import React from 'react';
import Main from './Main';
function Wrapper(props){
const style = {
backgroundColor: 'yellow',
};
return (
<div style={style} />
);
}
export default Wrapper;
-기존에 사용하고 있던 Main 컴포넌트를 감싸보자. 메인 컴포넌트가 보이지 않게된다.
App.js
import React, {Component} from 'react';
import Header from './Header';
import Footer from './Footer';
import Main from './component/Main';
import Wrapper from './component/Wrapper';
function App() {
return (
<div>
<Header />
<Wrapper>
<Main color='blue'/>
</ Wrapper>
<Footer />
</div>
);
}
export default App;
-Wrapper컴포넌트에서 this.children을 렌더링 해보자.
import React from 'react';
function Wrapper(props) {
const style = {
backgroundColor: 'yellow',
}
return (
<div style={style}>
{props.children}
</div>
);
}
export default Wrapper;
-여러개의 자식을 사용할 수도 있다.
App.js
import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';
import Wrapper from './component/Wrapper';
function App() {
return (
<div>
<Header />
<Wrapper>
<Main name="강형원" color="blue"/>
<Main name="넘버원" color="black"/>
</Wrapper>
<Footer />
</div>
);
}
export default App;
Author And Source
이 문제에 관하여(TIL. React. <22.04.16>), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@podonamu01/TIL.-React.-22.04.16-t1fgckt9저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)