🌼 리액트 공부18 리액트 컴포넌트 코드 실행순서 서버사이드에서 componentDidMount , componentDidUpdate, componentWillUnmmout가 실행됌 1. 먼저 랜더링이 된다(jsx의 리턴이 발동) 2. console.log("컴포넌트디드마운트") -> console.log("비동기테스트") 실행 3. set함수 실행 => state 변경이 일어나니 다시 '리랜더링'이 일어난다. *랜더링이 된다? 컴포넌트 최상단부터 다시 읽기 시작한다는 것 ?? 리랜더링이 되었을땐, state 값이 바뀐 상태이니 리액트가 알아서 '응 바뀐거없구나' 하고 건너뛰어 또 리랜더링이 안일어나는게 맞나? 리랜더링 과정에서는 useEffect를 점프하고 넘어가서 리턴부분만 실행한다. 4. state변경함수들은 '비동기'함수인데 , 비동기 함수 특징.. 2023. 1. 18. [리액트네이티브] 프로젝트 하면서 궁금한거 적어논 노트 Side Effect란? React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컽습니다. 데이터 가져오기, 구독(subscription) 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects입니다. 이런 기능들(operations)을 side effect(혹은 effect)라 부르는 것 React의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다. React 컴포넌트에는 일반적으로 두 종류의 side effects가 있습니다. 정.. 2023. 1. 10. [리액트네이티브] 특정 페이지 로딩된 후 뒤로가기 막기 (navigation ,useFocusEffect, reset) 구현하고 싶었던 로직은 처음 splash처럼 만들어놓은 splash 스크린을 3초정도 띄워주고, 바로 로그인 페이지로 이동을 시키는 거였당 (splash 자체에 넣지 않은 이유는 이미지가 아니라 명언 api를 통해 실시간으로 명언이 계속 보이게 하려고 만들어성) 그렇게 완성된 아래 코드!! useFocusEffect(() => { setTimeout(() => { reset({ routes: [{ name: 'Stacks', params: { screen: 'Login' } }] }); }, 3000); }); 코드 분석을 해보면 1. useFocusEffect의 콜백함수에 setTimeout 넣어주기 * useFocusEffect ? 스크린이 포커싱이 되는 그 순간!! 단 한번을 주목하여 필요한 로직(.. 2023. 1. 10. [redux-persist] 리덕스 사용하면서, 새로고침시 데이터 안날라가게 하고 싶을때 각설하고 redux-persist 먼저 설치해주깅 yarn add redux-persist 어떤 방식으로 사용할건지는 둘 중 하나로 결정해주기 ( sessionStorage 객체는 localStorage에 비해 자주 사용되진 않는다고 한당. 제공하는 프로퍼티와 메서드는 같지만, 훨씬 제한적이기 때문!! sessionStorage는 현재 떠 있는 탭 내에서만 유지가 된다) 1. localStorage에 저장할땐 import storage from 'redux-persist/lib/storage 2.session Storage에 저장할땐 import storageSession from 'redux-persist/lib/storage/session 먼저 configStore 부분 (🟢 : 리팩토링 부분) im.. 2023. 1. 9. [리액트네이티브] Animatable 사용하여 애니메이션 효과주기 기본적인 틀을 짜놓은 코드이지만, Animatable을 이용하여 애니메이션 효과를 준 코드!!! import React from 'react'; import { Text, SafeAreaView } from 'react-native'; import * as Progress from 'react-native-progress'; import styled from '@emotion/native'; import { CustomH3 } from '../components/Common/CustomText'; import * as Animatable from 'react-native-animatable'; const Detail = () => { // completed는 나중에 확언 리스트의 개수만큼 카운트수가 저장.. 2023. 1. 6. [리액트] 리액트 쿼리란? 🌼 서버스테이트를 관리하기 위한 라이브러리이다. 🌼 서버스테이트? api를 요청한 후부터 우리가 관리해야하는 state (데이터도 서버 state인셈) -> 데이터,에러,isloading이 다 서버state임 이런 서버스테이트를 리액트쿼리에서 제공해주는 훅에서 자동으로 컨트롤해준다. (자동으로 리턴으로 뱉어준다) useQuery가 관리해주기 전까진 우리가 thunk를 써서 수동으로 서버state를 관리해주었는데 이걸 리액트쿼리가 해주게 되는 것 🌼 cashing 기능이 있다 🌼 cashing기능 ? 서버요청을 보낼때 쿼리 key를 날리는데 이 repo데이터라는 키가 캐쉬메모리에 있는지를 확인하고, 있으면 fetcher함수를 실행하지 않고 캐쉬메모리에 있는 데이터를 사용한다. 만약 repo데이터가 없음 패.. 2023. 1. 6. 이전 1 2 3 다음
