반응형

※ 컴포넌트 렌더링 흐름

1. _app.js에서 공통의 layout 템플릿 컴포넌트를 가져와서 전체 Component를 Wrapping
2. _app.js에 있는 Component는 page 폴더 안쪽에 있는 각각의 페이지 컴포넌트를 의미
3. 모든 페이지 Component에는 Layout Component의 공통의 구조가 적용 됨
4. 각각의 페이지 컴포넌트에서 페이지별로 들어갈 컨텐츠 추가

 

_app.js

import Layout from '@/components/templete/Layout';
import '@/styles/globals.scss';
import axios from 'axios';

export default function App({ Component, pageProps }) {
	return (
		<Layout>
			<Component {...pageProps} />
		</Layout>
	);
}

 

Layout.jsx

import Head from 'next/head';
import Header from '../organisms/Header';
import styles from './Layout.module.scss';
import clsx from 'clsx';

function Layout({ children }) {
	return (
		<>
			<Head>
				<meta name='description' content='Generated by create next app' />
				<meta name='viewport' content='width=device-width, initial-scale=1' />
				<link rel='icon' href='/favicon.ico' />
			</Head>
			<main className={clsx(styles.main)}>
				<Header />
				{children}
			</main>
		</>
	);
}

export default Layout;

 

 

저작자표시

'IT > NextJs' 카테고리의 다른 글

[NextJs] 페이지 전환 모션 적용시 스타일 제거되는 문제 및 해결 방법 정리  (0) 2023.08.24
[NextJs] Swiper 사용 시 SwiperCore 사용하는 이유  (0) 2023.08.21
[NextJs] Atomic Design Pattern 정리  (0) 2023.08.16
[NextJs] CSR , SSG , SSR , ISR 예제  (0) 2023.08.04
[NextJs] CSR , SSG , SSR , ISR 이론 정리  (0) 2023.08.04
반응형

※ uncontrolled input이라는 에러 문구

    - 해당 value값에 값이 없을 때에 대한 대비책이 없을 때 뜨는 오류 문구
    - 해결방법 : 값이 없을 때 빈 문자를 대신 적용

 

<input type='text' value={UserName || ''} />

 

저작자표시

'IT > React' 카테고리의 다른 글

[React] framer-motion을 이용한 간단한 아코디언 만들기  (0) 2024.02.19
[React] Debounce 정리  (0) 2023.08.23
[React] 커스텀 Hooks 정리  (0) 2023.08.08
[React] React 18 버전에서의 Suspense  (0) 2023.08.02
[React] React 18 버전에서의 SSR 작업 흐름  (0) 2023.08.02
반응형

※ 커스텀 훅 정리

- 커스텀 훅 : 리액트의 기본 훅을 활용해서 자주쓰는 기능들을 마치 플러그인처럼 하나의 패키지로 묶어서 재활용하는 형태
- 커스텀 훅 조건 : 
    1. 파일이름이 무조건 use로 시작 해야 됨
    2. 다른 리액트 hook안쪽에서는 호출이 불가능 useEffect
    3. 다른 핸들러 함수 안쪽에서도 호출이 불가능

- useQuery : 문자열로 구성이 고유의 쿼리키라는 것을 이용해서 비동기를 데이터를 가져와서 관리하기 위한 함수
 고유쿼리키(배열), 데이터패칭함수 , 리액트 쿼리 설정값 (객체) 
 비동기 데이터를 패칭해서 리액트 쿼리 설정값에 따라 캐싱처리한 후 리턴
 
- useMutation : 데이터를 가져오는 것 뿐만 아니라 서버의 데이터를 직접 변경 요청 할 수 있는 함수
- useQueryClient : 추가적인 인스턴스의 함수 호출하기 위한 객체

저작자표시

'IT > React' 카테고리의 다른 글

[React] Debounce 정리  (0) 2023.08.23
[React] uncontrolled input이라는 에러 해결  (0) 2023.08.08
[React] React 18 버전에서의 Suspense  (0) 2023.08.02
[React] React 18 버전에서의 SSR 작업 흐름  (0) 2023.08.02
[React] useTransition 정리  (0) 2023.08.02
반응형

※ CSR (Client Side Rendering)

- 초기에 빈 HTML 파일을 가져오고 화면에 출력 될 모든 정보데이터를 Chunk단위로 구성된 파일을 모두 가져옴

