리액트2 Suspense를 사용하자 *react conf 2021 동영상을 참고했습니다. Suspense를 사용해야하는 이유 리액트는 데이터가 위에서 아래로 즉 단방향으로 흐르기때문에 서비스의 전반적인 흐름을 쉽게 이해 할 수 있습니다. 각 컴포넌트는 데이터를 가공하거나 사용하여 jsx를 반환합니다. 컴포넌트 내부에서도 코드의 흐름은 위에서 아래로 흐릅니다. 하지만 비동기적인 코드가 사용되면 그 흐름은 깨집니다. 코드를 건너 뛰어가며 보고 이해해야하기 때문입니다. // 비동기 코드가 들어간다면 function List({pageId})) { const [items, setItems] = useState(); // useEffect를 사용하여 fetch를 하게 되고 // fullfill 상태가 되면 state가 업데이트 되어 re-rende.. 2021. 12. 14. Rendering 전략 Rendering 종류 Static Site Generation (SSG) HTML 파일을 빌드타임에 생성하는 pre-rendering 기술이다. 이렇게 미리 생성된 HTML 파일이 요청시 사용된다. 가장 많이 사용되는 방식이며 성능적으로 가장 좋다. Server-Side Rendering (SSR) SSG와 마찬가지로 pre-rendering 기술이지만 빌드타임에 생성되는 것이 아닌 요청시 생성된다. SSG와 비교하면 조금 느리지만 요청에 따라 달라질 수 있는 다이나믹한 페이지를 생성할때 필요하다. Incremental Static Regeneraion (ISR) 페이지의 갯수가 많다면 모든 페이지를 빌드타임에 생성하는것은 시간이 오래걸리고 효율적이지 못하다. ISR을 통해 원하는 만큼의 페이지를 빌드.. 2021. 12. 12. 이전 1 다음
