[React] props - 2 (feat. defaultProps, child)

1. 개요

이번에는 defaultProps와 child에 대해서 알아보겠다.

 

 

 

2. defaultProps

defaultProps는 말그대로 컴포넌트에 해당 props가 존재하지 않을때 기본 props를 설정한다.

2-1. 코드

먼저 MyProps.js를 보자.

import React from 'react';

function MyProps({name, color}) {
    return (
        <div style={color}>안녕하세요 {name}</div>
    );
}

// defaultProps 설정 (아무 props를 입력하지 않을때 기본으로 설정되는 props)
MyProps.defaultProps = {
    name: "이름없음"
}

export default MyProps;

Hello.defaultProps 구문을 보면, MyProps 컴포넌트에 name이라는 props가 없어도 defaultProps로 인해 name props은 '이름없음' 이라는 텍스트 값으로 세팅된다.

App.js

improt React from 'react';
import MyProps from './props/MyProps';

function App(){
	return(
    	<div>
            <MyProps color="green" />
        </div>
    );
}

export dafault MyProps;

 

 

 

 

3. child

child는 해당 컴포넌트의 하위 컴포넌트를 조회하고 싶을때 사용한다.

 

3-1. 코드

먼저 Wrapper.js를 먼저 보자.

import React from 'react';

// App.js에 구성되어 있는 <Wrapper /> 하위 컴포넌트들을 가져오기 위해 {children} 사용
function Wrapper({children}) {
    const style = {
        border : '2px solid black',
        padding : '50px',
    };

    // Wrapper의 하위 컴포넌트가 제대로 가져왔는지 확인하기 위해 스타일을 적용해본다.
    return (
        <div style={style}>
            {children}
        </div>
    );
}

export default Wrapper;

 

App.js (미리 공부한 내용이 포함되어있어 블로그의 소스코드와 값이 안맞는 경우가 있다. 양해해서 봐주시길 바란다.)

import React from 'react';
import Hello from './props/Hello';
import Wrapper from './props/children/Wrapper';
import Counter from './useState/Counter';
import InputSample_01 from './useState/InputUseState/InputSample_01';
import InputSample_02 from './useState/InputUseState/InputSample_02';
import UserList from './list/UserList';
import './App.css';


function App() {
  const data = 10;
  // 인라인 스타일은 객체 형태로 사용하기
  const style = {
    backgroundColor : "black",
    color : "aqua",
    fontSize : 24,
    padding : '1rem'
  }

  const users =
    [
        {
            id : 1,
            username : "tester01",
            email : "tester01@test.com"
        },
        {
            id : 2,
            username : "tester02",
            email : "tester02@test.com"
        },
        {
            id : 3,
            username : "tester03",
            email : "tester03@test.com"
        }
    ];

  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true} />
      <Hello color="green" />                       {/* name props를 설정하지 않으면 defaultProps가 적용된다. */}
      <div style={style}>현재 수량 : {data}</div>     {/* JSX에 js 변수값 넣기 */}
      <div className="gray-box"></div>
      
      <br></br>
      <br></br>

      <Counter />

      <br></br>
      <br></br>

      <InputSample_01 />

      <br></br>
      <br></br>

      <InputSample_02 />

      <br></br>
      <br></br>

      <UserList userList={users} />
    </Wrapper>
  );
}

export default App;

 

3-2. 결과

결과를 보면, 하위 컴포넌트들을 감싸는 border와 padding 50px이 적용된 것을 알 수 있다.

 

 

 

 

잘못된 내용이 있다면 언제든지 댓글남겨주시면 감사하겠습니다!