장점 : 같은 페이지 안에서 서로 다른 컨텐츠를 실시간으로 변경 하면서 출력 하므로 동적인 컨텐츠 화면 변경이 자유롭고 페이지간 로딩이 없음 (사용성좋음)
단점 : 한번에 모든 데이터를 불러와야 되기 때문에 초기 로딩속도가 SSR 방식에 비해선 느림, 검색엔진에 비 최적화

 

※ SSG (Static-Site-Generation)

- Next프로젝트를 빌드시 pre-render

장점 : 미리빌드 시점에 페이지가 완성되기 때문에 초기 로딩속도가 빠름
단점 : 요청 전에 미리 프리렌더되기 때문에 정적인 페이지만 적용 가능 


※ SSR (Server Side Randering)

- 서버에 요청이 들어오면 서버단에서 data-fetching후 pre-render

장점 : CSR방식에 비해서는 초기로딩속도가 빠르고 요청시마다 새로운 데이터 갱신 가능
단점 : 서버 호출시에 pre-render 되기 때문에 SSG 방식보다는 느림

 


※ ISR (Incremental Static Regeneration)

- Next 프로젝트 빌드 시 pre-render


장점 
1) SSG와 마찬가지로 빌드시에 미리 페이지가 만들어지기 때문에 초기로딩속도가 빠름
2) 일정시간마다 새롭게 갠신된 데이터로 정기적으로 revalidation 처리


단점
초기에 이동할 떄만 조금 시간이 걸린다. (기존에 있는 SSR보다는 빠름)

 

 

저작자표시

'IT > NextJs' 카테고리의 다른 글

[NextJs] Swiper 사용 시 SwiperCore 사용하는 이유  (0) 2023.08.21
[NextJs] Atomic Design Pattern 컴포넌트 렌더링 흐름  (0) 2023.08.18
[NextJs] Atomic Design Pattern 정리  (0) 2023.08.16
[NextJs] CSR , SSG , SSR , ISR 예제  (0) 2023.08.04
[NextJs] Next.js 작업방식 정리 (Pre Rendering)  (0) 2023.08.03
반응형

※ Pre Rendering (Next.js 작업방식)

    - Next는 초기에 서버단에서 미리 만들어진 page 폴더 안쪽에 있는 정적인 컨텐츠를 html로 미리 Randering 상태에서 초기 로딩 처리 (SEO에 좋음)
    - 이후에 동적으로 데이터 연동을 위한 리액트 컴포넌트가 로드 완료 되면 Static한 페이지에 해당 내용을 결합 (Hydration)
    - 기존에 리액트는 초기에 모든 서브페이지에 해당하는 파일들을 모두 가져온 다음에 Randering하기 때문에 초기 로딩속도가 늦음 
    - 초기 메인 페이지만 pre-render된 상태로 가져오고 서브페이지에 해당하는 파일들은 json 형태로만 미리 로드 시켜서 초기에 로드시켜야되는 파일의 갯수와 용량을 줄임
    - 다른페이지의 데이터 구분 next 전용의 Link 컴포넌트에 연결되어 있는 라우터명을 통해서 json 형태로 데이터만 미리 로드

 

※ SSG (Static-Site-Generation)

- Next프로젝트를 빌드시 pre-render
    장점 : 미리빌드 시점에 페이지가 완성되기 때문에 초기 로딩속도가 빠름
    단점 : 요청 전에 미리 프리렌더되기 때문에 정적인 페이지만 적용 가능 


※ SSR (Server Side Randering)

- 서버에 요청이 들어오면 서버단에서 data-fetching후 pre-render
    장점 : CSR방식에 비해서는 초기로딩속도가 빠르고 요청시마다 새로운 데이터 갱신 가능
    단점 : 서버 호출시에 pre-render 되기 때문에 SSG 방식보다는 느림

 

※ ISR (Incremental Static Regeneration)

- Next 프로젝트 빌드 시 pre-render
    장점 
        1) SSG와 마찬가지로 빌드시에 미리 페이지가 만들어지기 때문에 초기로딩속도가 빠름
        2) 일정시간마다 새롭게 갠신된 데이터로 정기적으로 revalidation 처리

    단점
        1) 초기에 이동할 떄만 조금 시간이 걸린다. (기존에 있는 SSR보다는 빠름)

저작자표시

