[REACT] 컴포넌트에 props 전달하기 - 공식 문서랑 같이 공부하기 시리즈3

-목차-

[0] 서론

[1] 컴포넌트에 props 전달하는 방법 & 컴포넌트에서 props 읽는 방법

[2] props에 디폴트값 주는 방법

[3] JSX 전개 구문으로 props 전달하기

[4] 자식을 JSX로 전달하기

[4] props가 변하려면..?

서론

props는 JSX 태그에 전달하는 정보다. 예를 들어 img 태그에는 className, src, alt, width, height가 담길 수 있다. 이 속성들은 img 태그에 미리 정의되어 있는 props 이다. 하지만 컴포넌트에는 props에 무엇이든!  전달할 수 있다.

컴포넌트에 props 전달하는 방법  & 컴포넌트에서 props 읽는 방법

1. 자식 컴포넌트에 props 전달하기

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

위 코드에서 Profile은 부모 컴포넌트, Avatar는 자식 컴포넌트다. 

props는 <Avatar props명={props값} /> 와 같이 작성하면 된다. 

2. 자식 컴포넌트 내부에서 props 읽기

function Avatar({ person, size }) {
  // person and size are available here
}

props를 읽기 위해선 function Avatar 뒤에 {} 안에 동일한 이름으로 작성해주면 된다. 

두 코드를 합치면 아래와 같다.

 

import { getImageUrl } from './utils.js';

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

export default function Profile() {
  return (
    <div>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi', 
          imageId: 'YfeOqp2'
        }}
      />
      <Avatar
        size={80}
        person={{
          name: 'Aklilu Lemma', 
          imageId: 'OKS67lh'
        }}
      />
      <Avatar
        size={50}
        person={{ 
          name: 'Lin Lanying',
          imageId: '1bX5QH6'
        }}
      />
    </div>
  );
}

리액트 컴포넌트는 인자로 props만 받는다는 사실을 기억하면 된다. 마치 함수의 인자(parameter)와 같이...! 

React를 처음 공부하는 사람한테(it's me) 낯선 { 중괄호 }가 자주 눈에 보인다. 이참에 정리해 보고 가자.

function Avatar({person, size}) {...} 여기서 {}는 "destructuring(구조분해할당)"이라는 문법이다. function Avatar({person, size}) {...} 와  function Avatar(props) {let person = props.person; let size = props.size; }  는 똑같다고 볼 수 있다. (리액트는 구조분해할당을 한 전자를 선호한다고 합니다. 이유에 관해서는 조금 더 찾아봐야 할 것 같네요...)

props에 디폴트값 주는 방법

function Avatar({ person, size = 100 }) {
  // ...
}

위 코드처럼 작성하면 된다.

JSX 전개 구문으로 props 전달하기

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

가끔 props를 전달하는 건 매우 반복적인 일이다. 반복이 문제가 되는 건 아니다. (오히려 더 분명하다.) 하지만 간결성을 더 추구하는 사람이라면 아래와 같이 "spread 구문"을 사용하여 작성할 수 있다. (하지만 공식 문서에서는 모든 컴포넌트를 이렇게 쓰면 곤란하다고 한다.)

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

자식을 JSX로 전달하기

HTML은 아래와 같이 사용하는 게 일반적이다. 

<div>
  <img />
</div>

이처럼 컴포넌트들도 중첩해야될 때가 있다.

<Card>
  <Avatar />
</Card>

위 코드처럼 사용하기 위해서는 부모 컴포넌트(Card)에서 자식 컴포넌트(Avatar)를 props로 받아야 한다.

 

import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

props가 변하려면..?

props는 항상 정적(static)인 건 아니다!

props는 컴포넌트 데이터를 처음에만 딱 반영하는 것이 아니라, 어떤 시점이든 반영할 수 있다.

하지만 props 자체는 '절대 변경 불가'다. (immutable 즉, 불변)

컴포넌트가 자신의 props를 바꾸기 위해서는 '부모 컴포넌트'에게 다른 props를 달라고 '요청'해야 한다.

(그럼 전에 사용한 props는 버려지고, 자바스크립트 엔진은 기존 props가 차지하던 메모리를 회수한다.)

절대 props를 변경하려고 하지 말기..! 값을 변경해야 한다면 state를 변경 (setState) 해야 한다. 

그렇다면 state란 무엇인가? 다음 글을 참고해 주세요.