[REACT] props를 통해 컴포넌트 값 전달, defaultProps 기본값 설정, props.children 컴포넌트 태그 사이의 값 렌더링

props 를 통해 컴포넌트에게 값 전달하기

App.js

import React from 'react';
import Hello from './Hello';
 
function App() {
  return (
    <Hello name="react" />
  );
}
 
export default App;

 

Hello.js

import React from 'react';
 
function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}
 
export default Hello;

• App.js에서 Hello컴포넌트한테 name이라는 변수로 react라는 값을 넘겨준다.
• 그러면 Hello의 props로 {name: "react"}의 형태로 값이 넘어온다.
• 그래서 Hello컴포넌트에서 props.name으로 쓸 수 있다.

 

 

함수의 파라미터에서 비구조화 할당 문법을 사용

Hello.js

import React from 'react';
 
function Hello({name }) {
  return <div>안녕하세요 {name}</div>
}
 
export default Hello;

Hello에서 이렇게 파라미터에서부터 필요한 값만 이름으로 가져올 수 있다.

 

 

 

defaultProps 로 기본값 설정

Hello.js

import React from 'react';
 
function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}
 
Hello.defaultProps = {
  name: '이름없음'
}
 
export default Hello;

defaultProps로 기본 값을 설정해주어,

부모 props에서 해당 값이 넘어오지 않았을때 가지는 기본 값을 설정해준다.

 

 

 

 

props.children

컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회하면 된다.

 

Wrapper.js

import React from 'react';
 
function Wrapper() {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
 
    </div>
  )
}
 
export default Wrapper;

 

App.js

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';
 
function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </Wrapper>
  );
}
 
export default App;

 

 

styled-component가 아닌 그냥 컴포넌트로 이렇게 만들면

Wrapper사이에 있는 Hello컴포넌트가 안뜬다.

Wrapper.js

import React from 'react';
 
function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}
 
export default Wrapper;

props.children을 렌더링 해주어야한다

 

 

 

 

 

 

출처: 벨로퍼트