Framework29 React Native/Typescript 환경에서 Styled-component를 사용하는 방법 서론 대상독자 RN 개발 시, Styled-component를 사용하고 싶은 개발자 학습목표 오늘은 RN Expo와 타입스크립트 환경에서 Styled-component를 설정하는 방법에 대해서 알아보겠습니다. 본론 라이브러리 설치하기 yarn add styled-components; yarn add -D @types/styled-components @types/styled-components-react-native 리액트에서 사용할 때와 유일한 차이점은 @types/styled-components-react-native 패키지를 추가로 설치해준다는 점입니다. 실제로 사용해보기 테스트를 위해 버튼 컴포넌트를 스타일드 컴포넌트를 활용하여, 스타일링 해보도록 하겠습니다. 잘 적용되는 것을 보실 수 있을 겁니다.. Framework/React & RN 2022. 4. 1. React Native 환경에서 svg 파일 불러오는 방법 서론 대상독자 RN 개발 시, svg 파일을 사용하고 싶은 개발자 학습목표 오늘은 RN Expo 환경에서 svg 파일을 불러오는 방법에 대해서 알아보겠습니다. 본론 react-native-svg와 react-native-svg-transformer 설치하기 yarn add react-native-svg react-native-svg-transformer react-native-svg와 react-native-svg-transformer란 라이브러리를 설치해줍니다. metro.config.js 수정하기 그런 뒤, metro.config.js 파일에서 아래와 같이 설정해줍니다. const { getDefaultConfig } = require("expo/metro-config"); module.exports.. Framework/React & RN 2022. 4. 1. [React] 함수형 컴포넌트와 클래스 컴포넌트의 차이점 서론 오늘은 리액트를 배운 사람이라면 한 번쯤은 묻게 되는 기본적인 내용에 관해서 정리해보려고 합니다. 지금은 함수형 컴포넌트와 Hooks로 리액트 컴포넌트를 작성하는 게 일반적이지만, Hook가 정식으로 추가되기 전인 React 버전 16.8 (2019년 2월 출시) 이전에는 클래스형 컴포넌트를 작성하는 것이 일반적이었습니다. 또 오픈소스 프로젝트 중 여전히 클래스형 컴포넌트로 작성된 경우가 더러 있습니다. 따라서 오늘은 그 둘의 차이점에 대해서 알아보고, 리액트에서 왜 Hooks로 작성하는 것을 권장하는 지 알아보도록 하겠습니다. 이 차이는 클래스와 함수의 차이에서 비롯됩니다. 함수형에서는 this가 가리키는 undefined인 반면, 클래스형에서는 해당 객체를 가리킵니다. 문제는 이 this가 컴포.. Framework/React & RN 2022. 3. 30. ReactNative 개발, 어떻게 시작하면 좋을까? 서론 대상독자 React 개발을 경험이 있으나, 처음 React Native(이하 RN)으로 앱 개발을 하려는 프론트엔드 개발자 학습목표 리액트와 RN의 차이점을 알고 그 차이가 어디에서 비롯되는지 이해한다. 네이티브 앱과 RN의 차이점을 알고 RN의 한계점에 대해서 이해한다. RN 개발환경을 이해하고 상황에 맞게 능동적으로 선택할 수 있다. Expo와 React Native Init 간 차이점을 알고 장/단점을 설명할 수 있다. 본론 리액트와의 차이점 RN을 활용하면, 리액트에서 자주 활용했던 jsx 문법, 라이프사이클 함수, react hooks, 함수형/클래스형 컴포넌트 등을 활용할 수 있습니다. 그래서 공통점을 언급하는 것보다는 차이점에 대해서 중점을 두고 설명해보려 합니다. 웹이 아닌 앱 개발에.. Framework/React & RN 2021. 12. 29. [FE] 프론트엔드에서의 상태관리란 무엇인가? (1) 등장배경과 정의 서론 대상독자 프론트엔드(이하 FE) 상태관리를 처음 접하는 웹 프로그래밍 입문자. 큰 맥락에서 FE 상태관리를 이해하고 싶은 웹 프로그래밍 초급자. 오늘의 학습 목표 웹의 역사와 FE 상태관리의 등장배경에 대해서 이해한다. 상태관리의 정의를 이해하고 활용 방법에 대해서 학습한다. 다양한 상태관리 라이브러리들의 장/단점을 비교할 수 있다. 개발 상황에 알맞게, 상태관리 라이브러리를 선택할 수 있다. 실제 웹 어플리케이션에 필요한 기능을 상태관리를 활용하여 구현할 수 있다. 프론트엔드 상태관리란 무엇이며, 왜 필요한가? FE 개발을 할 때, 가장 중요하게 여겨지는 두 가지가 있습니다. 바로 스타일링과 상태관리인데요, 그래서인지 프론트엔드 개발을 할 때 어떤 상태관리 라이브러리를 사용할 것인지가 화두로 떠오.. Framework/React & RN 2021. 11. 6. 이전 1 2 3 다음 반응형
