React(리액트) props(속성) 활용과 예시 (+ propTypes)

웹 개발/React

React(리액트) props(속성) 활용과 예시 (+ propTypes)

restudy 2024. 2. 18. 00:39

이번 포스트에서는 React(리액트)의 props라는 기능에 대해 알아보고, 예시를 통해 props가 어떻게 활용되는지 설명해보도록 하겠습니다.

Props(속성)

React(리액트)에서 props는 properties, 즉 속성이라는 뜻으로 컴포넌트에 전달할 수 있는 데이터라는 뜻을 가지고 있습니다.

우리는 변수와 같이 컴포넌트에 유동적으로 변형을 주어야 할 때, props를 통해 값을 전달하여 컴포넌트가 원하는 값을 나타낼 수 있도록 설정해 줄 수 있습니다.

이렇듯 props를 활용하면 동일한 코드를 가지고도 여러 컴포넌트들의 서로 다른 부분들만을 필요에 따라 다른 props 값을 전달하여 구현할 수 있으므로, 코드의 재사용성이 높아진다는 장점이 있습니다.

예를 들어 5개의 디자인이 비슷한 서로 다른 버튼을 만들 때 5개의 컴포넌트 반환 함수를 구현할 필요없이, 1개의 컴포넌트 반환 함수만을 만들어 서로 다른 props 값을 받아 적용시키면 훨씬 코드가 간단해질 것입니다.

이렇게만 설명하면 이해하기 어려울 수 있으니 예시 코드를 통해 살펴봅시다.

실행 결과와 전체 코드

두 개의 버튼이 있고, 두 버튼의 폰트 사이즈가 다른 것을 확인할 수 있습니다.

↓ 전체 코드는 다음과 같습니다.

