리액트6 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. 리액트 네이티브 장점 단점 리액트 네이티브 React Native 페이스북이 만든 오픈소스 모바일 애플리케이션 프레임워크 리액트 네이티브 장점 모바일 크로스플랫폼, 자바스크립트로 IOS와 안드로이드 모바일 앱을 동시에 개발 소스코드 공유와 재사용 자바스크립트 기반으로 러닝커브와 낮은 진입장벽 컴포넌트 최대활용으로 생산성 향상, 크로스 플랫폼 일관성있는 개발방식 유지보수 비용 절감 오픈소스로 개발된 다양한 기능들 리액트 네이티브 단점 리액트에만 존재하는 개념 공부에 대한 러닝커브 하이브리드 앱방식으로 각 OS에 최적화된 네이티브 개발방식에 비해 낮은 성능 오픈소스 활용으로 인한 버그 발생에 대한 스트레스 오픈소스에 없는 기능개발 필요시 개별 개발리소스 비용발생 네이티브 앱 개발언어 IOS : swift, Objective-C And.. 2020. 10. 10. 리액트 컴포넌트 절대경로 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. 이전 1 다음
