props란?

props

properties의 줄임말로 상위 컴포넌트가 하위 컴포넌트에 값을 전달(단방향 데이터 흐름) 할때 사용합니다.(단방향)
자식 컴포넌트에서 props는 읽기 전용으로 수정이 불가하다는 특징을 가지고 있습니다.
함수 컴포넌트, 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정할 수 없습니다.
부모 컴포넌트의 props를 변경하면, 해당 props를 사용하고 있던 자식 컴포넌트는 리렌더링 됩니다.

사용방법

 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 

컴포넌트에 props 전달하기

React 컴포넌트는 props를 이용해 서로 통신합니다. 모든 부모 컴포넌트는 props를 줌으로써 몇몇의 정보를 자식 컴포넌트에게 전달할 수 있습니다. props는 HTML 어트리뷰트를 생각나게 할 수도 있지만, 객체, 배열, 함수를 포함한 모든 JavaScript 값을 전달할 수 있습니다.

코드와 함께 살펴보면

export default function Profile() {
  return (
    <Avatar />
  );
}

위의 코드는 어떠한 전달하지 않는 부모 컴포넌트가 Profile 자식 컴포넌트가 Avatar인 코드입니다.

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

export defeult function profile() {
  return(
    <Avatar
     person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }} //{}중괄호안의 객체
  size={100}
	/>
   );
}

위의 코드는 부모가 자식에게 person (객체)와 size (숫자)를 전달했습니다.
여기서 중괄호가 두번쓰이는것은 중괄호안의 객체를 뜻합니다.

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

function Avatar({ person, size }) {
  // person과 size는 이곳에서 사용가능합니다.
}

Avatar에 렌더링을 위해 person 과 size props를 사용하는 로직을 추가하면 완료됩니다.

이제 Avatar를 다른 props를 이용해 다양한 방식으로 렌더링하도록 구성할 수 있습니다.