Props

저번 포스팅에서는 기본적인 props에 대한 개념과 사용법에 대해서 공부해보았다
이번에는 업그레이드된 props 사용 방법을 알아보자...

1. 비구조화 할당

말이 참 어렵다. 풀어서 설명하자면, 객체의 구조를 해체하고 변수에 대입한다는 것이라고 한다.
대충 이해가 되고 있는건가... 일단 바로 적용해보자

(Content.js)
function Content({title}){
  return (
    <div className="content">
      <h1>{ title[0] }</h1>
    </div>
  )
}
export default Content;

무엇이 달라졌는지 보자. 우선, 기존에 받고 있던 props라는 객체 안에 있는 값 title을 추출해서 변수의 값에 할당하고, 사용하고 있다.

비구조화 할당을 사용하는 경우 코드의 가독성이 올라갈 뿐만 아니라, 다른 사람이 컴포넌트의 구조를 볼 때 각 컴포넌트마다 필요한 데이터의 종류를 손쉽게 파악할 수 있다는 장점이 있다.

props만 적혀있는 것 보다 어떤 데이터가 필요한지 알아보기 싑다는 것이다. 알았으면 이제부터 비구조화 할당을 사용하자

2. Children

보통 컴포넌트를 사용할 때, 닫힌 괄호를 사용한다.

그럼 컴포넌트 안에 다른 태그나 컴포넌트를 담는 방법에 대해서 알아보자

바로 Children을 사용하면 된다.
위의 예제를 감싸는 Layout이라는 컴포넌트를 만들고 CSS를 적용해보자

(Layout.js)
import styles from './Layout.module.css';

function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

export default Layout;

(Layout.module.css )
.container {
  padding: 10px;
  border: 1px solid black;
  border-radius: 10px;
}

Props로 children을 받으면 된다.

children 속성은 다른 속성들이 컴포넌트 태그에서 값을 대입하는 것과는 다르게 자식 태그를 값으로 갖게 된다.

App.js에 Layout 컴포넌트를 넣은 후에 확인해보자

(App.js)
import React, { useState } from 'react';
import Content from './Content';
import Layout from './Layout';

function App (){
  let [title, setTitle] = useState(['javascript','react','CSS']);
  return (

      <Layout>
        <Content title={title}/>
      </Layout>

  )
}

export default App;

기존 사용하던 div 태크를 Layout 컴포넌트로 바꾸었다.

이 때 Layout의 children은 Content 컴포넌트로 이루어진 자식 태그를 그대로 전달하는 것이다.

쉽게 말하자면 App.js에 있는 <Layout> 태그 사이에 들어가는 모든 것들이 Layout 컴포넌트 {children} 자리에 들어간다고 생각하면 맞겠다.

결과도 확인해보자

굳!

children 속성은 여러 곳에 같은 Layout을 구성할 때 사용하면 좋겠다는 느낌을 받았다. 사실 실제로 클론 코딩을 하면서 그렇게 사용해보았다.