ReactJS에서 컴포넌트를 어떻게 보이게/숨기게 하는지

리액트에서 컴포넌트 보이기/감추기

리액트를 사용하면서 자식 컴포넌트를 보이거나 감추는 문제에 직면한 적이 있다면, 혼자가 아닙니다. 이 블로그 글에서는 이 문제를 해결하는 다양한 접근 방식을 살펴보고 권장되는 방법을 소개합니다.

초기 접근 방식

처음에는 아래와 같은 코드를 사용했을 것입니다:

_click: function() {
  if ($('#add-here').is(':empty'))
    React.render(<Child />, $('#add-here')[0]);
  else
    React.unmountComponentAtNode($('#add-here')[0]);
},
render: function() {
  return(
    <div>
      <div onClick={this._click}>부모 - 자식 추가를 위해 클릭하세요</div>
      <div id="add-here"></div>
    </div>
  )
}

이 접근 방식은 대상 요소가 비어 있는지 확인하고 조건에 따라 React.render 또는 React.unmountComponentAtNode를 사용하여 자식 컴포넌트를 렌더링하거나 해제합니다. 이 방식은 작동할 수 있지만, shouldComponentUpdate가 자식 컴포넌트로 적절하게 전달되지 않고 e.stopPropagation과 같은 이벤트 처리 문제가 발생할 수 있습니다.

선호되는 접근 방식

더 나은 접근 방식은 리액트의 상태(state)를 활용하여 자식 컴포넌트가 보이는지 여부를 관리하는 것입니다. 다음은 예시입니다:

getInitialState: function () {
  return { showChild: false };
},
_click: function() {
  this.setState({showChild: !this.state.showChild});
},
render: function() {
  return(
    <div>
      <div onClick={this._click}>부모 - 자식 추가를 위해 클릭하세요</div>
      {this.state.showChild ? <Child /> : null}
    </div>
  )
}

이 접근 방식에서는 showChild가 false로 설정된 초기 상태를 정의합니다. _click 함수는 상태를 토글하며, showChild 값에 따라 자식 컴포넌트가 조건부로 렌더링됩니다.

구현 예시

다음은 두 가지 구현 예시입니다. 하나는 모던 JavaScript(ES6)를 사용하고, 다른 하나는 클래식 JavaScript(ES5)를 사용합니다:

ES6 예시:

class Child extends React.Component {
  render() {
    return (<div>나는 자식입니다</div>);
  }
}

class ShowHide extends React.Component {
  constructor() {
    super();
    this.state = {
      childVisible: false
    }
  }
  
  render() {
    return (
      <div>
        <div onClick={() => this.onClick()}>
          부모 - 자식 보이기/감추기를 위해 클릭하세요
        </div>
        {
          this.state.childVisible
            ? <Child />
            : null
        }
      </div>
    )
  }

  onClick() {
    this.setState(prevState => ({ childVisible: !prevState.childVisible }));
  }
};

React.render(<ShowHide />, document.getElementById('container'));

ES5 예시:

var Child = React.createClass({
  render: function() {
    return (<div>나는 자식입니다</div>);
  }
});

var ShowHide = React.createClass({
  getInitialState: function () {
    return { childVisible: false };
  },
  
  render: function() {
    return (
      <div>
        <div onClick={this.onClick}>
          부모 - 자식 보이기/감추기를 위해 클릭하세요
        </div>
        {
          this.state.childVisible
            ? <Child />
            : null
        }
      </div>
    )
  },
  
  onClick: function() {
    this.setState({childVisible: !this.state.childVisible});
  }
});

React.render(<ShowHide />, document.body);

이제 선호되는 방식으로 리액트에서 자식 컴포넌트를 보이거나 감추는 방법을 더 잘 이해하셨습니다. 컴포넌트의 상태를 활용하면 올바른 렌더링과 이벤트 처리를 보장할 수 있습니다.

항상 최선의 방법을 따르고, 리액트의 메서드와 기능에 대한 변경과 업데이트를 확인하기 위해 리액트 문서를 업데이트하는 것을 기억하세요.

참고 자료 : 

reactjs