[React Native] ScrollView와 FlatList

React Native에서 스크롤 가능한 영역을 만들 때 사용하는 두 컴포넌트를 정리해보자!  ScrollViewScrollView는 모든 자식 요소를 한번에 로드하고 렌더링하는 스크롤 컨테이너다.따라서 스크롤 가능한 컨텐츠가 적거나, 컨텐츠가 한정되어 있을 때 사용하는 것이 좋다. 웹개발시 JSX로 목록을 렌더링할 때 많이 사용했듯이 map 등을 이용해 스크롤할 요소들을 ScrollView의 자식컴포넌트로 지정해준다. 예시 {courseGoals.map((goal) => ( {goal} ))} courseGoals라는 배열에 담긴 goal들을 Text 컴포넌트로 출력하는 예시다. ScrollView는 기본적으로 내부(자식..

• format_list_bulleted React Native
• · 2025. 2. 4.
• textsms

React Native의 주요 컴포넌트와 스타일링

React Native의 주요 컴포넌트React Native에서는 , 같은 HTML 태그를 사용할 수 없다.네이티브 앱은 브라우저에서 실행되지 않으며, DOM이 없기 때문이다.대신 React Native는 우리가 작성한 JSX 태그를 각 네이티브 환경에 맞게 변환해준다. 예시React Native JSX의 는 각 환경에서 아래와 같이 변환된다.React-dom의 Android Native Component의 android.ViewiOS Native Component의 UIView App 컴포넌트App.js 파일에서 App 컴포넌트를 내보낸다.이는 앱의 루트 컴포넌트로 사용된다. View 컴포넌트HTML의 div와 유사하지만, 내부에 직접 문자열을 넣을 수 없다.텍스트를 넣고싶은 경우 태그를 사용해야..

• format_list_bulleted React Native
• · 2025. 1. 31.
• textsms

React Native에 대해 알아보자 - 개념, 설치, 실행 with Expo CLI

React.jsReact.js는 UI를 만들기 위한 JavaScript 라이브러리다.보통 웹 개발에 많이 사용되며, 컴포넌트 기반으로 UI를 구성하고 이를 통해 재사용 가능한 UI를 만들 수 있게 한다. React-dom리액트를 사용해 웹 애플리케이션을 구축하는 데 필요한 라이브러리다.사실 리액트 자체는 플랫폼에 구축받지 않고 웹을 포함한 다양한 플랫폼에서 사용할 수 있는 독립적인 라이브러리다.이 때 React-dom은 브라우저 환경에서 리액트 앱을 실제로 실행할 수 있게 해주는 도구다.리액트가 가상 DOM을 사용해 UI를 업데이트하고, React-dom은 그 업데이트를 실제 dom에 반영한다. React NativeReact Native는 리액트의 개념을 모바일 애플리케이션에 적용한 툴이다.필요한 컴포..

• format_list_bulleted React Native
• · 2025. 1. 30.
• textsms