코딩을 잘하고 싶은 코린이 동토니

React-Query와 Next.js를 연결해보자 최근 회사에서 Next의 SSR을 극대화 시키는 방법으로 React-query의 initial data기능을 사용하기 시작했다. 우선 react-query의 initial data에 대해 먼저 알아보면 특정 쿼리가 client에서 데이터를 요청하기 전에 처음부터 가지고 있을 데이터를 미리 설정해두고 뿌려주는 기능이다 먼저 React-query의 공식문서 예시를 한번 살펴보자 function Todos() { const result = useQuery(['todos'], () => fetch('/todos'), { initialData: initialTodos, }) } 생김새는 기존의 useQuery와 똑같고 단지 마지막에 initialData라는 옵션에..

회사에 들어온 후 React-Query에 대한 도입을 회사 내부에서 고민을 하고있을때 신규 프로젝트 백오피스를 제작하며 React-Query를 가장 먼저 도입해서 사용을 해보았다. 해당 백오피스를 처음 제작할때 사용했던건 Next.js, 전역상태관리를 위한 recoil, emotion styled-component 정도만 정해두고 사용하고 있었다. 하지만 데이터 패치 관련하여 recoil에서 커버가 불가능한 부분이 점점 생겨나기 시작했고, 이에대한 해결방안을 모색하던중 많은 기업에서 react-query를 도입하고 있고 왜 react-query를 도입했는지 이유 또한 충분히 납득이 갔기에 나도 한번 채택하여 사용해보기로 하였다. 우선 react-query를 사용하기전 기존의 방식은 아래와 같은 순서로 점..

식별자 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름이다. 따라서 변수이름은 식별자라고도 불리며 식별자는 값이 아닌 메모리 주소를 기억하고 있다. 즉 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근하게 된다. 식별자란 용어는 변수 이름에만 국한되는것이 아닌 변수,함수,클래스 등의 이ㅡㄻ은 모두 식별자이다. 변수 선언 변수 선언은 변수를 사용하기위한 선언으로 JS에서는 var, let ,const 를 사용한다. ES6에서 let과 const가 도입된 이후 var은 잘 사용하지 않는다 let은 값이 변경 가능한 변수 const는 값이 변경 불가능한 상수이며 두가지 모두 블록 레벨 스코프를 지원한다. 변수의 실행시점과 호이스팅 console.log(score); *// u..

hooks는 기존 함수형 컴포넌트에서 할수 없었던 다양한 작업을 할 수 있게 도와준다. 1.useState = 상태 관리에 사용 *import* React, { useState } *from* "react"; const Counter = () => { const [number, setNumber] = useState(0); *return* ( 현재 카운터 값은 {number}입니다.{" "} setNumber(number + 1)}>+1 setNumber(number - 1)}>-1 ); }; *export* *default* Counter; useState 파라미터에는 상태의 기본값을 정해준다 위의 경우 0 이 함수가 호출 되면 배열을 반환을 해주고 배열의 첫번째 원소는 상태 값 두번째 원소는 상태를 ..

state란? state는 변경될 수 있는 데이터를 말한다. (Hooks가 사용되기 이전에는 state는 함수형 컴포넌트에서 사용이 불가능 했지만 Hooks가 나온 이후로는 함수형 class형 관계없이 사용이 가능하다.) 즉 state는 컴포넌트 내에서 데이터를 유동적으로 관리해야 할 때 사용한다. Props? 이전에 공부한 props(properties)는 컴포넌트간에 전송이 가능한 데이터였지만 부모 컴포넌트에서 전달되는 값이였기 때문에 한 컴포넌트안에서 데이터 변경을 할수가 없다. state 접근 state의 경우 직접적으로 state의 값을 변경시켜주려하면 안된다. class형 컴포넌트에서 setState()함수를 통해 state의 값을 변경시켜주어야 한다. state 예시 counter.js im..