728x90
728x90
리액트 네이티브에서 라우팅을 하기 위해서 다음과 같은 라이브러리를 사용할 수 있다. @react-navigation/native @react-navigation/drawer @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/material-top-tabs @react-navigation/native는 필수로 사용되고, 나머지 네비게이션들은 필요에 따라 설치하여 사용한다. import { NavigationContainer } from '@react-navigation/native'; 네비게이션을 사용하기 위해서 최상단에 선언되야 하며, NavigationContainer 컴포넌트로 감싸진 자식 컴포넌트에서 네비게이션이 동작할 ..
Redux는 자바스크립트 어플리케이션에서 예측 가능한 상태의 관리를 해주는 container이다. 상태 관리를 위한 전역 상태의 저장소를 제공한다. Redux는 react의 하위 라이브러리가 아니고, 자바스크립트 어플리케이션이라면 사용이 가능하다. 컴포넌트간의 정보 공유가 필요할 때, 복잡성을 줄이기 위해서 상태관리 라이브러리인 redux를 사용한다. // NPM 으로 설치 npm install redux // Yarn 으로 설치 yarn add redux 참고 자료 : https://ko.redux.js.org/introduction/getting-started Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org Redux의 세 가지..
🍎 Axios나 ky, got과 같은 Promise 기반 HTTP 라이브러리에서는 interceptors 기능을 제공한다. 🍏 interceptors를 설정하여 매번 API가 처리되기 전에, 요청이나 응답을 가로채 그 사이에 함수를 실행시킬 수 있다. 예를 들면, 요청 전에 인증 토큰을 가져와 설정해두면, 매번 요청할 때 마다 인증 설정을 해야하는 번거로움을 줄일 수 있다. axios.interceptors.response.use( response => response, // 성공 error => { const { config, // 기존의 요청 response: {status}, } = error; console.log("status", status); return Promise.reject(error..
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. clean-up 함수를 사용하게 되면 렌더링이 될 때, 이전에 남은 함수가 실행되어 메모리 누수가 일어나는 일을 막을 수 있다. useEffect를 사용하여 컴포넌트에서 side effect를 수행하는데, 이때 렌더링이 발생시 메모리 누수가 일어날 수 있다. 🍠 데이터 가져오기, 구독 설정, 수동으로 ..
C언어나 자바를 사용했었던 나에게 파이썬이나 자바스크립트는 어색한 부분이 있었다. 시간이 지나 이제는 익숙해졌지만, 여전히 자바스크립트를 사용하며 마주하는 문제가 있다. 바로, 자바나 C언어와는 다르게 변수에 type을 지정하지 않는 자바스크립트의 특성 때문에 가끔 예상치 못한 오류가 발생하는 것이다. 이러한 문제를 해결 해주는 TypeScript(타입스크립트)의 편리함을 알아가보고자 간단하게나마 타입스크립트를 사용해보기로 하였다. 설치 npm install typescript --save-dev 또는 글로벌 설치 npm i -g typescript 타입스크립트의 확장자 🥥 타입스크립트의 확장자는 .ts이다 🥥 리액트에서 컴포넌트를 표현할 땐, .jsx 대신 .tsx를 사용할 수 있다. 간단한 사용 예 ..
자신이 짠 코드라도, 시간이 지난 뒤에 보면 이게 무슨 코드지? 하는 생각이 들 때가 있다. 하물며, 다른 사람이 내 코드를 보는 것은 어떨까? 그렇기에, 최대한 깔끔한 코드와 프로젝트를 위해서 내가 알아낸 방법을 남기고자 한다. Styled-Components 분리하기 (S-dot) Styled-Components의 이름을 짓는 방법에 대해서 고민하던 와중, 외국의 블로그들과 다른 사람들의 코드를 보고 찾은 방법이다. 기본적으로 다음과 같이 Styled-Components를 작성한다. import styled from 'styled-components'; const S = {}; S.Home = styled.div` text-align: center; font-size: 1.3rem; ` S.P = s..