React #4. Props

📌 Props

리액트에서 데이터는 위에서 아래로, 부모 컴포넌트에서 자식 컴포넌트로 진행되는 단방향의 흐름을 가진다. 이 데이터의 흐름 아래에서 자식에게 전달되는 데이터를 Props 라고 한다.

이전 글의 예제(버튼 클릭시 숫자 변경) 예제를 컴포넌트로 구현해 보겠다.

Props의 가장 기본적인 사용법이다.

 

• Button 컴포넌트(src/Button.js)

function Button(props) {
  return <button onClick={props.onClick}>{props.text}</button>;
}

export default Button;

버튼 컴포넌트를 생성한다. 이 컴포넌트에서는 props라는 객체를 받고, 그 객체의 onClick, text 요소들을 사용한다.

 

• App 컴포넌트(src/App.js)

import React, { useState } from 'react';
import Button from './Button';

function App() {
  const [number, setNumber] = useState(0);

  function onClickIncrease() {
    setNumber(number + 1);
  }
  function onClickDecrease() {
    setNumber(number - 1);
  }
  return (
    <div>
      <div>값 : {number}</div>
      <Button onClick={onClickIncrease} text="+1" />
      <Button onClick={onClickDecrease} text="-1" />
    </div>
  );
}

export default App;

버튼 컴포넌트를 호출한다. 버튼 컴포넌트를 호출할때, 컴포넌트에서 필요한 onClick, text값을 넣어준다.

 

📌 비구조화 할당

위의 방법보다 조금 업그레이드 된 사용법 중 하나이다.

객체의 구조를 해체하고 변수에 대입하는 것이다.

 

버튼 컴포넌트를 다음과 같이 변경한다.

function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

export default Button;

기존에 받고 있던 props라는 객체 안의 값 text와 onClick을 추출해서 각각 변수에 값을 할당하고 사용한다.

이 방법, 비구조화 할당을 사용하면, 단순히 props만 작성했을 때 보다 코드의 가독성이 좋고, 각 컴포넌트마다 필요한 데이터의 종류를 쉽게 파악할 수 있다.

 

📌 Children

지금까지는 컴포넌트를 사용할 때 닫힌 괄호를 사용했다.

 

Children을 통해 컴포넌트 안에 다른 태그나 컴포넌트를 담을 수 있다.

 

• Layout 컴포넌트 (src/Layout.js)

import styles from './Layout.module.css';

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

export default Layout;

• Layout CSS (src/Layout.module.css)

.container {
  padding: 10px;
  border: 1px solid black;
  border-radius: 10px;
}

패딩과 보더를 갖는 Layout 컴포넌트를 생성했다. Props로 chidren을 받는다.

chidren 속성은 다른 속성들이 컴포넌트 태그에서 값을 대입하는 것과 달리, 자식 태그를 값으로 갖는다.

 

• App 컴포넌트 (src/App.js)

import React, { useState } from 'react';
import Button from './Button';
import Layout from './Layout';

function App() {
  const [number, setNumber] = useState(0);

  function onClickIncrease() {
    setNumber(number + 1);
  }
  function onClickDecrease() {
    setNumber(number - 1);
  }
  return (
    <Layout>
      <div>값 : {number}</div>
      <Button onClick={onClickIncrease} text="+1" />
      <Button onClick={onClickDecrease} text="-1" />
    </Layout>
  );
}

export default App;

div 태그에서 Layout 태그로 변경해주었다. Layout의 children은 div 태그 하나와 Button 컴포넌트 두개로 이루어진 자식 태그를 그대로 전달한다.

 

마지막으로,

컴포넌트마다 필요한 데이터가 다르므로 프로젝트의 구조 설계와 컴포넌트 네이밍을 확실하게 해야한다!

 

 

 

참고 및 사진 출처: https://codemate.kr/project/%EC%BD%94%EB%AE%A4%EB%8B%88%ED%8B%B0-%EB%AA%A8%EA%B0%81%EC%BD%94-WEB-%EB%A9%94%EC%9D%B4%ED%8A%B8-%EC%9B%B9-%EC%8B%AC%ED%99%94-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8E%B8/5-1.-Props