2022.06.30 - React / HOC, 엘리먼트 상태관리

1. HOC (Higher Order Component) :  고차 컴포넌트 

https://ko.reactjs.org/docs/higher-order-components.html

컴포넌트 안에 있는 로직을 재활용할 수 있는 기술 

HOC = funciton(컴포넌트) {return 새로운 컴포넌트 }

=> 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 함수 

 

- withRouter() : 보통 with 가 붙은 함수가 HOC 인 경우가 많다. 

- render Method 안에서 사용 불가

- Refs를 바로 통과시키지 못한다. 

 

 

2. 엘리먼트의 상태 관리 

https://ko.reactjs.org/docs/forms.html

- controlled : 엘리먼트를 가지고 있는 컴포넌트가 관리

import React from "react";

class ControlledComponent extends React.Component {
  state = {
    value: "",
  };
  render() {
    const { value } = this.state;
    return (
      <div>
        <input value={value} onChange={this.change} />
        <button onClick={this.click}>전송</button>
      </div>
    );
  }
  // state의 value와 input안에 있는 상태(value)가 같음 (state를 읽어서 넣어서 보여준다고 생각하면됨)
  // input이 바뀌게 되면 다시 state를 setState로 호출해서 value값을 바꾼 후 render를 다시한다.
  // 항상 change 일어나면 다시 서로 맞춰주게됨
  change = (e) => {
    console.log(e.target.value);

    this.setState({ value: e.target.value });
  };
  click = () => {
    console.log(this.state.value);
  };
}

export default ControlledComponent;

 

- uncontrolled : 엘리먼트의 상태를 관리하지 않고, 엘리먼트의  참조만 컴포넌트가 소유한다. 

모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 ref 를 사용하여  DOM에서 폼 값을 가져올 수 있다. 

import React from "react";

class UnControlledComponent extends React.Component {
  render() {
    return (
      <div>
        <input id="my-input" />
        <button onClick={this.click}>전송</button>
      </div>
    );
  }
  click = () => {
    //input 엘리먼트의 현재 상태 값(value)를 꺼내서 전송한다.
    const input = document.querySelector("#my-input");
    console.log(input.value);
  };
}

export default UnControlledComponent;

 

- 차이점

매번 상태가 변경되는 상황에서 ui를 함께 변경해서 보여주고 싶은 경우는

ref 보다 controlled가 더 쉬움