'Electron + React = 💜' 시리즈React + Electron : 이벤트

2020-02-17 06:47

배진오

@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 이벤트가 발생하면 현재의 상태를 파일로 저장하는 코드이다.

'Electron + React = 💜' 시리즈

Electron은 HTML + JavaScript + CSS등 웹스택을 활용하여 데스크톱 어플리케이션을 제작할 수 있는 프레임워크입니다. GitHub에서 IDE Atom을 제작하기 위해 만들어졌으며 Electron을 사용하는 유명한 어플리케이션은 VS Code, Discord가 있습니다.
작성된 댓글이 없습니다!
댓글을 작성하기 위해 로그인이 필요합니다.