<!-- index.html -->
<!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(props) {
      return (
        <button
          style={{
            backgroundColor: "#4CAF50",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            cursor: "pointer",
            marginRight: 10,
            fontSize: props.big ? 18 : 14,
          }}
        >
          {props.text}
        </button>
      );
    }
    function App() {
      return (
        <div>
          <Btn text="왼쪽 버튼" big={true} />
          <Btn text="오른쪽 버튼" big={false} />
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</html>

코드 부분별로 살펴보기

이제 코드에서 중요한 부분을 살펴봅시다.

먼저 Btn 컴포넌트를 생성하는 부분부터 자세히 살펴볼까요?

<Btn text="왼쪽 버튼" big={true} />
<Btn text="오른쪽 버튼" big={false} />

2개의 Btn 컴포넌트를 생성하는데, text라는 값과 big이라는 값을 설정해 주고 있습니다.

여기서 'text'와 'big'이 리액트의 Props에 해당합니다.

2개의 값을 함수를 호출할 때 인자를 전달하는 것처럼 값을 전달해 줄 수 있습니다.

그렇다면 Btn 함수에서 어떤 컴포넌트를 반환하는지 살펴볼까요?

function Btn(props) {
  return (
    <button
      style={{
        fontSize: props.big ? 18 : 14,
      }}
    >
      {props.text}
    </button>
  );
}

CSS와 관련된 코드 중 필요없는 부분들은 거의 다 삭제하고, 필요한 부분만 남겨두었습니다.

보면 함수의 매개변수로 prop를 사용하며, props.big 값과 props.text 값을 자유롭게 사용할 수 있습니다.

fontSize와 같이 CSS 요소에도 사용할 수 있으며, 버튼에 들어갈 텍스트 부분에도 props의 값을 사용할 수 있습니다.

하지만 props.~와 같이 props의 하위 요소들로 접근하도록 코드를 매번 작성하면 불편할 수 있습니다.

그래서 우리는 다음과 같이 속성 값을 바로 받아서 사용할 수 있습니다.

비구조화 할당(Destructuring)을 이용해 props 받아오기

function Btn({ text, big }) {
  return (
    <button
      style={{
        fontSize: big ? 18 : 14,
      }}
    >
      {text}
    </button>
  );
}

이렇게 중괄호를 이용하여 인자들을 받아주면 매번 'props.'라는 코드를 작성하지 않아도 되며, 정확히 어떤 값들이 함수의 인자로 전달되었는지 쉽게 확인할 수 있습니다.

알 필요는 없지만, 이러한 방식을 '비구조화 할당(destructuring)을 이용해 props를 받아온다'라고 합니다.

CSS 스타일 직접 지정하기

<Btn text="왼쪽 버튼" fontSize={18} />
<Btn text="오른쪽 버튼" fontSize={14} />

여기서 끝이 아니라, props로 style의 속성값과 완전히 동일한 이름으로 인자를 전달하면, 다음과 같이 그 이름을 그대로 사용할 수 있습니다.

즉, props를 이용하여 CSS 스타일을 직접 지정해 줄 수 있습니다.

  return (
    <button
      style={{
        fontSize,
      }}
    >
      {text}
    </button>
  );

fontSize 부분이 보이시나요?

위와 같이 'fontSize: props의 변수명'과 같이 값을 대입해주지 않고 바로 'fontSize'로 값을 사용할 수 있습니다.

이렇게 해서 지금까지 props의 개념과 간단한 활용 방법에 대해 알아보았습니다.

+ propTypes에 대해 알아보기

props에 대해 조금만 더 알아봅시다.

이번에는 propTypes라는 기능에 대해 알아보도록 하겠습니다.

React의 propTypes란 컴포넌트에 전달되는 props가 유효한지를 검사할 수 있는 기능입니다.

단어의 뜻을 살펴보면 '속성의 타입'이라는 뜻을 가지고 있습니다.

즉, 컴포넌트 생성 함수에 제대로 된 타입의 데이터를 전달하고 있는지 체크할 수 있습니다.

propTypes를 사용하기 위해서는 다음과 같이 script로 기능을 웹 링크에서 불러와주어야 합니다.

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

이제 코드를 통해 propTypes를 어떻게 지정할 수 있는지 살펴봅시다.

    function Btn({ text, fontSize }) {
      return (
        <button
          style={{
            fontSize,
          }}
        >
          {text}    
        </button>
      );
    }
    Btn.propTypes = {
      text: PropTypes.string,
      fontSize: PropTypes.number,
    };

위에서 보았던 코드를 그대로 가져와서 propTypes를 작성하겠습니다.

'컴포넌트 이름.propTypes = { }'와 같이 작성해주고, 중괄호 안에는 Object 형식으로 prop 속성명과 'PropTypes.데이터 타입'을 작성해주면 됩니다.

여기서 주의할 점은, 객체명.propTypes의 맨 앞의 P는 소문자로, 내부의 속성은 대문자 P로 작성해 주어야 한다는 것입니다.

반드시 필요한 값임을 명시하기 + 기본값 인자

만약 어떤 prop 데이터가 반드시 필요한 값이라는 것을 명시해 줄 때에는 다음과 같이 작성해줄 수 있습니다.

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

위와 같이 'isRequired' 속성을 추가해주면 해당 속성을 반드시 전달해 주어야 한다는 뜻이 됩니다.

이럼에도 불구하고 JSX 요소 생성 시 값을 전달하지 않을 경우를 대비하여, 기본값 인자를 활용할 수 있습니다.

기본값 인자란 어떤 매개변수의 기본값을 지정함으로써 해당 매개변수의 인자 값이 전달되지 않아도 자동으로 인자의 값을 설정하도록 하는 값을 말합니다.

위의 'fontSize = 14'와 같이 어떤 매개변수의 값을 지정해주면 해당 매개변수에 대응되는 인자 값이 전달되지 않아도 자동으로 fontSize = 14로 설정해주게 됩니다.

이렇게 해서 리액트의 prop의 개념과 활용법, 그리고 더 나아가 propTypes라는 개념과 활용법에 대해서도 다뤄보았습니다.

'웹 개발 > React' 카테고리의 다른 글

React(리액트) create-react-app으로 프로젝트 생성하기 (0)	2024.02.19
React(리액트) 컴포넌트 분할/조각화를 통해 코드 가독성 높이기 (0)	2024.02.17
React(리액트) State를 이용해 단위 변환기 구현하기 (0)	2024.02.16
React(리액트) 컴포넌트와 이벤트 간단하게 만들고 렌더링하기 (0)	2024.02.12

현재글React(리액트) props(속성) 활용과 예시 (+ propTypes)

복습 정리 노트