TIL) React 입문_Prop Drilling, object literal

Prop Drilling ?

Rrop Drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정

 

예 ) 간단한 토글 컴퓨넌트 작성

function Toggle() {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(o => !o)
  return (
    <div>
      <div>The button is {on ? 'on' : 'off'}</div>
      <button onClick={toggle}>Toggle</button>
    </div>
  )
}

위 컴포넌트를 2개 컴포넌트로 리팩토링 한다.

function Toggle() {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(o => !o)
  return <Switch on={on} onToggle={toggle} />
}
function Switch({on, onToggle}) {
  return (
    <div>
      <div>The button is {on ? 'on' : 'off'}</div>
      <button onClick={onToggle}>Toggle</button>
    </div>
  )
}

스위치는 'toggle' 및 'on' 핸들러가 필요해서 컴포넌트 하위 트리 구조로 코드를 리팩토링 했다.

 

function Toggle() {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(o => !o)
  return <Switch on={on} onToggle={toggle} />
}
function Switch({on, onToggle}) {
  return (
    <div>
      <SwitchMessage on={on} />
      <SwitchButton onToggle={onToggle} />
    </div>
  )
}
function SwitchMessage({on}) {
  return <div>The button is {on ? 'on' : 'off'}</div>
}
function SwitchButton({onToggle}) {
  return <button onClick={onToggle}>Toggle</button>
}

'on' 과 'toggle' 전달하려면 Switch 컴포넌트를 통해 Props를 드릴해야 한다.

Switch 컴포넌트는 실제로 함수에 그 값을 필요로 하지 않는다.

컴포넌트들의 자식이 핸들러를 필요로 하기 때문에 그 소품을 전달해야 한다.

props drilling이 무조건 적으로 문제 되는건 아니다. 2~3계층 사이에서의 데이터 전달은 괜찮다. 데이터 흐름을 쉽게 추적 가능하다.

 

Props Drilling 단점

계층 구조로 된 컴포넌트 들을 분리하기 어려워진다.

props가 변경 될 때마다 전역 코드를 수정 해야 한다.

 

대응 방법

글로벌 상태 관리 모듈을 도입한다. (e.g. Redux, context API, MobX)

컴포넌트를 여러 구성 요소로 나눈다.

 

object literal?

객체의 초기화를 나타내는 표현이다. 객체를 객체를 나타내는 데 사용되는 properties로 구성된다. 객체 프로퍼티 값은 원시 값 데이터 타입 또는 다른 객체를 포함 할 수 있다. 이것은 JSON (JavaScript Object Notation)과 동일하지 않다.

 

Default argument?

import React from 'react';

function Child({ name }){

return <div>내 이름은 {name} 입니다. </div>}// 이렇게 설정합니다.

Child.default

Props={ name: '기본 이름'}

export default Child