'IT > NextJs' 카테고리의 다른 글

[NextJs] Swiper 사용 시 SwiperCore 사용하는 이유  (0) 2023.08.21
[NextJs] Atomic Design Pattern 컴포넌트 렌더링 흐름  (0) 2023.08.18
[NextJs] Atomic Design Pattern 정리  (0) 2023.08.16
[NextJs] CSR , SSG , SSR , ISR 예제  (0) 2023.08.04
[NextJs] CSR , SSG , SSR , ISR 이론 정리  (0) 2023.08.04
반응형

※ React 18 버전에서의 Suspense

  - 각 페이지에 구성되 있는 컴포넌트들을 동시에 호출하는 것이 아닌 영역별로 렌더링 시점을 동기화 처리
  - 이전 버전까지는 클라이언트 컴포넌트에서만 제한적으로 동작되는 기술이었으나 18버전부터는 ssr 방식의 컴포넌트에서도 활용 가능하도록 개선

활용 예제)
  1. 특정 컴포넌트가 렌더링 완료 될 때까지 다른 컴포넌트의 렌더링을 막고 이전 렌더링 컴포넌트 완료 후 동기적으로 렌더링 시작
  2. 서버로부터 무거운 데이터를 fecthing하는 컴포넌트의 경우 해당 컴포넌트 출력전까지 자동으로 로딩바 출력

 

 

suspense를 활용 하기 위한 조건

- suspense 동기화 시키는 컴포넌트 내부에 promise 객체 생성 상태(pending, fullfilled , rejected)를 추적 할 수 있어야 됨.

 

 

예제)  useGetData.js

import { useState, useEffect } from 'react';
import axios from 'axios';

//promise 객체를 인수로 받아서 해당 promise 상태에 따라 반환되는 값을 직접 리턴해주는 함수를 반환
const checkPromiseStatus = (promise) => {
	let status = 'pending';
	let result;

	//promise의 상태에 따라 현재 상태값과 반환값을 각각 status, result 변수에 담아줌
	const setPromise = promise.then(
		(value) => {
			status = 'success';
			result = value;
		},
		(error) => {
			status = 'error';
			result = error;
		}
	);

	//위에서 저장되는 status값에 따라 fetching된 결과값을 반환하는 함수를 리턴
	return () => {
		switch (status) {
			case 'pending':
				throw setPromise;
			case 'success':
				return result;
			case 'error':
				throw result;
			default:
				throw new Error('Unknow Status');
		}
	};
};

function useGetData(url) {
	const [Data, setData] = useState(null);

	useEffect(() => {
		const getData = async () => {
			//데이터 요청 후 현재 데이터 상태를 확인하는 promise 객체 자체를 비동적으로 받음
			const promise = axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => response.data);

			//해당 promise 객체를 checkPromiseStatus 함수의 인수로 전달해서 직접 동기화 시키는 커스텀함수 호출후 결과값을 반환값을 state에 담아줌
			setData(checkPromiseStatus(promise));
		};

		getData();
	}, [url]);

	//state에 담아진 promise 반환 값을 리턴
	return Data;
}

export default useGetData;

 

Posts.js

import useGetData from './useGetData';

function Posts() {
	const data = useGetData('https://jsonplaceholder.typicode.com/posts');
	console.log(data);
	return (
		<div>
			{data &&
				data.map((post) => {
					return (
						<div key={post.id}>
							<h2>{post.title}</h2>
							<br />
							<p>{post.body}</p>
							<hr />
						</div>
					);
				})}
		</div>
	);
}

export default Posts;

 

App.jsx

import Posts from './Posts';
import { Suspense } from 'react';

function App() {
	return (
		<div className='App'>
			<h1>App</h1>
			<Suspense fallback={<p>Posts loadding...</p>}>
				<h1>Posts</h1>
				<Posts />
			</Suspense>
		</div>
	);
}

export default App;
저작자표시

'IT > React' 카테고리의 다른 글

[React] uncontrolled input이라는 에러 해결  (0) 2023.08.08
[React] 커스텀 Hooks 정리  (0) 2023.08.08
[React] React 18 버전에서의 SSR 작업 흐름  (0) 2023.08.02
[React] useTransition 정리  (0) 2023.08.02
[React] Automatic Batching 17 버전 vs Automatic Batching 18 버전 차이  (0) 2023.08.02
반응형

