[Describing The UI] Passing Props to a Component

🥩 Familiar props

---

이제껏 확인한 React의 장점은 component의 개념을 통해 markup을 재사용할 수 있다는 점, 그리고 JSX를 통해 rendering logic과 markup을 보다 쉽게 결합할 수 있다는 점이다.

그러나 단순히 markup을 component 형태로 변화만 해서는 보다 복잡한 기능들의 구현이 불가능하다. Component의 외부에서 component 내부에 영향을 줄 수 있는 방법이 전혀 없기 때문이다.

💡 React components use props to communicate with each other

React는 component와의 상호작용을 위해 Props를 사용한다. 모든 parent component는 child component에게 props로써 값을 전달할 수 있다.

사실 우리는 이미 props를 사용했다.

function Profile() {
  return (
    <img
      className="profile"
      src="...url"
      alt="Goonco"
      width={100}
    />
  );
}

Props는 JSX tag에 전달하는 정보들로 속성값 또한 이에 해당된다.

🍖 Passing props to a component

---

Props를 전달하고 사용하는 방법은 매우 간단하다.

• 1. Pass props to the child component

export default function ParentComponent() {
  return <ChildComponent myProp1={100} myProp2={200} />;
}

• 2. Reac props inside the child component

export default function ChildComponent({ myProp1, myProp2 }) {
  // ...Codes
}

React component에서는 props object, 단 하나만을 인자로 허용한다. 즉 위 형태는 아래의 형태를 간략하게 표현한 것이다.

export default function ChildComponent(props) {
  const { myProp1, myProp2 } = { ...props };
  // ...Codes
}

🍗 Specifying a default value for a prop

---

각 prop에 default value를 부여할 수 있다. =와 destructuring을 이용한다.

export default function ChildComponent({ myProp1 = 50, myProp2 = 100 }) {
  // ...Codes
}

Default value는 해당 prop을 전달하지 않았거나, undefined를 전달할 경우 사용된다.

🥓 Forwarding props with the JSX spread syntax

---

Props의 전달은 매우 반복적인 작업이 되는 경우가 발생한다.

function ParentComponent({ p1, p2, p3, }) {
  return (
    <ChildComponent
        p1={p1}
    	p2={p2}
    	p3={p3}
    />
  );
}

잘못된 코드라고 할 수는 없지만 ParentComponent의 prop이 늘어나는 경우 등, 수정이 발생했을 때 ChildComponent의 수정도 필요하다. 이는 아래와 같이 구현함으로써 간결성과 정확성을 모두 확보할 수 있다.

function ParentComponent(props) {
  return (
    <ChildComponent {...props} />
  );
}

🥫 Passing JSX as children

---

JSX 혹은 component를 prop으로 전달하고 싶은 경우도 발생한다. 일반적인 prop과 동일하게 구현한다면 아래와 같이 구현할 수 있다.

function PropComponent() {
  // ...Codes
}

function ChildComponent({ propComp }) {
  return (
    <div>
    	{propComp}
    </div>
  )
}

function ParentComponent(props) {
  return (
    <ChildComponent propComp={<PropComponent />} />
  );
}

그러나 component를 prop으로 넘겨주는 경우, ChildComponent와 같이 넘겨받은 component를 nesting하는 경우가 많다. 따라서 보다 직관적인 코드 작성을 위해 React는 아래와 같은 syntax를 지원한다.

function PropComponent() {
  // ...Codes
}

function ChildComponent({ children }) {
  return (
    <div>
    	{children}
    </div>
  )
}

function ParentComponent(props) {
  return (
    <ChildComponent>
    	<PropComponent />
    </ChildComponent>
  );
}

위와 같이, 특정 내용을 JSX 태그에 nesting할 경우, 해당 component는 그 내용을 children prop에 저장한다.

💡 You can think of a component with a children prop as having a “hole” that can be “filled in” by its parent components with arbitrary JSX

Prop을 이용해 외부에서 component 내부의 logic에 영향을 줄 수 있게 되면서, 마치 레고 블럭 처럼, 보다 정교하게 component를 이용할 수 있다.

🌯 How props change over time

Props는 component의 외부로부터 주입되는 인자이다. 주입되는 인자는 시시각각 변할 수 있다. 그러나 component는 전달받은 props를 조작해서는 안된다.

💡 Props are immutable. Don't try to "change props"

다시 한번 강조하지만, props는 절대 수정되어서는 안된다. Props의 수정이 필요한 경우 parent component로부터 새로운 props를 전달받는 외에 다른 방법은 없다. 이를 반드시 명심하자.