[리액트] props

props

React에서 props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방식이다.(단반향)

컴포넌트 간의 데이터 흐름을 단방향으로 유지할 수 있으며, props는 컴포넌트의 재사용성을 높이는 중요한 역할을 한다.

---

컴포넌트와 props

React에서 컴포넌트는 JSX를 반환하는 함수이다.

[리액트] Component

 

컴포넌트는 ( )괄호 안에 argument(인자)를 받는데 여기서 인자 이름은 props라고 부른다.

 

props는 컴포넌트가 전달받는 유일한 인자로, 객체(Object) 타입을 가진다.

// 기본적인 props 객체 형태이기 때문에 .을 사용하여 접근
function Btn(props) { 
    return (
        <button style={{ color: "white" }}>
            {props.text} 
        </button>
    );
}

// 구조 분해 할당을 사용하여 props의 text 값을 바로 가져오기
function Btn({ text }) {
    return (
        <button style={{ color: "white" }}>
        </button>
    );
}

// 부모 컴포넌트(App)에서 자식 컴포넌트(Btn)에게 props 전달
function App() {
    return (
        <div>
            <Btn text="Save Btn" />
            <Btn text="Delete Btn" />
        </div>
    );
}

 

React.memo()를 활용한 렌더링 최적화

React에서는 부모 컴포넌트의 state가 변경되면 모든 자식 컴포넌트들도 다시 렌더링된다.

이러한 불필요한 리렌더링은 성능 저하를 유발할 수 있다. 이를 방지하기 위해 React.memo()를 활용할 수 있다.

import React from 'react';

const 자식컴포넌트 = React.memo(({ 내용 }) => {
  console.log("렌더링됨");
  return <div>{내용}</div>;
});

 

 

부모 컴포넌트가 리렌더링되더라도 props 값이 동일하면 자식 컴포넌트는 다시 렌더링되지 않는다.

아주 많은 자식 컴포넌트를 가지고 있는 부모 컴포넌트일 때 사용하면 사용하면 좋다.

PropTypes로 props 타입 체크하기

PropTypes를 사용하여 컴포넌트가 받는 props의 타입을 정의하고, 잘못된 타입이 전달될 경우 경고를 출력할 수 있다.

import PropTypes from 'prop-types';

function 컴포넌트명({ 내용 }) {
  return <div>{내용}</div>;
}

컴포넌트명.propTypes = {
  내용: PropTypes.string.isRequired,
};

 

props의 타입을 보다 명확하게 정의하고, 예상치 못한 오류를 방지할 수 있다.