본문 바로가기

728x90

🚀 Development59

[React Native] 컴포넌트 스타일링 CSS import “./style.css”;를 작성하여 불러오는 간단한 방식으로, css를 이용하여 스타일링하는 방법이다. CSS로 스타일링을 하면 코드가 길어지는 경우가 생기는데, 이럴 땐 SASS 또는 SCSS 등을 통해 해결할 수 있다. Sass(syntactically awesome stylesheet) 자주 사용하는 css 전처리기 중 하나이다. css3의 확장으로 Dart기반으로 작동하며, 더 쉽게 작성하게 해주는 방식이다. 스타일 코드의 재활용성을 높여주고 코드의 가독성을 높이므로 유지보수에 도움이 된다. 확장자는 .scss와 .sass 두가지를 지원한다. .sass Import하기 위해서 node-sass를 설치한다. $ yarn add node-sass //utils.scss @impo.. 2023. 6. 15.

[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.

이전 1 ··· 8 9 10 11 12 13 14 15 다음

728x90

티스토리툴바