Electron+React 프로그램에서 타이틀바 문구 수정하기

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

작업 시점: 2021년 4월

기능 개요

• 사용자가 프로그램을 사용하며 데이터 수정 시 일렉트론 타이틀바에 *표 추가
• 사용자가 저장 버튼 누르면 타이틀바의 *표 사라짐

IPC 통신

• 사용자가 수정하는 것은 렌더러 프로세스이고, 일렉트론 타이틀바 관련 설정이 있는 곳은 메인 프로세스임.
• 메인과 렌더러 프로세스가 통신해야 하기 때문에, IPC (Inter-Process Communication) 개념이 필요
• Electron에서는 ipcMain및 ipcRenderer모듈을 사용하여 개발자가 정의한 채널을 통해 메시지를 전달하는 방식으로 통신이 이루어짐

구현 과정

• 렌더러 프로세스

  updateTitle = newTitle => {
    ipcRenderer.send('update-title', newTitle);
  };
  
  updateTitleAfterChange = newTitle => {
    let isProjectSaved = this.props.projectContext.api.getIsProjectSaved();
  
    if (isProjectSaved) {
      this.projectSaveLoadManager.isChangedFromSaveOrInitialization()
        ? this.updateTitle(newTitle + ' *')
        : this.updateTitle(newTitle);
    }
  };

  • 메인 프로세스와 통신하는 함수 updateTitle. 'update-title'채널로 메인 프로세스에 메시지 보냄.
  • 프로젝트 저장 및 수정 여부에 따라 * 표시를 추가 및 제거하는 함수 updateTitleAfterChange. 렌더러 쪽에서는 사용자가 수정 및 저장 시 이 함수를 활용

• 메인 프로세스

  ipcMain.on('update-title', (event, newTitle) => {
    win.setTitle(newTitle);
  });

  • 'update-title'채널로부터 메시지를 받아 타이틀 업데이트 진행
  • 일렉트론의 BrowserWindow 인스턴스인 win에 setTitle 해줌