[React] props

props는 컴포넌트 속성을 설정할 때 사용하는 요소

 

props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

즉, 상위컴포넌트의 데이터를 하위컴포넌트에서 사용. (ex) App 컴포넌트가 부모컴포넌트)

 

EX)

App.js

import './App.css';
// import { Component } from 'react';
import React from 'react';
import MyComponent from './MyComponent';

const App = () =>{
  return <MyComponent name="React"/>
}
// const App = () => <MyComponent/> 
//위와 아래는 같은 의미를 나타냄.
export default App;

 

MyComponent.js

import React from "react";

const MyComponent = props => {
  return <div>안녕하세요, 제 이름은 {props.name}입니다. </div>;
};

export default MyComponent;

 

App에서 MyComponent의 name을 설정해준 후,

MyComponent에서는 App(부모)에서 설정한 name값을 받기 위해 props를 사용하였다.

 

만약 여기서, App.js에서 MyComponent name을 설정해주지 않는다면

화면에 나오는 값은 안녕하세요, 제 이름은 입니다. 라고 출력이 될 것 이다.

 

그래서 defaultProps를 사용하여 기본 이름을 정의해준다.

 

MyComponent.js 에 추가

MyComponent.defaultProps = {
  name:"기본 이름"
}

위와 같은 코드는

안녕하세요, 제이름은 기본 이름입니다. 라고 출력이 될 것 이다.

 

만약, 컴포넌트를 사용할 때 태그 사이의 내용을 보여주고 싶다면 children을 사용해야한다.

ex)

App.js

import './App.css';
// import { Component } from 'react';
import React from 'react';
import MyComponent from './MyComponent';

const App = () =>{
  return <MyComponent>리액트</MyComponent>
}
// const App = () => <MyComponent/> 
//위와 아래는 같은 의미를 나타냄.
export default App;

MyComponent.js

import React from "react";

const MyComponent = props => {
  return <div>안녕하세요, 제 이름은 {props.name}입니다. <br/>
  children 값은 {props.children}
  입니다.
  </div>;

};

MyComponent.defaultProps = {
  name:"기본 이름"
}
export default MyComponent;