5화: Passing Props to a Component

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

Unsplash 의 Joshua J. Cotten 님 사진

공식 문서

https://react.dev/learn/passing-props-to-a-component

Passing Props to a Component – React

들어가기

• 리액트 컴포넌트는 props를 이용해서 서로 소통한다.
• props는 HTML 속성과 비슷해 보이지만, 객체나 함수를 비롯한 아무 JS 값이나 넘겨줄 수 있다.

컴포넌트에 props를 전달하는 두 가지 단계

1. 자식 컴포넌트에 props 건네주기
2. 자식 컴포넌트에서 props 읽기

props default value 설정하기

const MyComponent = ({ message = 'hello' }) => <h1>{message}</h1>;

const MyComponent2 = (props) => {
  const { message = 'hello' } = props;
  return <h1>{message}</h1>;
};

props를 구조 분해 할당할 때 기본값을 설정할 수 있다.

JSX에서 spread 구문을 이용해 props 전달하기

const Profile = (props) => <Avatar {...props} />;

이런 식의 사용이 좋은가? 또는 올바른가? 에 대해서는 의견이 많다.

 

우선 공식 문서는 조심해서 사용하라고 말한다. 만약 모든 컴포넌트가 이런 식으로 props를 전달받고 있다면 컴포넌트를 더 분리하라는 신호일 수 있다고.

 

eslint-plugin-react에서는 jsx-props-no-spread 규칙을 기본적으로 적용해 놓았다. 그 근거로는 두 가지를 든다. 첫째, 컴포넌트가 어떤 props를 받는지 명시해줄 수 있다. 둘째, 의도하지 않은 다른 props들이 넘겨져 warning이 뜨는 걸 방지하고 유지 보수하기 수월하게 한다. 하지만 규칙 맨 아래에 사용하지 않아도 되는 경우도 있다. JSX를 쓰지 않거나, 전달할 props가 너무 많거나, 고차 컴포넌트에서 spread를 사용하고 있을 경우이다.

 

몇 개의 블로그를 더 찾아봤다.

• spread 구문이 정말 필요한지, 내가 현명하게 썼는지 확인해야 하므로 안티패턴이라고 생각한다 (해당 글 링크).
• (위의 eslint 규칙과 같은 이유로) 명시적이고 유지 보수에 좋은 코드를 위해 spread를 지양한다 (해당 글 링크).
• 안티패턴까지는 아니다. 타입스크립트와 prop merging library 같은 걸 쓴다면 spread의 힘을 제대로 쓸 수 있다. 하지만 실수를 일으킬 수도 있기에 쓰기 전에 잘 생각해 봐야 한다.(해당 글 링크)

지금의 나는 컴포넌트가 받는 props를 명시해 준다는 점에서 spread를 쓰지 않는 것을 선호한다. 아직 하나씩 props를 넘겨 주는 게 귀찮을 만큼 많은 props를 써 본 적이 없어서 그럴지도 모른다. 하지만 props spread를 쓰더라도 주의해야 할 점이 있다. key prop은 props 안에서 spread를 하면 안 된다. 이는 React.createElement가 갖는 문제점들 중 하나인데, key는 자식 컴포넌트에게 내려주는 값이 아니기 때문에 일반적인 props들과 따로 분리한다. props 안에 key를 숨긴 채로 spread를 사용한다면 런타임에 dynamic property lookup을 사용해서 key가 있는지 없는지 찾아야 하기 때문에 비싸다는 것이다. props spread를 즐겨 쓴다면 이러한 점도 고려해보면 좋을 것 같다.

JSX를 children으로 넘겨주기

children prop을 이용하면 자식을 넘겨받을 수 있다.

props의 특징들

• props는 순간을 포착한 read-only snapshot이다.
• 매 렌더링마다 새로운 props를 받는다.
• 컴포넌트 시작 당시의 정보를 담는 게 아니라, 어떤 순간에 컴포넌트가 갖는 정보를 담는다.
• 불변성(immutable)
• props를 바꾸고 싶다면 state를 사용하는 것을 고려해 보자.