React 프로그램에서 튜토리얼 모달 만들며 OCP(Open Closed Principle) 적용 시도

안녕하세요:) 개발자 우디입니다! 아래 내용 관련하여 작업 중이신 분들께 도움이되길 바라며 글을 공유하니 참고 부탁드립니다😊
(이번에 벨로그로 이사오면서 예전 글을 옮겨적었습니다. 이 점 양해 부탁드립니다!)

작업 시점: 2021년 6월

배경

• 사용자들이 튜토리얼 이미지를 버튼으로 넘기면서 프로그램 사용법을 익힐 수 있도록 튜토리얼 모달 구현이 필요했음.

생각 및 고민

• 이미지들이 많기도 했고, 많은 기능을 담고 있다보니 앞으로 기능이 추가되면 변경될 가능성도 있다고 생각해서 최대한 확장성 있게 작성해보자는 생각이 들었음.
• 확장성 있게 작성하는 방법에 대해 고민하다가 SOLID 원칙의 OCP (Open Closed Principle)를 최대한 적용해보기로 함

OCP (Open Closed Principle) 개방-폐쇄 원칙

• 객체지향의 SOLID 5대 원칙 중 하나로, 확장에는 열려있어야 하고, 수정에는 닫혀있어야 한다는 의미
• 요구사항의 변경이나 추가사항이 발생하더라도, 기존 구성요소는 수정이 일어나지 말아야 하며, 기존 구성요소를 쉽게 확장해서 재사용할 수 있어야 한다는 뜻
• 변경(확장)될 것과, 변하지 않을 것을 구분하는 것이 중요하다고 함

구현 과정

• 튜토리얼 이미지만 변경될 가능성이 있고, 나머지 UI는 변하지 않을 것이기 때문에 튜토리얼 이미지의 변경 가능성을 고려하며 구현함

• 튜토리얼 이미지

  const tutorialImage = {
    afterLogin: {
      1: tutorialImg1_1,
      2: tutorialImg1_2,
      3: tutorialImg1_3,
      4: tutorialImg1_4,
      5: tutorialImg1_5,
      6: tutorialImg1_6,
      7: tutorialImg1_7,
      8: tutorialImg1_8,
    },
    afterAnalysis: {
      1: tutorialImg2_1,
      2: tutorialImg2_2,
      3: tutorialImg2_3,
      4: tutorialImg2_4,
      5: tutorialImg2_5,
      6: tutorialImg2_6,
      7: tutorialImg2_7,
      8: tutorialImg2_8,
      9: tutorialImg2_9,
    },
  };

• 사용자가 버튼 누르거나 하면 함수 실행하여 적절한 이미지로 바꿔주기

• 기타 UI 구현

  constructor(props) {
    super(props);
  
    this.state = {
      isLastButton: false,
    };
  
    this.currentBackgroundImageNumber = 1;
    this.tutorialModalType = null;
  }
  ...생략...
  render() {
    this.tutorialModalType =
      this.props.tutorialModalType === 'afterLogin' ? 'afterLogin' : 'afterAnalysis';
  
    return (
      ...생략...
        <Modal
          isOpen={this.props.isModalOpen}
          onRequestClose={this.props.closeCallback}
          style={modalStyles}
          shouldCloseOnOverlayClick={false}
          shouldCloseOnEsc={false}
          contentLabel="튜토리얼"
        >
          <div className="tutorialModalContainer" id="tutorialModalContainer">
            <img
              id="tutorialImage"
              src={tutorialImage[this.tutorialModalType][this.currentBackgroundImageNumber]}
              width="100%"
              height="100%"
              alt=""
            />
            <div className="buttonWrapper">
              <button className="skipButton" onClick={this.onSkipButtonClick}>
                건너뛰기
              </button>
              <button className="backButton" onClick={this.onBackButtonClick}>
                뒤로가기
              </button>
              {this.state.isLastButton ? (
                <button className="nextButton" onClick={this.onCompleteButtonClick}>
                  완료하기
                </button>
              ) : (
                <button className="nextButton" onClick={this.onNextButtonClick}>
                  다음단계
                </button>
              )}
            </div>
          </div>
        </Modal>
      </div>
    );
  }

배우고 느낀 점

• 완벽하지는 않지만 객체지향에서 배운 개념을 적용해보려고 했다는 것과 이를 위해 여러가지 방향성으로 고민하는 과정이 의미있었다
• 앞으로도 열심히 배우고 계속 활용해보려고 하면서 완전히 이해하려고 노력해야겠다