Props

Props

• 외부에서 전달 받은 변하지 않는 값.
• 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값이다.
• 정확히는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 속성(Property)을 이야기한다.
  → Props (Properties)

특징

• 컴포넌트가 외부(상위 컴포넌트)에서 전달받은 변하지 않는 속성을 의미한다.
• 자식 컴포넌트는 상위 컴포넌트가 전달하는 props를 인자로 사용하여 전달받은 속성들을 객체의 형태로 접근 할 수 있다.
• 객체의 형태를 가지며, 읽기 전용 객체이다.
  • 리액트의 단방향, 하향식 데이터 흐름 원칙
  • 만약 하위 컴포넌트에서 props 를 수정하는 경우 상위 컴포넌트에서 생길 Side Effect 를 방지하기 위함이다.

Props 전달하기

기본적인 전달방법

• <자식컴포넌트이름 속성이름={전달 하고자하는 속성값} /> 으로 props 를 전달 할 수 있다.

function Parent() {
  return (
    <div>
      <Child text = {"i'm child!"} /> {/* props에 전달 및 렌더링*/}
    </div> 
  )
}

function Child(props) { {/* 인자의 형태로 props 를 불러옴 */}
  return (
    <div>
      <p>{props.text}</p> {/* 객체와 동일하게 접근한다. */}
    </div>
  )
}

// 여기서 Child 가 받은 props 의 형태는 다음과 같다.
// {text : "i'm child!"}

1. 부모 컴포넌트가 자식 컴포넌트에 text 라는 속성과 속성값을 자식의 props 에 전달한다.
2. 자식 컴포넌트에 인자로 props 를 전달하면, 자식 컴포넌트가 부모에게 받은 정보를 props로 가져오게 된다.
3. 전달받은 props가 객체의 형태를 가지므로, props 내부의 값을 호출하기 위해서는, 객체 접근방식과 동일한 방법으로 데이터를 가져오면 된다.
   → Dot, Bracket

• 더불어 props 에 여러 속성값을 동시에 추가해 줄 수도 있다.

function Parent() {
  return (
    <div>
      <Child 
        text = {"배고파"}
        text2 = {"해물찜 먹고싶다"}
      /> {/* props에 다수의 속성을 전달 */}
      <Child /> {/* 자식 컴포넌트 렌더링*/}
    </div> 
  )
}

function Child(props) { 
  return (
    <div>
      <p>{props.text}</p>
      <p>{props.text2}</p>
    </div>
  )
}

// 여기서 Child 가 받은 props 의 형태는 다음과 같다.
// {text : "배고파", text2 : "해물찜 먹고싶다"}

props.children 으로 전달하기

• 위처럼 전달할 키값을 따로 지정하는 것이 아니라, 컴포넌트의 이름을 태그처럼 사용하여 전달 할 수도 있다.
• <전달할 컴포넌트 이름>전달할 내용</전달할 컴포넌트 이름> 으로 사용한다.

function Parent() {
  return (
    <div>
      <Child>i'm child!</Child> {/* props에 전달 */}
    </div> 
  )
}

function Child(props) { {/* 인자의 형태로 props 를 불러옴 */}
  return (
    <div>
      <p>{props.children}</p> {/* 이때는 children 으로 접근한다. */}
    </div>
  )
}

// 여기서 Child 가 받은 props 의 형태는 다음과 같다.
// {children : "i'm child!"}

• 지정한 키 값 없이 전달하는데, 위처럼 작성하는 경우 props 에 children 이라는 키 값에 자동으로 저장된다.

props 를 전달하는 다른 방법

1. 다른 변수에 지정한 값을 전달하기.

const App = () => {
  const name = "KROCK"
  return (
    <Child name = {name} /> {// 중괄호 사이가 JS 로 취급되기 때문에 가능하다.}
  )
}

2. props 객체를 스프레드 문법으로 전달하기.

const App = () => {
  const props = {
    name : 'KROCK',
    location : 'KOREA'
  }
  return (
    <Child {...props} /> 
    {// 스프레드 문법으로 전달하게 되면 결국 각각의 요소를 풀어서 작성하는 것이므로}
    {// <Child name : 'KROCK' location : 'KOREA' /> 과 같음.}
  )
}

• 객체의 이름은 props 가 아니여도 된다.

3. state 변수를 props 로 전달하기.

const App = () => {
  const [name, setName] = useState('')
  return (
    <Child name = {name} /> 
    {// 부모 컴포넌트에선 state 지만, 자식 컴포넌트에선 props 이다.}
  )
}

---

+

• 간단하게 state 는 변하고, props 는 안변한다.
• 사람으로 치면, 나이와 주거지역은 상태(state)이므로 변하지 않고, 성별과 이름은 나의 속성(property)이기 때문에 변하지 않는다.
• 읽기 전용 객체이므로 예를 들어 props.name = "김봉남" 처럼 강제로 할당하려 하면 오류가 발생한다.
  → 이거 읽기 전용이라 니가 못바꿔~