Electron + React = 💜

  • 11. Electron : Icons
  • 10. Electron : Build
  • 9. Electron : Native Node Module
  • 8. Electron : Shell
  • 7. React : 상태 관리
  • 6. React + Electron : 이벤트
  • 5. React + Electron : Example
  • 4. Electron : 이벤트
  • 3. Electron : 통신
  • 2. Electron : 기본 기능
  • 1. Electron : 구성

React + Electron : 이벤트

5개월, 3주 전
@baealex

소비적인 일보단 생산적인 일을 좋아합니다.

Send

const { ipcRenderer } = window.require("electron");

class App extends Component {
    ...
    btnClick = () => {
        ipcRenderer.send('button-click');
    }
    render() {
        ...
        return (
            <button onClick={this.btnClick}></button>
        )
        ...
    }
}

Electron에서는 Electron : 이벤트와 마찬가지로 이벤트를 처리해주면 된다!


On

const { ipcRenderer } = window.require("electron");

class App extends Component {
    componentDidMount = () => {
        ipcRenderer.send('call-init');

        ipcRenderer.on('data-init', (event, arg) => {
            this.setState({
                information: arg,
            });
            this.id = arg.length;
        });
    }
}

componentDidMount에 이벤트를 작성했더니 정상적으로 동작했다.

ipcMain.on('data-save', (event, arg) => {
  fs.writeFile('save.data', JSON.stringify(arg), 'utf8', function(error) {
    console.log('error');
  });
})

ipcMain.on('call-init', (event, arg) => {
  fs.readFile('save.data', function(error, data) {
    event.sender.send('data-init', JSON.parse(data));
  })
})

컴포넌트를 초기화 한 경우 call-init 이벤트를 실행하여 값을 초기화해주고 data-save 이벤트가 발생하면 현재의 상태를 파일로 저장하는 코드이다.

작성된 댓글이 없습니다!
로그인된 사용자만 댓글을 작성할 수 있습니다.