react-controlled & HOC

처음으로 npm에 패키지를 배포했다. 패키지 이름은 제목 그대로 react-controlled 다. react에서 controlled component를 사용할 때마다 반복하던 작업을 패턴으로 만들어봤다. 다른 분이 만들어 놓은 코드에 몇 가지 기능을 추가했다.

controlled component는 value가 onChange 함수를 통해서 관리되어지는 컴포넌트다. 보통 input element에서 사용된다. controlled component를 만들 때마다 다소 지루하게 반복되는 작업이 있다.

• this.state에 해당 value를 저장할 공간 만들기
• onChange 함수 작성하기

만약 name이라는 input을 생성한다고 가정해보자. 보통 다음과 같은 작업이 필요하다.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
  }
  ...
  onChangeName = (event) => {
    this.setState({name: event.target.value});
  }
  ...
  render() {
    ...
    <input value={this.state.name} onChange={this.onChangeName} />
    ...
  }
}

react-controlled를 사용하면 다음과 같이 코드가 간결해진다

class App extends React.Component {
  ...
  render() {
    ...
    <input {...this.props.fields('name')} />
    ...
  }
}

때로는 onChange 함수에서 value를 받아오는 방식이 다른 경우도 있다.

onChangeName = (value) => {
 this.setState({name: value});
}

그리고 default value가 필요한 경우도 있다. 이런 경우에는 constructor 함수에 관련 내용을 추가해준다.

constructor(props) {
  ...
  this.props.fields({
    fieldName: 'name',
    defaultValue: 'mike',
    getValue: args => args[0],
  });
}

Higher-Order-Component ( hoc)

react-controlled는 higher-order-component로 만들어졌다. hoc는 컴포넌트를 입력으로 받아서 새로운 컴포넌트를 출력해주는 함수를 말한다. 주로 컴포넌트에 기능을 추가할 때 사용된다. 예전에는 mixin을 사용했었는데 지금은 거의 사용되지 않고 hoc를 많이 사용한다. mixin을 더 이상 사용하지 않는 이유는 Dan Abramov의 글을 참고하자.

사용 예) 컴포넌트 디버깅

react로 코딩을 하다 보면 컴포넌트의 props와 state를 모니터링하고 싶을 때가 있다. 물론 react 개발 툴을 사용해도 되지만, 페이지를 새로고침 하면 다시 해당 컴포넌트를 선택하는 과정이 쉽지 않다. 이럴 때 hoc로 개발된 코드를 활용할 수 있다.

사용 예) redux의 connect 함수

많은 라이브러리에서 hoc를 활용하고 있다. 대표적으로 redux의 connect 함수가 있다.

connect(mapStateToProps)(TodoApp)

connect 함수의 결과로 hoc 함수가 리턴된다. 이 hoc 함수는 TodoApp에 기능을 추가해서 새로운 컴포넌트를 만들어낸다.

이 밖에도 컴포넌트별로 지표를 확인하기 위해 컴포넌트가 마운트 될 때마다 api를 호출한다거나 컴포넌트별로 권한 레벨을 달리해서 권한이 있는 사용자에게만 해당 컴포넌트를 보여줄 때 hoc를 활용할 수 있다.