본문 바로가기

React

(14)

[ React ] Suspense란 무엇일까? React의 Suspense는 React 18에서 정식으로 지원된 비동기 처리를 지원하는 React의 내장 컴포넌트로, 비동기 처리가 진행되는 동안, 사용자에게 로딩에 대한 상태를 보여주는 기능을 제공한다. Suspense는 Suspense의 경계를 설정하고, 경계 내에서 비동기적으로 로드되는 컴포넌트나 데이터에 대한 로딩 상태를 관리한다. 이런 로딩 상태는 fallback프로퍼티를 통해 사용자에게 표시된다. Suspense의 자식 컴포넌트(children)가 실제 비동기 처리 이후에 렌더링 되는 컴포넌트이다. 위와 같이 {children}로 사용되며, React Suspense는 주로 React 애플리케이션의 비동기 데이터 로딩을 위해 사용되는 React.lazy와 함께 사용된다.(React.lazy..

[ Next.js ] Next13에서 커스텀 Font 세팅하기. (App Router 기준) 회사에서 새로운 프로젝트를 Next13을 도입하여 만들기로 결정하여 개발 진행중에, 우리는 Google Font가 아닌 Local Font를 사용하게 되어, 삽질을 조금 하다가... 세팅한 내용을 정리하려 한다. 우선, Next 공식 홈페이지에서 App Router 사용 방식으로 Font를 설정하는 부분을 보면 1. Google Font를 사용하거나, 2. Local Font를 사용하는 방법으로 크게 나뉜다. 우리가 사용하려는 Font는 Pretendard 였는데, Google Font에 없는 폰트여서 Local Font를 적용해야 했다...^_ㅠ 만약 Google Font에서 지원하는 폰트일 수 있으니 해당 사이트에서 서치해본 후 없다면 Local Font를 사용하는 걸로.... (Google Font..

[ Next.js ] Next13의 주요 기능에 대해 알아보자. Vercel팀이 Next.js의 13버전이 2022년 10월 26일 Next.js 공식 페이지에 소개되었지만, 자세히 살펴보지를 않았는데 새로 이직하게된 회사에서 Next13으로 프로젝트를 새로 세팅하기로 이야기가 되어 공식 블로그 내용을 살펴보았다. ++Next.js 13.4(현재 기준 최신 버전)을 사용하려면 아래의 명령어를 통해 설치할 수 있다. npm i next@latest react@latest react-dom@latest eslint-config-next@latest 앱 라우팅 (App Directory) - Next.13.4(현재)기준 Stable 기존에 pages/ 디렉토리에서 라우팅 되던 방식과 다르게, app/ 디렉토리로 라우팅 하는 방식이 추가되었다. - Tree : 계층 구조를 ..

[ React ] 상태 관리 툴 비교 분석 Recoil vs Zustand 회사에서 새로운 React 프로젝트를 세팅중인데, 전역 상태관리 툴 중에서 팀원들이 빠르게 배우고 활용할 수 있도록 쉽게 React 프로젝트의 상태 관리가 가능한 툴 2가지를 비교해 보게 되었다. Recoil (v0.7.7 기준) 전체 카운터 코드 counter sample code Recoil은 아래처럼 쓰인다. (테스트 코드 일부) import "./App.css"; import { countState } from "./state/countState"; import { useRecoilValue, useSetRecoilState, useResetRecoilState } from "recoil"; function App() { const count = useRecoilValue(countState); ..

[ React ] React Props 알아보기. React를 처음 시작하는 사람들 또는 React의 경험이 많지 않은 사람들에게 비슷해보여서 어렵게 느껴질 수 있는 React Props와 React State에 대해 차이점에 대한 포스팅을 하려고 했지만 React의 Props를 먼저 이해해야 state에 대해 이해하기 더욱 쉬울 것 같아, props에 대해 먼저 알아보려 한다. props와 state는 React의 클래스 컴포넌트와 함수 컴포넌트에서 모두 사용된다. Props React에서 props란 "properties"의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하기 위한 방법으로, 부모 컴포넌트에서 자식 컴포넌트에게 전달하는 데이터는 props라는 객체 형태로 전달되며, 자식 컴포넌트는 이 props 객체를 통해 데이터에 접근할..

[ webpack ] React(리액트)와 webpack(웹팩) React.js를 사용하거나, 다른 라이브러리 혹은 프레임워크를 사용하다보면 항상 webpack과 같은 모듈 번들러 툴을 사용하게 된다. 웹팩 공식 사이트에서 소개하는 컨셉은 현대 자바스크립트 응용 프로그램을 위한 정적 모듈 번들러라고 말한다. 모듈 번들러는 여러 다른 파일들(JavaScript, LESS, CSS, JSX, ESNext 등)을 받아서 하나의 파일로 묶어준다. 이렇게 여러 다른 파일들을 받아 하나의 파일로 묶어주어 생기는 이점은 크게 모듈성과 네트워크 성능이 있는데, 모듈성은 소스 코드를 작업하기 쉽게 여러 부분이나 모듈로 나눠서 다룰수 있게 해주어 팀 작업등의 협업에 유리하다. 또 네트워크 성능의 측면에서는 의존 관계가 있는 여러 파일을 묶은 번들을 브라우저가 1번만 읽기 때문에 네트워..

[ React ] React Element 와 Component의 차이점 React Element React 엘리먼트는 React 앱의 가장 작은 단위로, 브라우저 DOM 엘리먼트와 다르게 일반 객체(plain object)이며, 쉽게 생성이 가능하다. React 엘리먼트는 화면에 표시할 내용을 기술하며, React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트해준다. const element = Hello, world; React 엘리먼트는 불변객체이며, 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. 엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여준다. 사용자 정의 컴포넌트로도 React 엘리먼트를 나타낼 수 있다. (Welcome 컴포넌트를 엘리먼트로 사용) const element = ; React가 사용자 정..

[ React / Next ] Web Google Login 기능 구현 (gsi/client) 회사에서 Next를 사용하고 있는 Web의 Google Login 지원을 위해 웹용 Google 계정으로 로그인 기능을 구현해야 해서 많은 사람들이 사용하던 react-google-login 라이브러리를 사용하려고 했지만 더 이상 구글에서 지원하지 않는 객체를 사용하는 라이브러리라서 에러가 발생했다. 다른 라이브러리를 사용하려다가 아래의 구글 개발자 페이지를 참고하여 Google Identity Service(GSI)를 이용하여 로그인을 구현해보기로 했다. 공식 문서 링크 구글 개발자 페이지 Authentication - 웹용 Google 계정으로 로그인 Google 로그인 특징 - Google 계정으로 웹 서비스에서 사용자 인증을 쉽고 빠르게 관리할 수 있도록 한다. - 사용자는 Google 계정에 로..

이전 1 2 다음

티스토리툴바