react8 Solve initialization error when importing firebase in react Firebase Resolve Error Firebase App named '[DEFAULT]' already exists (app/duplicate-app) 리액트에서 파이어베이스 모듈 사용하기 & 초기화 import * as firebase from 'firebase' 로 firebase 모듈을 import 한다. fireabase.app 이 로드 되었는지 존재 여부를 체크 한뒤 initializeApp 을 실행하면 정상 적으로 작동된다. 2021. 1. 7. React 17 달라진 점, import react JSX 개선 사항 With React 17, you don’t need the React import for JSX jsx 관련 import가 필요하지 않다. React 17 컴파일러 react/jsx-runtime는 JSX 변환을 처리하는 곳에서 새 디펜던시를 가져온다. import React from 'react' 구문을 제거할 수 있게 되었다. import react 제거 장점 1. Reducing the Bundle Size 컴파일 된 번들 최종 크기가 약간 줄어들게 된다. 2. Sharing Components has Become a Bit Easier 컴포넌트의 번들링 크기를 줄이고 React가 다른 버전으로 여러번 중복으로 설치되는 경우를 방지할 수 있다. 3. Reducing Dynamic.. 2021. 1. 7. useSWR 리액트 훅 데이터 라이브러리 useSWR 사용하기 useSWR 은 한번 fetch 한 원격상태의 데이터를 내부적으로 캐시하고 다른 컴포넌트에서 동일한 상태를 사용하고자 할 경우 이전에 캐시했던 상태를 그대로를 리턴한다. const { data } = useSWR( "https://jsonplaceholder.typicode.com/posts", url => fetch(url) .then(_ => _.json()) .then(sleep), { suspense: true } ); useSWR 특징 Lightweight Backend agnostic Realtime JAMstack oriented Suspense TypeScript ready REST compatible Remote + Local useSWR 장점 서로 다른 컴포넌트.. 2020. 12. 19. 리액트 함수형 컴포넌트 리팩토링하기 state 컴포넌트내 상태관리 클래스형 컴포넌트 this.state = { isVisible: true, users: [], }; 함수형 컴포넌트 useState 훅 사용하기 const [isVisible, setIsVisible] = useState(true); const [users, setUsers] = useState([]); useCallback const toggleVisibility = () => { setIsVisible(!isVisible); } 이 메서드는 요소를 다시 렌더링 할 때마다 다시 생성되는 문제가 있다. useCallback 으로 감싸서 함수를 재사용, 캐싱할 수있다. const toggleVisibility = useCallback( () => setIsVisible(!is.. 2020. 9. 30. 리액트 컴포넌트 절대경로 import 리액트 컴포넌트 import 시 절대경로와 상대경로 사용하기 상대경로 import Button from './components/Tabs'; 상대경로 단점 상대경로 폴더가 깊어질때는 아래처럼 패스가 길어지게 된다. 😭 import Button from '../../../../components/Tabs'; 절대경로로 import 하기 config파일 내 baseUrl 을 추가하면 아래처럼 절대경로로 import할 수 있다. 설정 변경시 IDE를 재실행 시켜줘야 제대로 작동한다. tsconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } import Button from 'components/Tabs'; 절대경로 사용시 훨씬 .. 2020. 9. 30. React Lazyload How to set up lazy loading components in React 리액트 자바스크립트 코드 분할 & 레이지 로딩 적용 성능 최적화하기 레이지 로딩(lazy loading) 레이지 로딩은 필요 시점까지 객체의 초기화를 연기시키기 위해 컴퓨터 프로그래밍에 흔히 사용되는 디자인 패턴의 하나로 적절하게 사용될 경우 프로그램의 운영 차원에서 효율적이다. 코드 분할 Code Splitting 앱이 커지면 번들 사이즈도 커진다. 특히 큰 규모의 서드 파티 라이브러리를 추가할 때 실수로 앱이 커져서 로드 시간이 길어진다. 대부분의 경우 사용자는 적어도 처음에는 전체 웹 페이지를 보지 못한다. 이러한 경우 이러한 구성 요소를 렌더링하면 응용 프로그램의 성능이 저하 될뿐만 아니라 많은 리소스가 낭비된다... 2020. 9. 21. React useCallback 사용하기 useCallback const memoizedCallback = useCallback(() => { doSomething(a, b) }, [a, b]) 메모이제이션된 함수를 재사용 useCallback example import React, { useCallback } from "react" export default function MyParent({ term }) { const handleClick = useCallback( item => { console.log("You clicked ", item) }, [term] ) return } // Recreate increment on every change of delta! const increment = useCallback(() => setC(c.. 2020. 9. 21. React useMemo 사용하기 // a, b가 바뀔때만 리렌더링 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]) 메모이제이션된 값을 재사용 의존성 값 [a, b] 가 변경 되었을때 재계산하여 렌더링 시 고비용 계산을 방지 배열이 없을 경우 렌더링 때마다 새 값 계산 메모이제이션(memoization) 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술 useMemo example import React, { useMemo } from "react" const users = [ { id: "a", name: "Robin" }, { id: "b.. 2020. 9. 21. 이전 1 다음
