[react.js]props.children 사용법

설명하는 것보다 간단한 예제로 이해하는 것이 좋을것 같아요.

 

App.js

첫번째 App.js 를 아래와 같이 구현할것

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        App
      </div>
    );
  }
}

export default App;

 

Child_test.js

테스트할 children 파일을 생성

import React, { Component } from 'react';

class Child_test extends Component {
  render() {
    return <div>child_test</div>;
  }
}

export default Child_test;

 

App.js 에 Child_test.js 연결

import React, { Component } from 'react';
import ChildTest from './Child_test';

class App extends Component {
  render() {
    return (
      <div>
        <ChildTest />
      </div>
    );
  }
}

export default App;

 

Wrapper.js 생성

import React, { Component } from 'react';

class Wrapper extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}

export default Wrapper;

 

App.js 에 Wrapper.js 연결

import React, { Component } from 'react';
import ChildTest from './Child_test';
import ChildTest2 from './Child_test2';
import Wrapper from './Wrapper';

class App extends Component {
  render() {
    return (
      <div>
        <Wrapper>
          <ChildTest />
        </Wrapper>
      </div>
    );
  }
}

export default App;

이렇게 해주면 바뀌는건 별로 없어보이지만 Wrapper에 종속된 컴퍼넌트가 바껴도 Wrapper파일은 수정해줄 필요가 없어요.

Child_test2.js 생성

import React, { Component } from 'react';

class Child_test extends Component {
  render() {
    return <div>child_test2</div>;
  }
}

export default Child_test;

 

App.js 에 Child_test2.js 추가 연결

import React, { Component } from 'react';
import ChildTest from './Child_test';
import ChildTest2 from './Child_test2';
import Wrapper from './Wrapper';

class App extends Component {
  render() {
    return (
      <div>
        <Wrapper>
          <p>test</p>
          <ChildTest />
          <ChildTest2 />
        </Wrapper>
      </div>
    );
  }
}

export default App;

역시 Wrapper 수정 없이 아무 문제 없이 실행되네요.