오늘 공부하면서 느낀 점
React-Native
일단 이건 오늘 공부해서 알게 된 내용은 아니지만 RN은 Cross Platform Framework 이다.
즉, 코드는 js, react 이지만 그 코드를 내부적으로 Native 하게 변환해줌.
React vs React-Native
- React - HTML tag의 경로 렌더링을 위해 DOM 이 필요(react-dom)
- RN - AppRegistry를 사용하여 앱 등록
→ React - DOM - 웹
< React WorkFlow >
HTML ➡️ Parsing ➡️ DOM Tree ➡️ Style (css ..) ➡️ Parsing ➡️ Render Tree ➡️ Attachment (synchronous) ➡️ Layout(reflow) ➡️ Painting
< RN WorkFlow >
RN 소스.js ➡️ Page Render ➡️ 리엑트 컴포넌트 DOM에 마운팅 ➡️ 브릿지 ➡️ 리엑트 컴포넌트 Rending (Objc api, java api .. ) ➡️ 해당 플랫폼의 Process
Project 도중 RN에서 Toast 만들기
처음에는 모듈로 해결해보려고했지만, toast 모듈 현재 찾아본 결과로는 react 전용 모듈이라면 호환이 안되는듯 함
그리고 찾아보았던 React Native의 toast 모듈은 개인적으로 원하던 기능이 탑재되어있지 않아 마음에 들지 않았고, 그러다보니 그냥 만들어보자는 생각이 들었음.
→ 정확한 이유는 아직 모르겠지만 react-dom은 document? 에 그리는 반면, RN은 AppRegistry에 그린다는 말도 있고, 다른 말은 Virtual-dom에 그린 내용을 bridge? 를 태워 native한 코드로 내부변환 시키는 동작이 있다고 하는 말도 있는듯
My Toast Code
<View
style={{
position: 'relative',
flex: 1,
bottom: height / 15,
justifyContent: 'center',
}}
onPress={() => setIsToastOn(false)}
>
<View style={{
height: 56,
alignItems: 'center',
}}>
<View style={{
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 16,
paddingHorizontal: 24,
borderRadius: 32,
backgroundColor: '#000000CC',
}}>
<Text style={{,
marginRight: 15,
}}>
toast 만들기
</Text>
<TouchableOpacity>
<Image
style={{ width: 9.4, height: 9.4, }}
/>
</TouchableOpacity>
</View>
</View>
</View>여기서 중요한 포인트는 가장 바깥부분의 틀이 되는 View는 relative 속성을 주어 다른 component들의 위치에 구애받지 않도록 절대적인 위치를 지정해줌.
그리고 그 자리에 flex 속성을 넣어 해당 공간을 모두 사용할 수 있도록 선언.
내부에는 해당 내용이 들어갈 틀을 만들고 item 2개가 한줄로 가운데 정렬되어 있어야하기 때문에,
flexDirection을 row로 주고, alignItem 속성을 주어 가운데 정렬을 완성.
앞으로 공부해보면 좋을 것들
이전에도 계속해서 주시하고있었지만, StoryBook 이라는 UI 개발 환경 라이브러리? 를 공부하고 적극 도입한다면, 실무에서의 효율성뿐 아니라, 이후 개인 Project 및 다른 사람과의 협업에서도 좋은 도구가 될 것 같다는 생각.
현재는 web에서 스타일링하는 방식대로 반응형에 focus를 두어 최대한 flex로 간격을 제어하려고 하는 중이다.
이 부분을 계속 의심하면서 더 좋은 방법이 있는지 찾아봐야겠다.
