React.js를 React Native 처럼 사용하기

react-native-web 란?

일반적으로 React를 기반으로 프로젝트를 진행한다고 할 때, 웹 제작은 React.js 앱 제작은 React Native을 사용한다.

같은 React 라지만 React.js와 React Native는 사용법이 아주 살짝 다른 면이 있다. (스타일 적용을 위한 class 적용 부분과 StyleSheet 문법)

 

두가지의 차이점을 모두 고려해서 코딩하면 더욱 좋겠지만 그걸 언제까지 다 기억하고 실수 없이 만들 수 있을 것인가?

(특히 StyleSheet 부분은 String 형태로 데이터를 입력하기 때문에 코딩시 사전 검증 하기도 어려운 면이 있다.)

 

둘다 배워야 하는 러닝커브도 존재 한다. 그만큼 유지보수에도 부담이 가게 된다.

이는 귀차니즘이 강한 나에겐 너무나도 곤욕이다. 하나로 통일해서 작업할 수만 있다면 얼마나 편리할 것인가!?!?

 

그 해결책이 바로 react-native-web 이다.

react-native-web은 <div>, <p> 와 같은 웹용 테그를 전혀 신경쓰지 않고 React Native의 <View>, <Image>등의 테그를 사용하여 웹 코딩 할 수 있게 하는 패기지이다. WOW! AWESOME!!

 

이제 React Native로 문법을 통일하여 러닝커브 없이 편리하게 웹과 앱의 경계를 허물어 보자.

 

다만, 다음과 같이 최신 브라우저에 한정적으로 만 지원하니 미리 알아두고 주의하자.

Chrome, Firefox, Edge, Safari 7+, IE 10+.

 

설치

# yarn add react react-dom react-native-web

 

프로젝트 생성

# create-react-app my-app

 

 

작성중...

 

 

참고:

https://github.com/necolas/react-native-web

https://github.com/necolas/react-native-web/blob/master/docs/guides/getting-started.md