React: Prop Types

summereuna🐥·2022년 2월 17일
React
0

React JS

목록 보기
10/69

Props

컴포넌트의 환경을 우리가 원하는 만큼 설정할 수 있게 해 주는 props!
text, boolean 타입도 보낼 수 있고 원하는 건 다 보낼 수 있다.

❗️문제는 너무 많은 props를 가지면 실수를 할 수도 있다는 점이다.
아니면 잘못된 props를 전달한다든지..

예시

Btn에 한 가지 더 configuration(설정)을 해보자.

사용자가 prop으로 fontSize: 18을 전달하도록 하기

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    function Btn({ text, fontSize }) {
      console.log(text, "was rendered ✅");
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            //fontSize: fontSize 이름 같으니까 생략 가능
            fontSize,
          }}
        >
          {text}
        </button>
      );
    }

    function App() {
      return (
        <div>
          <Btn text="Save Changes" fontSize={18} />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

그런데 협업하는 내 동료가 실수를 해 부렀어

  • props에 전달하지 말아야 할 걸 보낸다거나
  • text prop에 String 타입 보내는 대신 {}로 숫자를 보낸다거나..
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    function Btn({ text, fontSize }) {
      console.log(text, "was rendered ✅");
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            //fontSize: fontSize 이름 같으니까 생략 가능
            fontSize,
          }}
        >
          {text}
        </button>
      );
    }

    function App() {
      return (
        <div>
          <Btn text="Save Changes" fontSize={18} />
          <!--아래 처럼 작성하면 틀린 코드는 아니지만 사용하고 있는 컴포넌트 방식 내에서는 에러임!-->
          <Btn text={12} fontSize="Changes" />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

아래 처럼 작성하면 틀린 코드는 아니지만 사용하고 있는 컴포넌트 방식 내에서는 에러임!
<Btn text={12} fontSize="Changes" />

리액트가 이런 실수를 잡아 줄 수 있도록 Prop Types을 정해주자.

PropTypes이라는 패키지를 사용해 보자. 이는 어떤 타입의 prop을 받고 있는지 체크해 준다.

  1. 스크립트에 prop-types 패키지를 작성한다.
    <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>

  2. react 스크립트를 development로 변경한다.
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>

  3. prop 타입 적기

Btn.propTypes = {
  text: PropTypes.string,
  fontSize: PropTypes.number,
};

컴포넌트이름.propTypes = { prop이름: 타입, prop이름: 타입, }

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!--🔥 react 패키지의 모드를 development 모드로 바꿔주자-->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!--🔥 prop-types 패키지 스크립트에 적어주자-->
  <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    function Btn({ text, fontSize }) {
      console.log(text, "was rendered ✅");
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            //fontSize: fontSize 이름 같으니까 생략 가능
            fontSize,
          }}
        >
          {text}
        </button>
      );
    }
    <!--🔥 컴포넌트의 propTypes 설정하기-->
    Btn.propTypes = {
      text: PropTypes.string,
      fontSize: PropTypes.number,
    };
    function App() {
      return (
        <div>
          <Btn text="Save Changes" fontSize={18} />
          <Btn text={12} fontSize="Changes" />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>
  1. 결과
    콘솔에서 타입 잘못 되었다고 알려준다.

📝 More Info of "Typechecking With PropTypes"

More Info of Typechecking With PropTypes

prop을 필수조건으로 만들고 싶다면
isRequired 를 붙여 주면 된다.

Btn.propTypes = {
  text: PropTypes.string.isRequired,
  fontSize: PropTypes.number.isRequired,
};
  • 예시 및 결과

컴포넌트 프롭의 기본 값 설정하기

text 프롭은 PropTypes.string, 그리고 필수조건으로 지정하고
fontSize 프롭은 PropTypes.number로 지정하고 옵셔널 하게 두자.

Btn.propTypes = {
  text: PropTypes.string.isRequired,
  fontSize: PropTypes.number,
};

컴포넌트에 프롭의 default value(기본 값)을 설정할 수 있는데, 이는 JS 덕분이다 ^ㅇ^!
폰트 사이즈에 디폴트 값을 주기 위해 Btn 컴포넌트에 프롭의 default value(기본 값)을 설정해 두자.

  • fontSize가 존재 하지 않는(undefined)다면 기본 값으로 14를 줘 보자.
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    function Btn({ text, fontSize = 12 }) {
      console.log(text, "was rendered ✅");
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            //fontSize: fontSize 이름 같으니까 생략 가능
            fontSize,
          }}
        >
          {text}
        </button>
      );
    }
    Btn.propTypes = {
      text: PropTypes.string.isRequired,
      fontSize: PropTypes.number,
    };
    function App() {
      return (
        <div>
          <Btn text="Save Changes" fontSize={18} />
          <Btn text="Continue" />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

결론

이렇게 하면 fontSize를 설정하지 않은 두 번째 버튼의 폰트 크기는 기본 값인 16폰트가 된다.=
이렇게 정의되지 않은 변수에 관한 기본값을 줄 수 있다 ^3^~

Recap

이번 섹션에서는 설정 가능한 컴포너틑를 갖는 것이 얼마나 멋진 일인지를 배웠다.
복붙 안해도 되니까 을마나 좋게요!

profile
summereuna🐥
Always have hope🍀 & constant passion🔥
이전 포스트

React: React.memo()

다음 포스트

React: CRA(create-react-app)

0개의 댓글