[TIL] props

newjinny·2021년 10월 31일
0

React

목록 보기
1/2
post-thumbnail

🔍 props

props란 properties의 줄인 표현으로 컴포넌트 속성값이다.
부모컴포넌트가 자식컴포넌트에게 데이터와 기능을 넘겨줄 때 사용한다.


1. JSX 내부에서 props를 렌더링해보자!

💻 jsx내부에서 { }로 감싸주면 끝!

const MyComponent = props =>{
  return <div> 제 이름은 {props.name}입니다.</div>;
};//name이라는 props를 렌더링!

MyComponent.defaultProps = {
  name: '신유진'
};

export default MyComponent;

// 제 이름은 신유진 입니다.

2. props.children

컴포넌트 태그 사이에 넣은 값을 보고 싶을 때 props.children 을 사용

//자식
import MyComponent from "./MyComponent";

const App = () =>{
return <MyComponent>수박이</MyComponent>; 
}

ewport default App;

//부모
const MyComponent = props =>{
  return <div> 제 이름은 {props.name}입니다.
   우리집 강아지 이름은 {props.childred}입니다.</div>;
};

MyComponent.defaultProps = {
  name: '신유진'
};

export default MyComponent;


// 제 이름은 신유진 입니다.
//우리집 강아지 이름은 수박이 입니다.
profile
I Love Pizza, 나만의 토핑으로 한조각씩 맞춰가는 중

0개의 댓글