ReactJS 요소와 하위 요소를 초기 상태로 재설정하는 방법은 무엇인가요?

ReactJS 요소를 ‘재설정’하는 방법

ReactJS 요소를 재설정하는 것은 특히 페이지의 주요 부분을 차지하는 경우 약간 까다로울 수 있습니다. replaceState 메서드를 사용하여 요소의 상태를 재설정할 수는 있지만, 이는 폼 필드와 같은 하위 요소에는 영향을 주지 않을 수 있으며 이들은 여전히 내용을 유지합니다. 이 글에서는 웹페이지가 막 로드된 것처럼 요소와 하위 요소를 다시 렌더링하기 위해 강제로 실행하는 다양한 방법을 살펴보겠습니다.

요소에 키 추가하기

요소와 모든 하위 요소를 다시 렌더링하려면 요소에 키를 추가하는 방법이 있습니다. 키가 변경되면 ReactJS는 새 요소로 처리하고 다시 렌더링합니다. 다음 예를 살펴보겠습니다:

render: function() {
  return (
    <div key={this.state.timestamp} className="Commissioning">
      ...
    </div>
  );
}

위의 예에서 키는 초기 데이터를 보낸 타임스탬프로 설정되었습니다. 타임스탬프를 변경하면 요소와 그 하위 요소가 재설정됩니다.

폼 필드 재설정하기

요소 내의 폼 필드를 특히 재설정하려면 reset() 함수를 사용할 수 있습니다. ReactJS에서는 표준 DOM reset() 함수를 폼 요소에 사용할 수 있습니다. 다음은 예시 코드입니다:

this.refs.someForm.getDOMNode().reset();

위의 예에서 {ref: 'form'}을 사용하여 폼 요소에 참조를 제공한 경우, React.findDOMNode(this.refs.form)에서 reset()을 호출하여 폼 내의 모든 입력을 재설정할 수 있습니다.

로컬 상태를 재설정하기 위한 mixin 사용하기

연속적인 입력 상자와 같은 로컬 중간 컴포넌트 상태가 있는 경우, mixin을 사용하여 로컬 상태를 재설정하는 데 사용할 수 있습니다. mixin은 재설정 작업을 트리거하는 이벤트 시스템을 활용할 수 있습니다. 다음은 잠재적인 mixin 구현의 예입니다:

var ResetStateMixin = {
  componentWillMount: function() {
    myEmitter.on("reset", this._resetState);
  },

  componentWillUnmount: function() {
    myEmitter.off("reset", this._resetState);
  },

  _resetState: function() {
    this.replaceState(this.getInitialState());
  },

  triggerReset: function() {
    myEmitter.emit("reset");
  }
};

위의 예에서 myEmitter라는 이벤트 에미터는 재설정 작업을 트리거하기 위해 사용됩니다. 로컬 상태를 재설정해야하는 컴포넌트는 이 mixin을 활용할 수 있습니다. 예를 들어:

var MyComponent = React.createClass({
  mixins: [ResetStateMixin],

  getInitialState: function() {
    return { ... };
  },

  onResetEverything: function() {
    this.triggerReset();
  },

  // 다른 컴포넌트 코드...
});

this.triggerReset()을 호출함으로써 mixin을 사용하는 모든 컴포넌트는 상태를 초기 상태로 재설정할 수 있습니다.

결론

이 글에서는 ReactJS 요소와 하위 요소를 ‘재설정’하는 다양한 기법을 살펴보았습니다. 요소에 키를 추가하거나 reset() 함수를 사용하여 폼 필드를 재설정하거나 로컬 상태 재설정을 처리하기 위해 mixin을 활용하는 것 등을 통해 ReactJS 애플리케이션에서 요소와 하위 컴포넌트를 효과적으로 새로 고칠 수 있습니다. 특정 사용 사례에 가장 적합한 방법을 선택하여 ReactJS 애플리케이션에서 원활한 재랜더링 경험을 보장하세요.

참고 자료 : 

reactjs