[TIL] React props와 propTypes

곽재훈·2024년 5월 12일

오늘 나는 무엇을 공부했는가.

목록 보기

27/55

여는 글

벌써 주말이 끝나간다. 언제나 주말은 정신없이 흘러간다.
오늘은 집에 와서 React 강의를 조금 들었다.
가능하면 내일 일찍 일어나서 강의를 조금 더 들으려고 한다! 지난 팀 프로젝트에서 조금 무리했는지 아직 건강이 조금 안 좋당.
오늘은 약먹고 일찍 자려고 함!

1. React

1) React props와 구조분해할당

const Btn = (props) => {
      return (
        <button
          onClick={props.changeValue}
          style={{
            fontSize: props.fontSize,
          }}
        >
          {props.text}
        </button>
      );
    };

const App = () => {
      const [value, setValue] = React.useState("Save Change");
      const changeValue = () => setValue("Revert Changes");
      return (
        <div>
          <Btn text={value} changeValue={changeValue} fontSize={30} />
        </div>
      );
    };
    ReactDOM.render(<App />, root);

React에서는 컴포넌트에 속성을 적어주는 방법으로 부모 컴포넌트가 자식 컴포넌트에게 원하는 값을 전달해줄 수 있다. 자식에게 전달해주는 속성들은 key와 value로 묶여서 하나의 객체를 이루어 전달된다. 가령 지금의 경우에는,

const Btn = (props) => {
      return (
        <button
          onClick={props.changeValue}
          style={{
            fontSize: props.fontSize,
          }}
        >
          {props.text}
        </button>
      );
    };

...
 const [value, setValue] = React.useState("Save Change");
  <Btn text={value} changeValue={changeValue} fontSize={30} />

Btn이라는 컴포넌트에 fontSize라는 속성에 30이라는 값이 전달되고, text라는 속성에는 value라는 변수가 전달되고 있다. 현재 value의 값은 "Save Change"이므로 아마 이 문자열이 전달될 것이다.
속성의 이름은 객체에서 key값이 되고 속성의 값은 value가 되어 객체로 묶인다.
그래서 보통 컴포넌트를 정의할 때, 이 자리에 어떤 이름을 써도 무방하지만 대부분은 props라는 파라미터 이름을 지어서 사용한다고 한다.

const Btn = ({changeValue, text, fontSize = 16}) => {
      return (
        <button
          onClick={changeValue}
          style={{
            fontSize,
          }}
        >
          {text}
        </button>
      );
    };

...
 const [value, setValue] = React.useState("Save Change");
  <Btn text={value} changeValue={changeValue} fontSize={30} />

그런데 이렇게 객체를 파라미터로 받지 않고 구조분해할당을 이용해서 각각의 속성들을 직접 변수로 받아오는 방법도 있다.

// 구조분해할당을 사용하여 각각의 변수명으로 받아올 경우
const Btn = ({changeValue, text, fontSize = 16}) => {
  ...

이렇게 하면 변수명을 직접 사용할 수 있고, JS문법에서 사용하던 것처럼 파라미터에 기본값을 설정해서 사용할 수도 있다.

// 구조분해할당을 사용하지 않고 props라는 객체로 받아올 경우
<button onClick={changeValue} style={{ fontSize: props.fontSize, }}>

// 구조분해할당을 사용하여 각각의 변수명으로 받아올 경우
<button onClick={changeValue} style={{ fontSize, }}>

또한 변수명으로 직접 받아올 때 style에서 속성명이 일치하면 이렇게 한 번만 적어서 동일한 코드를 조금 더 간편하게 작성할 수 있다.

2) propTypes로 안전벨트 매기.

React에서 작업을 해야할 때 주의해야 할 점이 있다.

const Btn = ({changeValue, text, fontSize = 16}) => {
      return (
        <button
          onClick={changeValue}
          style={{
            fontSize: fontSize,
          }}
        >
          {text}
        </button>
      );
    };

...
 const [value, setValue] = React.useState("Save Change");

위와 같은 코드에서

  <Btn text={value} changeValue={changeValue} fontSize={"hello"} />

라고 적으면 어떻게 될까?

Btn 컴포넌트에서 fontSize 는 style에서 폰트 사이즈를 정하는 속성의 값으로 전달되는데, 지금 Btn이라는 컴포넌트에는 fontSize라는 속성에 "hello"라는 문자열이 전달되고 있다.

그렇다면 숫자가 들어가야 할 자리에 문자열이 들어갔으니 에러가 떠야하지 않을까??

그런데 React에서는 이러한 구성에서 문법적으로는 틀리지 않았기 때문에 에러를 표시하지 않는다. 즉, 작동하지는 않지만 우리에게 에러라고 표시해주지 않기 때문에 에러가 발생한다면 우리는 이를 알기 어려울 수도 있다. 그래서 이런 경우를 위해 컴포넌트에 들어갈 변수의 타입을 미리 체크할 수 있는 기능이 있다.

propTypes를 사용하기 위해서는 먼저 script태그를 넣어준다.

<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>

그리고 Btn 컴포넌트의 정의부 밑에 이렇게 코드를 작성해준다.

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

사실 이걸 변수라고 불러야 하는지, 파라미터라고 불러야 하는지 아직 약간 헷갈리지만, 어쨋든 컴포넌트에 전달되는 값들이 각각 어떤 타입을 가지고 있어야 하는지, 옵션인지 필수인지 등을 사전에 설정하여 체크할 수 있는 것이다. 지금같은 경우 fontSize에는 숫자만 들어올 수 있도록 설정한 모습이다. 그런데 실제로 fontSize에 전달되는 값은 "hello"라는 String이다. 이렇게 되면 어떻게 될까??