[React] 태그 사이 내용을 보여 주는 children과 비구조화 할당 문법을 통한 props 내부 값 추출하기

📍 children
children은 컴포넌트 태그 사이의 내용을 보여 주는 props이다.

import MyComponent from './MyComponent';
 
const App = () => {
  // return <MyComponent/>;
  return <MyComponent>리액트</MyComponent>;
};
 
export default App;

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

MyComponent를 다음과 같이 수정해 보자...

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

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

 
export default MyComponent;

그러면 이런 결과가 나온다.

• 비구조화 할당 문법을 통해 props 내부 값 추출하기
  비구조화 할당 문법을 사용하면 내부 값을 바로 추출할 수 있더 더 편하다.

  📍 비구조화 할당(destructuring assignment)
  객체에서 값을 추출하는 문법으로 구조 분해 문법이라고도 불린다. 함수의 파라미터 부분에서도 사용할 수 있다. 만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용한다.

기존에는 이렇게 작성했는데, 비구조화 할당 문법을 사용하면 name 값과 children 값을 더 짧은 코드로 사용할 수 있어 더 간결하고 깔끔해진다.

const MyComponent = props => {
  const { name, children } = props;   // props에서 name과 children 추출
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;


/* ===================================================== */
// 함수의 파라미터가 객체인 경우라면...
const MyComponent = ({ name, children }) => {  // props 객체를 바로 구조 분해
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;