본문 바로가기

React22

[REACT] Context API, useContext hook, Redux 개념 전역적으로 사용할 데이터가 있을 때 사용 Consumer createContext로 기본 설정 한 값을 사용하는 메소드 Provider createContext로 설정한 값 외에 사용하고 싶은 값을 지정할 때 쓰는 메소드 value 없이 사용 할 경우 기본값도 사용하지 않기 때문에 에러가 난다. useContext 리액트 내장 훅, 함수형 컴포넌트에서 Context를 쉽게 사용할 수 있다. Redux 가장 많이 사용하는 리액트 상태 관리 라이브러리 Context API의 상위 버전 쯤으로 생각하면 될 것 같다. 상태를 더욱 체계적으로 관리하고 유지보수도 수월하다. 꼭 리액트 안에서만 써야하는 것도 아니다. Redux의 구성 액션 액션 생성 함수 리듀서 스토어 디스패치 구독 Redux 세 가지 규칙 .. 2020. 8. 1.
[REACT] React-virtualized | 화면에 보일 때만 렌더링 하기 모든 화면이나, 특히 리스트의 경우 실제 데이터와 화면에 나타날 수 있는 데이터가 다르다. 데이터가 10,000개가 있다고 해도 화면에 보이는건 10개이고, 스크롤을 해서 내려야만 나머지 9,990개를 볼 수 있다. 따라서 이런 불필요한 렌더링을 방지하기 위해 쓰는것이 react-virtualized 라이브러리다. 전체 크기, 전체 높이, 항목 개수, 항목 높이 등을 설정해주어야 하는 불편함이 있다. 2020. 7. 26.
[REACT] 불변성의 중요성 지금까지 리액트를 공부하면서 불변성이 중요하다, 중요하다 들어왔다. 그런데 왜 중요한지 모르고 있었는데 지금에서야 알게 되었다. 리액트는 변화를 감지하여 그 부분만 리렌더링 해줌으로써 그 장점이 큰 프레임워크다. 따라서 변화를 감지하기 위해서는 이전값과 현재값이 필요하다. 이전에는 12였는데 지금은 13이 되었다면 변화한 것이 맞다. 그런데 JS의 특성상 let array = [1,2,3]; 이 있을 때, let array2 = array; array2.push(4); 라고 한다면 array2에만 4가 더해지는게 아니라 기존 array에도 더해지는 것이다. 불변성이 파괴되고, 값을 비교할 수 없다. 저렇게 되면 리액트에서 변화를 감지할 수 없기 때문에, 불변성을 잘 지켜줘야 한다. 따라서 전개연산자(.... 2020. 7. 26.
[React] 라이프 사이클 메서드 리액트의 라이프사이클 메서드는 아래와 같은 형식으로 나누어 볼 수 있고, 총 9가지로 구성되어 있다. 시간 관계로 나누어 볼 때 Will : 어떤 작업을 하기전에 실행되는 - Did : 어떤 작업이 되고 난 후 - DOM 생성, 업데이트, 삭제 작업으로 나누어 볼 때 Mount DOM이 생성되고 브라우저상에 나타나는 것을 지칭한다. 이때 호출하는 메서드는 constructor : 컴포넌트를 새로 만들 때마다 호출 되는 메서드 getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링하는 메서드 componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 Update 다음과 같은 상황.. 2020. 7. 12.
[React] Typo in static class property declaration react/no-typos MyComponent.PropTypes = { name: PropTypes.string } 타입 검사를 할 때 나는 에러, MyComponent.propTypes 라고 소문자로 바꿔주어야 정상적으로 작동한다. 2020. 7. 9.
[RN] React native, 로딩 화면, 스위치 로딩화면, 아이콘 import React from "react"; import { ActivityIndicator, StyleSheet, Text, View } from "react-native"; export default function App() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center" }, horizontal: { flexDirection: "row", justifyContent: "space-around", padding: 10 } }); 핵심: size와 color import { ActivityIndicator } from "react-native"; 스위치 .. 2020. 5. 24.
[RN] Context API, AsyncStorage Context란 React에서 데이터를 관리할 때, 데이터의 흐름은 부모에서 자식으로 전달이 된다. 그렇게 되면 전혀 다른 흐름에서 같은 데이터를 쓰기 위해서는 공통되는 부모 컴포넌트까지 데이터를 전달하고, 다시 그 부모 컴포넌트로부터 데이터를 내려받아야 한다. 그런 비효율을 없애기 위해 Context를 사용한다. 데이터를 가지고 있는 A컴포넌트와 데이터를 받을 B컴포넌트 사이에 가상의 컴포넌트를 만들어 주는 것이다. Context컴포넌트가 부모 컴포넌트로 바로 데이터를 전달한다. 그래서 Context에는 Provider와 Consumer가 있다. 내가 공부하고 있는 React native에서는 AsyncStorage를 사용하여 앱 내에 데이터를 저장한다. 2020. 5. 17.
[RN] React-native android 빌드시 오류(Android project not found.) error Android project not found. Are you sure this is a React Native project? If your Android files are located in a non-standard location (e.g. not inside 'android' folder), consider setting `project.android.sourceDir` option to point to a new location. Run CLI with --verbose flag for more details. 해당 오류가 나올 경우가 있다. 분명 어제까지 잘 됐는데...? 해서 알아보니 설정 파일 삭제 React-native 업그레이드 두가지 방법이 있다. 1. 설정 파일 삭제 해.. 2020. 5. 12.
React native, Expo eject 시 오류, android ios 폴더 만들기 expo init으로 프로젝트를 생성할 때, android 폴더와 ios 폴더가 없을 경우가 있다. 이럴 경우 expo eject로 생성을 할 수 있는데, 해당 명령어를 하면 3가지 옵션이 나온다. 첫번째, 기본 eject 두번째, expokit ? 세번째, 취소 두번째로 먼저 시도를 해 보았는데, android폴더만 생기고 실행도 되지 않았다. 패스. 첫번째로 다시 시도해 보았는데 eject는 잘 되었다. 하지만 실행이 되지 않았다. 그 대신 오류 문구를 던져주었다. react-native-screens - expected version range: 2.0.0-alpha.12 - actual version installed: ~2.0.0-alpha.12Some of your project's depen.. 2020. 2. 7.

티스토리툴바