[REACT] children, 비구조화 할당

1. children : 컴포넌트 태그 사이의 내용을 보여주는 props

 

<App.js>

import MyComponent from './Mycomponent';

const App = () => {
	return <MyComponent>리액트</MyComponent>;
};

export default App;

<MyComponent.js>

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

Mycomponent.defaultProps = {
	name: '기본 이름'
};

export default MyComponent;

• MyComponent 태그 사이에 작성한 "리액트" 문자열 MyComponent 내부에서 보여 주려면 props.children 값을 보여 주어야 함

2. 비구조화 할당

- 객체에서 값을 추출하는 문법 

- 함수 파라미터가 객체라면 그 값을 바로 비구조화해서 사용 가능

const MyComponent = props => {

	const {name, children } = props;
    
	return (
        <div>
            안녕하세요, 제 이름은 {name}입니다. <br /> // 기본이름
            children 값은 {children}	// 리액트
            입니다.
        </div>
     );
};

Mycomponent.defaultProps = {
	name: '기본 이름'
};

export default MyComponent;

const MyComponent = {name, children} => {

	return (
         <div>
            안녕하세요, 제 이름은 {name}입니다. <br /> // 기본이름
            children 값은 {children}	// 리액트
            입니다.
          </div>
   );
};

Mycomponent.defaultProps = {
	name: '기본 이름'
};

export default MyComponent;