본문 바로가기
728x90
반응형

분류 전체보기319

[React Native] context API란 context API 사용하는 이유 React는 기본적으로 Component마다 상태관리를 할 수 있다. 프로젝트 규모가 점점 커지고 복잡해질수록 컴포넌트간의 데이터 전달이 많아지고 복잡해진다. 상태관리 라이브러리를 사용하면 훨씬 쉽게 컴포넌트 간의 상태를 관리 할 수 있다 Context API란? 부모부터 자식에게 props를 통해 데이터를 전달하지만, contex API를 이용하면 트리 단계마다 props를 넘겨주지 않아도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 언제 Context API 사용 하는가? Global하게 데이터를 공유할 수 있도록 고안된 방법이기 때문에, 비슷한 데이터로는 현재 로그인한 유저(로그인 데이터), 테마, 선호하는 언어 등이 있다. 주의할 점 전역 데이터를 한 곳에서.. 2023. 6. 15.
[React Native] State와 React Hook(useState) - 함수형 컴포넌트와 클래스형 컴포넌트 동적인 데이터 다루기 State 클래스형 컴포넌트에서 동적인 데이터를 다룰 땐 state를 사용한다.(글로벌 변수라고 생각) setState state에 있는 값을 바꾸기 위해서는 무조건 this.setState를 거쳐야한다. 리액트에선 이 함수가 호출되면 컴포넌트가 리렌더링 되도록 설계되어 있기 때문이다. setState는 객체로 전달되는 값만 업데이트 한다 state를 이용한 버튼을 누르면 숫자(number)가 카운트 되는 코드 import React, { Component } from 'react'; import {View, Text, Button} from 'react-native'; class App extends Component { state = { number: 0 }; up = () => { this.setS.. 2023. 6. 15.
[React Native] Props 란? 예제 Props, State는 데이터를 다룰 때 사용되는 개념이다. ​ 리액트는 단방향 데이터 플로우(one-way data flow) props를 받은 자식 컴포넌트는 값을 변경할 수 없고, 상위 컴포넌트로 값을 전달할 수 없다. 하위 컴포넌트에서의 변화로 인해 상위 컴포넌트가 변화해야 하는 경우 상위 컴포넌트에 state를 변경하는 함수를 정의하면 된다. ​ Props는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용된다. Props props는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용 -> (자식 입장에서) 읽기 전용 자식 컴포넌트에서는 props를 받기만하고, 받아온 prpos를 직접 수정할 수 없다. defaultProps: props에 값을 입력해주지 않았을 때,.. 2023. 6. 15.
React Native 컴포넌트란? / 클래스형 컴포넌트와 함수형 컴포넌트의 특징 컴포넌트란? 컴포넌트는 UI를 독립적이고 재사용 가능하도록 기능 단위별로 나눠 놓은 단위이다. 화면의 구성 요소들은 여러가지 컴포넌트들로 이루어져 있다. 또한, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행할 수도 있다. 주요 컴포넌트 SafeAreaView 상단에 상태 바와 하단에 홈 버튼 영역을 제외한 영역에 콘텐츠를 표시할 때 사용 View 상태바와 홈 버튼 영역까지 콘텐츠 표시 StyleSheet 리액트 네이티브 컴포넌트에 스타일 적용할 때 사용 리액트 네이티브에서 스타일을 적용하기 위해서는 인라인 스타일과 StyleSheet를 사용하는 방법이 있음 ScrollView 화면 스크롤이 가능한 컴포넌트 화면 스크롤이 가능한 컴포넌트로는 FlatList,.. 2023. 6. 15.
728x90
반응형

티스토리툴바