React에서 state에 이어 중요한개념인 props에 대해 알아보자

1. Props 란?

• Components의 속성(property)을 의미, 외부로 부터 전달받은 값(변하지 않아야 함) 으로 해당 컴포넌트가 가진 속성에 해당

• 부모 컴포넌트로 부터(상위 컴포넌트) 전달받은 값(React는 하향식 단방향의 데이터 흐름을 가지고 있다), React 컴포넌트는 props를 함수의 전달인자(arguments) 처럼 전달받아 이를 기반으로 화면에 어떻게 표시될지를 기술하는 React 엘리먼트를 반환한다 따라서 컴포넌트가 최초 렌더링 될때 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다

• 객체형태, props로 어떠한 값도 넣어서 전달 될 수 있도록 객체의 형태를 가진다

• props는 읽기전용(read only) 이다

  만약 하위 컴포넌트에서 상위 컴포넌트로 부터 전달받은 props를 직접 수정한다면 props를 전달한 상위 컴포넌트에 영향을 미칠 수 있다(Side Effect), 이는 React의 하향식 단방향 데이터 흐름에 위배된다

2. Props 사용방법

1. 하위 컴포넌트에 전달할 값 과 속성을 정의

function Parent() {
  const text = '나는 props 입니다' //전달할 값
  
  return (
    <div>
      <span>나는 부모 입니다</span>
      <Child text={text} /> // 속성
    </div>
  )
}

function Child() {
  return (
    <div>나는 자식 입니다</div>
  )
}

2. props를 이용하여 전달

function Parent() {
  const text = '나는 props 입니다' //전달할 값
  
  return (
    <div>
      <span>나는 부모 입니다</span>
      <Child text={text} /> // 속성정의 및 전달
    </div>
  )
}

function Child(props) { //props로 받기 또는 상위컴포넌트에서 정의한 속성인 text로도 받을수 있다
  return (
    <div>
      <span>나는 자식 입니다</span>
      <span>{props.text}</span>
    </div>
  )
}

3. props.children

• 컴포넌트 태그 사이에 value를 넣어 전달 할 수도 있다 이 경우 props.children 을 이용하면 해당 value에 접근하여 사용 할 수 있다

function Parent() {
  return (
    <div>
      <span>나는 부모 입니다</span>
      <Child>나는 value 입니다</Child> // 컴포넌트 태그 사이의 value
    </div>
  )
}

function Child(props) {
  return (
    <div>
      <span>나는 자식 입니다</span>
      <span>{props.children}</span>
    </div>
  )
}