티스토리에 markdown으로 글을 쓰기 위해 만든 에디터에 material-ui를 적용해보았다. material-ui는 react용으로 material.io에 정의된 component를 구현해놓은 것이다. meterial design light로 직접 만들어도 되겠지만 이미 잘 만들어진 것이 있는데 굳이 내가 또 만들 필요는 없다. (하지만 결국 typography 때문에 mdl도 import했다 ;;)
설정
Get started에 사용법은 잘 설명이 되어 있어 간단히 정리해보자면 material-ui, react-tab-event-plugin를 npm으로 설치하고 App을 MuiThemeProvider로 감싸주면 준비가 완료된다.
react-tab-event-plugin은 onTouchTap이벤트를 사용안하면 굳이 설치안해도 되지만 내부적으로 있다고 가정하고 있기 때문에 오류메시지가 계속 나온다. 그냥 하라는대로 하는게 좋다.
사용
Components에 정의된 component를 사용해서 ui를 만들어가면 된다. material-ui는 bootstrap이나 mdl처럼 layout을 제공하지는 않는다. 그저 component를 사용하게 해줄 뿐이니 ui 구성은 알아서 하고 필요한 component만 사용한다. 이 때문에 결국 mdl의 css를 사용하게 됐다. 이럴거면 그냥 mdl을 사용해야했나 싶다가고 component를 잘 포장해 둔 것이 맘에 들어 참기로 한다.
완료
일단 글 ui에 모두 적용이 완료되었다. custom은 거의 하지 않고 있는 그대로 사용했는데 좀 더 익숙해지면 custom하는 것도 도전해봐야겠다. 어쨌든 디자인 부담이 없다는 것에 만족.
