[Next.js] Server and Client Composition Pattern

[Next.js] Server and Client Composition Pattern

서버 vs 클라이언트 컴포넌트Next.js 문서에서는 아래와 같은 기준으로 서버와 클라이언트 컴포넌트를 사용하는 것을 제시하고 있습니다. 서버 컴포넌트 패턴서버의 경우 데이터 불러오기, 백엔드 접속 그리고 데이터베이스 접근과 같은 업무를 수행하는데 사용됩니다. 다음은 서버에서 어떠한 작업을 하는 지에 대한 패턴을 보도록 하겠습니다. 컴포넌트 간의 데이터 공유하나의 페이지를 구성하는 여러 컴포넌트가 존재하는데, 이들은 하나의 데이터를 기반으로 렌더링이 되는 컴포넌트들 입니다.이러한 경우, 서버에서는 fetch 또는 리액트 cache 기능을 사용하여 재반복 되는 요청을 지속적으로 불러오는 형식으로 공유가 가능합니다. (캐시가 되어진 데이터를 불러오는 것이므로 중복성 문제가 발생하지 않습니다.)해당 방식이 가..

  • format_list_bulleted Frontend/Next.js
  • · 2024. 6. 22.
  • textsms

[Next.js] Client Components

Client Components 이점상호작용 : 클라이언트 컴포넌트에서는 useState, effects 그리고 이벤트 리스트너 사용. 즉각적으로 유저에게 반응해줄 수 있는 UI 업데이트를 제공 가능.브라우저 API: 클라이언트 컴포넌트에서 geloaction 과 localStorage와 같은 브라우저 API를 사용 가능함. Client Components 사용법use Client를 컴포넌트 상단에 입력하면 해당 컴포넌트 Client Component임을 선언함과 동시에 네트워크 바운더리가 클라이언트 모듈 그래프에 정의합니다. ❓Network Boundary네트워크 바운더리는 렌더링 단계에서 어디에서 렌더링을 수행해야 하는지 구분하기 위한 바운더리를 의미합니다. 영역은 총 두 가지로 client modu..

  • format_list_bulleted Frontend/Next.js
  • · 2024. 6. 22.
  • textsms
[Next.js] Server Components

[Next.js] Server Components

Next.js 14의 컴포넌트 유형Next.js에서 제공하고 있는 컴포넌트는 아래와 같습니다.Server Component: 서버에서 렌더링되는 컴포넌트.Client Component: 클라이언트에서 렌더링되는 컴포넌트.Composition Component: 서버와 클라이언트 컴포넌트를 조합하여 사용하는 컴포넌트. 서버 렌더링의 장점데이터 요청: 서버에서 데이터를 요청하므로 렌더링에 필요한 시간을 단축 시킬 수 있음.보안: 유저 측에서 데이터에 직접 접근하는 경우에는 token이나 API 키 들을 노출 될 가능성이 있으나, 서버에서 진행하게 되면 이러한 문제를 해결할 수 있음.캐싱: 서버에서 렌더링을 진행하게 된 경우에 결과를 캐싱 해두었다가 같은 요청에는 캐싱된 데이터를 반환함으로서 성능과 효율성을 ..

  • format_list_bulleted Frontend/Next.js
  • · 2024. 6. 22.
  • textsms
React) Hook, useState, useEffect

React) Hook, useState, useEffect

Hook`Hook`은 `React 16.8` 부터 생긴 기능으로, 기본 `React Class` 컴포넌트에서 제공하던 상태관리 기능 및 생명주기 함수를 함수형 컴포넌트에서 사용할 수 있게 해주는 기능입니다.  `Class Component` 에서 상태관리 기능은 `this.state` 와 `this.setState` 두 가지로 관리할 수 있었습니다. 하지만 함수형 컴포넌트에서는 사용이 불가한 상황으로 `useState`, `useEffect` 두 가지로 클래스 컴포넌트와 같은 함수들을 사용할 수 있도록 한 것이 `Hook` 입니다. 클래스 생명주기 함수들에서 변경이 일어나면 어떠한 작업이 일어나는데 이러한 작업들을 `side effect`라고 지칭하고 있습니다. 이러한 `side effect`에 대한 부..

  • format_list_bulleted Frontend/React
  • · 2024. 5. 6.
  • textsms
React) state, props

React) state, props

state`state`는 `JSX`에서 제공하는 컴포넌트 내에서 상태를 관리하기 위해 사용되는 기능입니다. `Hook` 기능이 개발이 되기 전까지는 클래스 컴포넌트 내에서 모든 `state` 생명주기를 관리 해왔습니다. 그렇기 때문에 오래된 문서를 보게 되면 제어 컴포넌트를 생성하게 되면 클래스 컴포넌트를 활용해 개발하는 것을 볼 수 있습니다. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( Hello, world! It is {this.state.date.toLocal..

  • format_list_bulleted Frontend/React
  • · 2024. 5. 6.
  • textsms

React) Element, Component 와 Props

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다. Element`Element` 는 React앱의 가장 작은 단위를 의미합니다. 브라우저 `DOM` 엘리먼트와 달리 `React` 엘리먼트는 일반 객체(plain object)를 의미합니다. `React DOM`은 `React` 엘리먼트와 일치하도록 `DOM`을 업데이트합니다.주의더 널리 알려진 개념인 “컴포넌트”와 엘리먼트를 혼동할 수 있습니다. 혼동 되지 않도록 주의합시다  `React` 엘리먼트는 불변객체입니다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다. 엘리먼트는 특정 시점의 `UI`를 보여줍니다. 다음은 `DOM root`에서 생성되는 엘리먼트가 어떻게 렌더링 될 수..

  • format_list_bulleted Frontend/React
  • · 2024. 5. 5.
  • textsms