React 컴포넌트 간 통신의 핵심인 props를 마스터하기 위해 알아야 할 5가지 기법을 소개한다.

Props 기본값 설정

컴포넌트가 안정적으로 작동하도록 기본값 설정

props를 실수로 넣지 않았을 경우를 대비해서 기본값을 설정해주는 것이 좋다.

// 기본값이 있는 Welcome 컴포넌트
function Welcome({ username }) {
  return <h1>Hello, {username}!</h1>;
}

Welcome.defaultProps = {
  username: 'Anonymous'
};

타입 검증(PropTypes)

타입스크립트를 사용하지 않을 때 사용한다.

Javasciprt의 강제 형변환을 어느정도 예방할 수 있다.

import PropTypes from 'prop-types';

function UserCard({ name, age, email }) {
  // 컴포넌트 내용
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired, // 필수
  age: PropTypes.number,
};

Children Prop의 진짜 사용법

단순 텍스트부터 JSX까지 모든 것 포함 가능

layout같이 중복되는 틀을 Component로 분리할 때 사용된다

function FancyBorder({ color, children }) {
  return (
    <div style={{ border: `4px solid ${color}` }}>
      {children}
    </div>
  );
}

// 사용 예시
<FancyBorder color="gold">
  <h1>Congratulations!</h1>
  <p>You won a prize</p>
</FancyBorder>

Props 전개 연산자 활용

객체를 개별 props로 변환한다

return 내에 코드가 깔끔해져서 좋긴 한데, Props를 따로 만들어야해서 귀찮다.

컴포넌트 분리가 깔끔하게 된 프로젝트에서 매우 유용하게 쓰인다

const buttonProps = {
  type: 'submit',
  disabled: false,
  onClick: () => console.log('Clicked!')
};

// 동등한 효과: <Button type="submit" disabled={false} onClick={...} />
<Button {...buttonProps}>Send</Button>

렌더링 최적화 기법

React.memo + Props 비교 최적화

만약 id가 바뀌지 않았다면, 불필요한 리렌더링을 하지 않음

const UserProfile = React.memo(
  ({ user }) => (
    <div>
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
    </div>
  ),
  (prevProps, nextProps) => 
    prevProps.user.id === nextProps.user.id
);

마무리

그냥 전역 변수로 전부 때려박아서 관리하고싶다