FrontEnd/React
-
로딩중입니다...는 React로 어떻게 사용할까?FrontEnd/React 2022. 12. 27. 22:20
우리는 흔히 웹앱이나 앱을 사용하다 보면 로딩중..이라고 하면서 로딩 스피너가 뱅글뱅글 도는 화면을 자주 볼 수 있다. 이건 어떻게 쓸까? 바로 React.lazy()이다!! 리액트 홈페이지에 나온설명은 아래와 같다. React.lazy함수를 사용하면 동적으로 import를 사용해서 컴포넌트를 렌더링 할 수 있다. 쉽게 말하면 lazy에 담긴 컴포넌트를 느리게 render할 수 있다는 말이다. 리액트는 처음 렌덜이 될 때 번들을 자동으로 불러오기 때문에 로드되길 기다리는 동안 우리는 사용자에게 로딩화면과 같은 예비 컨텐츠를 보여줄 수 있는 장점이 있다. 사용법은 아래와 같다. import React, { Suspense } from 'react'; const OtherComponent = React.la..
-
부모에서 자식까지 일일이 Prop전달하기 싫을 때?FrontEnd/React 2022. 10. 2. 13:50
가끔 React로 코딩하다보면 부모의 state나 함수를 자식의 자식의 자식...에게 전달해야 할 때가 있다. 그러면 코드도 복잡해지고 가독성이 떨어지는데 이를 해결할 수 있는게 바로 Context이다. context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 리액트 공식 홈페이지에 Context란에 가보면 이렇게 설명해준다. 우리는 언제 Context를 쓸 지(일일이 전달하기 번거로울 떄)를 정했으니 어떻게 쓰는지 알아보자. Context 생성하고 사용해보기 Context를 생성하려면 React.createContext API를 사용하면 끝이다. const MyContext = React.createContext(defaultValue) ..