본문 바로가기

728x90

🚀 Development/React Native12

React 개발에 Node.js가 필요한 이유 React를 사용하기 위해 Node.js가 반드시 필요한 것은 아니다. Node.js가 React를 사용하기 더 쉽게 해주는 도구들을 내장하고 있는 오픈소스이자 자바스크립트 실행 환경이기 때문이다. Node.js.를 설치하는 경우 NPM(Node Package Manager)이 같이 설치되는데 이 NPM이란 것을 통해 React개발에 필요한 다양한 모듈들을 다운받아 사용할 수 있다. NPM은 Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할을 하며 설치/관리를 수행할 수 있는 CLI를 제공한다. React개발자들은 다른 개발자들이 구현해 높은 간편하고 필요한 모듈 및 라이브러리들을 다운 받기 위해 node.js를 설치해서 사용한다. node.js를 통해 npm을.. 2023. 6. 15.

[React Native] 레이아웃 스타일링 View 크기(범위)를 결정하는 속성. flex와 width, height으로 나눌 수 있다. flex 크기를 비율로 설정 export default class App extends Component { render() { return ( ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'white', }, case1: { flex: 1, backgroundColor: 'red', }, case2: { flex: 3, backgroundColor: 'green', }, case3: { flex: 1, backgroundColor: 'blue', }, }); width, height 숫자를 넣으면 고정 크기, .. 2023. 6. 15.

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

이전 1 2 3 다음

728x90

티스토리툴바