[React] props를 통해 값 전달

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

리액트에선 props를 이용하여

자식 컴포넌트에게 값을 전달 해줄 수 있음.

 

 

App.js (부모컴포넌트)

import React from 'react';
import './App.css';
import Hello from './component/Hello';

class App extends React.Component {
  render() {
    return (
      <>
      {/* props로 값전달할 props설정 */}
        <Hello name='react' color='red' />
        <Hello color='red' />
      </>
    );
  }
}

export default App;

Hello.js (자식 컴포넌트)

import React from 'react';

// 비구조 할당으로 사용하지 않을경우
//const Hello = (props) => {
//  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>;
//};

// 비구조 할당으로 props 전달받아 사용할 경우
const Hello = ({ color, name }) => {
  return <div style={{ color: color }}>안녕하세요 {name}</div>;
};

// name이 props가 없는 경우 
// 기본값설정으로 name은 '이름없음'으로 전달
Hello.defaultProps = {
  name: '이름없음',
};

export default Hello;

 

화면 결과값

 

 

Wrapper.js를 이용하여 공통 css를 만들기

Wrapper.js

import React from 'react';

// children은 부모컴포넌트에서 Wrapper가 감싸고 있는 안에 내용
const Wrapper = ({ children }) => {
  const style = {
    border: '2px solid black',
    padding: 16,
  };

// {children} props를 전달 해줘야지만 css가 적용됨
  return <div style={style}>{children}</div>;
};

export default Wrapper;

 

App.js

import React from 'react';
import './App.css';
import Hello from './component/Hello';
import Wrapper from './component/Wrapper';
class App extends React.Component {
  render() {
    return (
      <>
      {/*
      	Wrpper로 감싸여 있는 children인 Hello.js 전체 영향을 받아
        Wrpper의 style이 적용됨
      */}
        <Wrapper>
          <Hello name='react' color='red' />
          <Hello color='red' />
        </Wrapper>
      </>
    );
  }
}

export default App;

화면 결과값