Next.js에서 Devtools가 사라지는 문제 해결

문제 발생tanstack query hook을 만들어 사용하기 전 까진 문제 없이 devtools가 존재하다 hook을 사용하면 사라지는 문제가 발생했다!Tanstack Query를 사용하기 위해 먼저Provider를 만들어 {children} Root(next.js 14버전 기준 최상위 layout.ts)에 선언을 해줄 텐데Bad 😨만약 아래의 방법과 같이 TanstackQueryProvider안에 queryClient를 선언해줬다면 나와 같은 문제가 발생했을 것이라 생각한다.'use client';import { QueryClient, QueryClientProvider } from '@tanstack/react-query';import { ReactQueryDevtools } from ..

• format_list_bulleted React-Next.js
• · 2024. 8. 7.
• textsms

About Next.js

Next.js란?풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크.기존에 React를 사용하던 것 처럼 사용자 인터페이스를 구축하고 Next.js를 이용해 추가 기능과 최적화가 가능내부적으로 Next.js는 번들링(빌드), 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성함. 따라서 구성에 시간을 낭비하지 않고 애플리케이션 구축에만 집중할 수 있다.→ React보단 자유도가 떨어질 것이다. 대신 React에서 내가 추가적으로 해야하는 일을 대신 해줘서 할 일을 줄여준다!주요 특징Routing레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터Rendering서버 컴포넌트와 클라이언트 컴포넌트를 사용한 CSR과 SS..

• format_list_bulleted React-Next.js
• · 2024. 8. 7.
• textsms

[React 학습하기]state: 컴포넌트의 메모리 - React는 어떤 state를 반환할지 어떻게 알 수 있을까?(+ Hooks 이해하기)

학습 대상useState를 이미 사용해본 사람state의 작동 원리가 궁금한 사람React는 어떤 state를 반환할지 어떻게 알 수 있을까?우리가 useState를 호출할때 어떤 state 변수를 참조하는지에 대한 정보를 받지 못한다는 것을 눈치챘는가?import { useState } from 'react';const [index, setIndex] = useState(0);useState에 전달되는 식별자가 존재하지 않는데 react는 어떤 state 변수를 반환할지 어떻게 알 수 있을까? 함수를 파싱하는 것과 같은 마법에 의존하는 것일까?정답은 아니다.React에서 간결한 구문을 구현하기 위해 Hooks은 동일한 컴포넌트의 모든 렌더링에서 안정적인 호출 순서에 의존한다.아래의 규칙을 따르면, Ho..

• format_list_bulleted React-Next.js
• · 2024. 8. 7.
• textsms

[React 학습하기] 컴포넌트 순수성 유지

일부 JavaScript 함수는 순수하다. 순수 함수는 계산만 수행하고 그 이상은 수행하지 않는다. 컴포넌트를 엄격하게 순수 함수로만 작성하게 된다면 우리는 당황스러운 버그와 예측할 수 없는 동작을 피할 수 있다.하지만 이러한 이점을 얻으려면 몇 가지 규칙을 준수해야하는데, 이제부터 알아보도록 하자.순수성은 무엇일까?순수 함수는 다음과 같은 특징을 갖는다.자신의 일에만 신경쓰고 호출되기 전 존재했던 객체나 변수를 변경하지 않는다.동일한 입력이 들어오면 동일한 출력을 반환한다.우리는 순수 함수를 이미 알고있다.예를 들면 수학 공식에서y = 2x를 생각해보자.x에 같은 입력을 전달하면 항상 동일한 출력이 반환됨을 우리는 이미 알고 있다.React는 이 개념을 중심으로 설계되었다. React는 우리가 작성하는..

• format_list_bulleted React-Next.js
• · 2024. 8. 7.
• textsms

[React 학습하기] 컴포넌트에 props 전달하기

JSX 전개 구문으로 props 전달하기때때로 우리가 전달하는 props는 반복적이다.function Profile({ person, size, isSepia, thickBorder }) { return ( );}반복적인 코드는 가독성을 높일 수 있다는 점에서 잘못된 것은 아니지만 때로는 간결함이 중요할 때도 있다.Profile 컴포넌트가 Avatar 컴포넌트에게 그런 것처럼, 일부 컴포넌트는 그들의 모든 props를 자식 컴포넌트에 전달하기도 한다. 이 경우 Profile 컴포넌트는 props를 직접적으로 사용하지 않기 때문에, 간결하게 전개구문(Spread)을 사용하는 것이 합리적이다.function Profile(props) { return ( ..

• format_list_bulleted React-Next.js
• · 2024. 8. 7.
• textsms

[React 학습하기] Quick Start

학습 목적React의 기초 지식이 모자라다는 생각이 들어 직접 학습하기로 마음먹음어떤 강의보다도 리액트 공식 문서가 믿음직스럽기 때문에 선택이 페이지에선 당신이 매일 사용하게 될 React 개념의 80%를 소개합니다.Creating and nesting components리액트 앱은 컴포넌트로 만들어진다.컴포넌트는 고유한 로직과 외형을 가진 UI의 일부이다. 컴포넌트는 버튼만큼 작기도 하고 전체 페이지만큼 크기도 하다.리액트 컴포넌트는 마크업을 반환하는 Javascript 함수이다.function MyButton() { return ( I'm a button );}우리는 MyButton 컴포넌트를 선언했기 때문에, 또다른 컴포넌트에 중첩할 수 있다.export default function My..

• format_list_bulleted React-Next.js
• · 2024. 8. 7.
• textsms