Skeleton의 세상

웹에서는 스크롤이 자동으로 설정되며 스크롤을 할 수 있지만 앱에서의 뷰는 자동으로 스크롤이 적용되지 않습니다. 그렇기 때문에 리액트 네이티브 요소중 ScrollView가 있습니다. ScrollView에 대하여 한번 알아 볼까요. View와 크게 다른점은 없습니다. 그저 ScrollView로 한번 감싸주면 되는 것이지요 export default function App() { return ( 스크롤이 내려올정도로 텍스트를 적어보세요 ); } 위와 같이 적는다면 스크롤뷰가 가능합니다. 스크롤 뷰에도 엄청나게 다양한 레퍼런스가 존재하는데 그양이 너무 많아서 여기에 전부 나열하기에는 무리가 있다고 판단하여 공식 홈페이지 문서링크를 남겨두려 합니다. https://reactnative.dev/docs/scroll..

와 같은 역할이라 볼 수 있는 에 대하여 알아봅시다 바로 코드로 알아보죠 const styles = StyleSheet.create({ mainText: { fontFamily: "Cochin" }, titleText: { fontSize: 20, fontWeight: "bold" } }); const TextInANest = () => { const titleText = useState("Bird's Nest"); const bodyText = useState("This is not really a bird nest."); return ( {titleText} {"\n"} {"\n"} {bodyText} ); }; 위와 같이 사용이 가능합니다. 위의 styles를 통하여 스타일을 정의하고 render하..

앱의 가장 기본이 되는 요소가 있습니다. 이는 뷰 (View) 입니다. 뷰는 웹의 와 같다고 보면 됩니다. 코드를 통해 간단히 알아봅시다 뷰안의 뷰 입니다 위의 코드는 이러한 뷰 스타일을 가집니다. 검은 배경이 가장 밖의 뷰, 빨간 배경이 안의 뷰 입니다. 뷰는 기본적으로 display: flex를 가지고 있으며 column 을 기본으로 합니다. 그렇기 때문에 아래의 코드로 보면 뷰안의 뷰 입니다 뷰안의 뷰 입니다2 이러한 모양을 가집니다. 정말 별거 없죠? 이상 뷰(View)에 대하여 알아보았습니다. 여러 요소들을 합쳐서 쓰는것은 다른 글로 포스팅 하도록 하겠습니다!

리액트 네이티브에는 Image를 넣는 요소가 두가지나 존재합니다. 한가지는 를 사용하는 것이고 두번째는 를 이용하는 것입니다. 두개의 요소가 무슨차이점이 있는가 사실... 차이점을 모르겠습니다. Image를 써도 ImageBackground를 써도 똑같이 동작하기 때문이죠 리액트 네이티브 문서에서는 이렇게 설명하고 있습니다. 웹에 익숙한 개발자의 일반적인 기능 요청은 background-image입니다. 이 사용 사례를 처리하기 위해 와 같은 소품을 가진 구성 요소를 사용하고 그 위에 하위 요소를 추가 할 수 있습니다. 라고 적혀있습니다. 허허 무슨말인지 모르겠네요. 그냥 이미지 위에 다른 요소들을 추가할 수 있다. 이런 말인거 같은데 이는 Image요소를 사용해도 똑같습니다. 이제 사용하는 방법을 한번..

리액트와 리액트 네이티브는 대부분 비슷하게 동작을 하지만 렌더링과 스타일 적용 방법에 대해서는 큰 차이를 보입니다. 뷰를 작업하기 위해서는 알아야할 점이 있습니다. 리액트 네이티브는 기본적으로 앱을 만들기위해 만들어진 프레임워크로 웹을 만들기 위해서 만들어진 리액트와는 차이점이 있습니다. 리액트는 일반적인 HTML요소를 사용하여 렌더링을 할 수 있지만 리액트 네이티브는 앱에 종속적인 리액트 컴포넌트를 사용합니다. 리액트 컴포넌트를 사용하는 이유는 IOS Android 등 각 앱에 대응하여 해당 앱의 코드로 변환하기 때문입니다. 간단히 표로 리액트와 리액트 네이티브 요소의 차이점을 알아봅시다 리액트 (React) 리액트 네이티브 (React-Native) , 위와 같이 차이점이 있습니다. 위에 적은것 말고..

React-Native란 무엇일까? IOS와 Android에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크입니다. 장점 1. 웹 개발자가 익숙한 자바스크립트를 이용하면서 겉모습과 실제 동작까지 진짜 네이티브인 모바일 앱을 만들 수 있습니다. 2. 그리고 Node.js를 이용하기때문에 플랫폼간의 공유가 가능하고 쉽고 빠르게 앱을 개발할 수 있다는 장점이 있죠. 굉장히 편해보이는 프레임워크이지만 단점이 존재합니다. 항상 뭘쓰든 장점이 있다면 단점도 존재하죠! 단점 1. 디버깅이 어렵습니다. 시뮬레이션을 사용하기 때문이죠. 시뮬레이션 디버깅은 항상 어렵더라구요.. ㅠㅠ 2. 플랫폼이 업그레이드 되었을경우 리액트 네이티브가 이를 지원해주기까지의 시간이 존재합니다. 리액트 네이티브는 리액트를 먼저..