React - Props

📌 목차

• Introduction
• What is Props
• Implementation Props
• Children Props
• PropTypes
• DefaultProps
• Conclsution

📌 Introduction

안녕하세요. 오늘은 이제 react props에 대해서 알아보겠습니다. 해당 코드는 여기서 확인할 수 있습니다.

📌 What is Props

props는 properties의 줄임말입니다. 이 props는 상위의 부모요소가 하위인 자식요소에게 데이터를 전달할때 쓰입니다.

📌 Implementation Props

간단하게 App.js 에서 Hello.js에 props로 전달을 해보겠습니다.

// App.js

import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
  return (
    <div>
      <Hello name="react" color="red" /> ⭐️이렇게 자식에게 데이터를 전달할 수 있습니다.
      <Hello color="blue" />
    </div>
  );
}

export default App;

// Hello.js

import React from "react";

function Hello({ name, color }) {
  return <div style={{ color }}>Hi, {name}</div>;
}

// 만약 해당 props가 없다면 기본적인 props 세팅을 여기서 해줄수 있습니다.
Hello.defaultProps = {
  name: "이름 없음",
};

export default Hello;

📌 Children Props

또한 자식 props라고 하는것이 있는데 이건 vue에서의 slot가 비슷합니다. 이번엔 Wrapper.js를 한번 선언해 보겠습니다.

// App.js

import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" /> // 이걸 children으로 전달할 수 있습니다.
      <Hello color="blue" /> // 이것또한 마찬가지입니다.
    </Wrapper>
  );
}

export default App;

import React from "react";

function Wrapper({ children }) {
  const style = {
    border: "2px solid black",
    padding: 16,
  };

  return <div style={style}>{children}</div>; // ⭐️ children을 랜더링 해주는 모습을 볼수있습니다.
}

export default Wrapper;

 

📌 PropTypes

 

먼저 prop-types를 설치해주어야 합니다.

 

yarn add prop-types

이렇게 설치해주었다면 이렇게 사용할 수 있습니다.

 

import React, { useState } from 'react';
import PropTypes from 'prop-types';

function CountDisplay({ count }) {

  return (
    <h1>{count}</h1>
  );
}

CountDisplay.propTypes = {
  count: PropTypes.number
}

PropTypes안에는 number, string, boolean, object, array... 와 같은 타입이 있고 required를 사용하고자 한다면

 

 

import React, { useState } from 'react';
import PropTypes from 'prop-types';

function CountDisplay({ count }) {

  return (
    <h1>{count}</h1>
  );
}

CountDisplay.propTypes = {
  count: PropTypes.element.isRequired
}

 

이렇게 사용해주면 됩니다.

📌 DefaultProps

 

초기값을 설정하고자 할때 사용하게 됩니다. 

 

import React, { useState } from 'react';

function CountDisplay({ count }) {

  return (
    <h1>{count}</h1>
  );
}

CountDisplay.defaultProps = {
  count: 0,
}

 

📌 Conclusion

오늘은 이렇게 간단하게 react의 props에 대해서 알아보았습니다. class일때의 react만을 봐서 그런지 신기한 문법들이 많이 생기고 더 간결해진게 좋은거 같네요. 그럼 다음 포스팅에서 만나요~~