728x90 React11 [Next.js] Next.js 기본 개념 정리 Next.js 공식문서를 참고하며 공부한 기본 개념들을 정리했습니다 Code splitting and prefetching Code splitting Next.js는 코드 분할을 자동으로 수행함 각 페이지는 해당 페이지에 필요한 부분만 로드함 홈페이지가 렌더링될 때 다른 페이지의 코드는 처음에 제공되지 않음 장점 수백 개의 페이지가 있어도 홈페이지가 빠르게 로드됨 특정 페이지에서 오류가 발생해도 나머지 애플리케이션은 계속 작동함 prefetching (미리 불러오기) 링크 컴포넌트가 브라우저의 뷰포트에 표시될 때마다 링크된 페이지의 코드를 백그라운드에서 자동으로 prefetching함 링크를 클릭할 때 쯤이면 대상 페이지의 코드가 이미 백그라운드에서 로드되어 페이지 전환이 거의 즉시 이루어짐 next/I.. 2023. 4. 13. [FE] 답글 화면 구현하기 (+재귀함수) (feat. React) 목표: 여러 depth의 답글을 화면에 표시하기 기능: 답글이 있는 게시글은 아이콘으로 표시하고 - 아이콘을 클릭하면 답글이 보이고 - 그 밑으로 여러 depth의 답글을 표시한다 방법: table의 tr을 하나의 컴포넌트로 만들고 그 컴포넌트를 답글 depth만큼 계속 호출한다 (* 컴포넌트도 하나의 함수이기 때문에 재귀함수를 사용하여 구현할 수 있는 것) 부모 컴포넌트 (MainTable.js) const MainTable = () => { // 게시글 리스트 (-> api 요청으로 데이터를 세팅함) const [articleList, setArticleList] = useState([]) return ( // 코드 생략 { articleList.map(article => { } } ) } 자식 컴포.. 2023. 4. 2. [React] useMemo와 useCallback 개념 정리 (+ 리렌더링, 메모이제이션, useEffect ...) useMemo와 useCallback의 개념에 대해 정리해보겠습니다 기본적으로 useMemo와 useCallback은 리렌더링을 최적화하는데 도움이 되도록 만들어진 Hook이다. 📌 리렌더링 (re-rendering) ? React는 Virtual DOM을 사용하고 있다. 따라서 리렌더링이 되는 조건에 충족되는 상황이라면, 이전의 Virtual DOM과 현재의 Virtual DOM을 비교하여 변경된 값에 대해 DOM 트리를 업데이트 해준다. 위에서 언급한 리렌더링이 되는 조건은 다음과 같다. 자신의 state가 변경될 때 부모 컴포넌트로부터 새로운 props가 들어올 때 / 변경될 때 부모 컴포넌트가 리렌더링될 때 📌 메모이제이션 (memoization) ? 과도한 리렌더링은 성능 저하의 원인이 된다. .. 2023. 3. 5. [React] Redux Toolkit 사용법 (+ TypeScript 세팅) Redux Toolkit (+TypeScript) 세팅 방법에 대해 정리해보겠습니다 회사에서 프로젝트를 진행하던 중 Redux를 통해 state를 관리하기 위해 세팅해보기로 했다.개인 프로젝트를 진행할 때 Redux Toolkit에 편리함을 느꼈어서 해당 툴을 사용하고자 했다. 📌 Redux Toolkit ?Redux Toolkit은 Redux를 만든 곳에서 공식적으로 효율적인 Redux 개발을 위해 만들어진 툴킷이다.Redux보다 코드가 간결하고 더 개선되어 유지 관리가 쉽기 때문에 사용을 강력히 권장하고 있다. 📌 Redux Toolkit이 제공하는 것| store.jsimport { configureStore, createSlice } from '@reduxjs/toolkit';// news.. 2023. 2. 12. 이전 1 2 3 다음 728x90