※ 기존의 CSR , SSR 방식 차이

   SSR 작업 흐름

     1. 정적인 HTML 파일을 서버로부터 가져옴
     2. 추후 동적 데이터가 필요할때마다 다시 서버쪽에 요청해서 전체 화면을 full load (화면 깜빡임)
     3. 이후 ajax라는 비동기 서버 통신 기술이 생기면서 전체 화면을 다시 full load 하지 않고 필요한 데이터만 실시간으로 다시 호출 가능
     4. 비동기 데이터를 이용해 자바스크립트로 일일이 동적 DOM을 생성하고 관리해야되는 번거로움이 생김


  CSR 작업 흐름

     1. 빈 HTML파일을 서버로부터 가져옴
     2. 자바스크립트 파일로드 (React)
     3. 리액트 컴포넌트 로드 (Data fetching)
     4. 컴포넌트 해석 후 랜더링 시작
     5. 최종화면에 동적 DOM 생성 (이전 단계까지는 빈 화면 렌더링)


※ React 18 버전에서의 SSR 작업 흐름

   1. 서버쪽에서 미리 static 프리랜더링 된 html파일 로드
   2. 미리 렌더링 된 정적인 화면을 바로 생성 (정적 화면 생성)
   3. 자바스크립트 파일 로드
   4. 동적데이터를 다루는 리액트 컴포넌트 해석
   5. 기존 정적인 화면에 동적으로 연동될 부분만 대체 (hydration) Suspense 활용

저작자표시

'IT > React' 카테고리의 다른 글

[React] 커스텀 Hooks 정리  (0) 2023.08.08
[React] React 18 버전에서의 Suspense  (0) 2023.08.02
[React] useTransition 정리  (0) 2023.08.02
[React] Automatic Batching 17 버전 vs Automatic Batching 18 버전 차이  (0) 2023.08.02
[React] addEventListener를 쓸 때 주의 할 점  (0) 2023.07.31
반응형

※ useTransition
  - 컴포넌트 렌더링시 연산의 우선순위를 둬서 좀 늦게 렌더링해도 될 것들을 지정
  - 기존에는 한번 렌더링 연산이 시작되면 중간에 멈출 수 없었음
  - 특정 핸들러함수에 의해서 화면을 재 연산해야 되는 경우 중간에 무거운 로직이 실행되는 연산이 있으면 나머지 연산도 같이 지연이 일어남

 

아래는 useTransition 예제 및 설명에 따른 주석 정리 입니다.

import { useState, useTransition } from 'react';

function App() {
	const [Count, setCount] = useState(0);
	const [Items, setItems] = useState([]);
	const [isPending, startTransition] = useTransition();
	//isPending에 넣어두면 늦게 실행 됨.

	console.log('isPending', isPending);

	//아래함수에서는 덜 중요하고 무거운 연산 때문에 급한 연산까지 덩달아 늦게 화면에 랜더링
	const handleClick = () => {
		//urgent op (급하게 처리되야될 중요한 연산)
		setCount(Count + 1);

		startTransition(() => {
			//not urgent op (우선순위가 떨어지는 덜 중요한 연산)
			const arr = Array(20000)
				.fill(1)
				.map((_, idx) => Count + idx);
			setItems(arr);
		});
	};

	//아래 버튼 클릭시 마다 만개의 배열 리스트가 출력되기 전까지는 버튼의 숫자값이 늦게 카운트 되는 것을 확인
	return (
		<>
			<div className='App'>     
        {/* disabled에 isPending을 넣어서 처리가 다 되지 않았을 경우 버튼 선택이 되지 않게 처리 */}
				<button onClick={handleClick} disabled={isPending}>
					{Count}
				</button>
			</div>

			<ul>
				{Items.map((num) => {
					return <li key={num}>{num}</li>;
				})}
			</ul>
		</>
	);
}
저작자표시

'IT > React' 카테고리의 다른 글

[React] React 18 버전에서의 Suspense  (0) 2023.08.02
[React] React 18 버전에서의 SSR 작업 흐름  (0) 2023.08.02
[React] Automatic Batching 17 버전 vs Automatic Batching 18 버전 차이  (0) 2023.08.02
[React] addEventListener를 쓸 때 주의 할 점  (0) 2023.07.31
[React] promise.all , promise.race 정리  (0) 2023.07.24

+ Recent posts

티스토리툴바