React 68장 - HOC, High Order Component

React

참고자료

HOC, High Order Component

• 고차 컴포넌트라고 불리는 HOC는 컴포넌트의 재사용성을 높여 새 컴포넌트를 반환하는 함수를 말한다.
• props를 UI로 반환하는 것이 아닌, 새로운 컴포넌트로 변환하는 것을 말한다.
• 아래의 예시처럼, 하나의 컴포넌트에 label, input, error 역할을 하는 3개의 태그가 사용된다.
• 하나의 컴포넌트에서 label을 보여주고, input을 작성하고, error를 나타내는 3개의 역할을 하는 것인데, 하나의 역할만 할 수 있도록 이를 분리해준다.

export default function App() {
  const [inputValue, setInputValue] = useState("");
  const [err, setErr] = useState("");

  return (
    <TextInput
      value={inputValue}
      onChange={setInputValue}
      label={"예시"}
      err={"에러입니다."}
    />
  );
}

function TextInput({ value, onChange, label, err }) {
  return (
    <div>
      <label htmlFor="input-label">{label}</label>
      <input value={value} onChange={(e) => onChange(e.target.value)}></input>
      <span>{err}</span>
    </div>
  );
}

적용

• TextWithLabel을 통해 highOrderComponent 함수가 label과 TextInput 컴포넌트를 리턴한다.
• children으로 들어가는 ‘라벨입니다.’는 label에 들어가고, TextWithLabel에 전달되는 props는 TextInput에게 rest로 전달된다.
• 이로 인해 label과 TextInput을 분리할 수 있으며, children에 들어갈 수 있는 로직의 범용성도 높아진다.
  • ex / <h2>라벨입니다.</h2> => h2 태그의 ‘라벨입니다.’로 들어간다.

const TextWithLabel = highOrderComponent(TextInput);

export default function App() {
  const [inputValue, setInputValue] = useState("");
  const [err, setErr] = useState("");

  return (
    <TextWithLabel value={inputValue} onChange={setInputValue} err={err}>
      라벨입니다.
    </TextWithLabel>
  );
}

function highOrderComponent(Component) {
  return ({ chidren, ...rest }) => (
    <div>
      <label>{chidren}</label>
      <Component {...rest}></Component>
    </div>
  );
}

function TextInput({ value, onChange, err }) {
  return (
    <div>
      <input value={value} onChange={(e) => onChange(e.target.value)}></input>
      <span>{err}</span>
    </div>
  );
}

응용

• 위 방법을 통해 error 또한 분리한다.
• 똑같이 HOC를 활용하여 분리할 수 있다.

const ErrorWithHOC = hocErr(highOrderComponent(TextInput))

function hocErr(Component){
  return ({err = "에러입니다.", ...rest}) => (
    <div>
      <Component {...rest}>
      <span>{err}</span>
    </div>
  )
}

// 이하동일