React Query - 비동기 상태 관리 라이브러리 알아보기

React Query란? React Query는 비동기 상태 관리 라이브러리입니다. React에서 서버의 데이터 fetch를 도와주고 관리할 수 있는 라이브러리입니다. React Query 장점 1. 적은 보일러 플레이트 코드 2. 캐싱 3. 중복 요청 방지 4. 오래된 데이터 업데이트 5. 로딩, 에러, 데이터 결과 처리가 쉽습니다. useQuery를 이용해서 직관적으로 사용할 수 있고, 보일러플레이트 코드 작아서 사용하기 간편합니다. 또, 캐시를 이용해서 데이터를 가지고 있어서 성능이 우수하고, 로딩 및 에러 처리 하기가 쉽습니다. 첫 번째 API 호출 시에 데이터를 캐시에 가지고 있습니다. 두 번째 동일한 API 호출 시 캐시에 가지고 있는 데이터를 즉시 반환합니다. 그 이후 다시 데이터를 조회한 ..

• format_list_bulleted Develop/React
• · 2023. 11. 7.
• textsms

React - Timer 분/초/소수점 타이머 만들기

Next.js 에서 React와 TypeScript를 이용해서 타이머를 구현해보도록 하겠습니다. React Hook은 useEffect와 useMemo를 사용하였습니다. 1. 컴포넌트 렌더링 시 setInterval 함수를 통해서 1초 감소 2. setInterval 종료 3. 다시 재렌더링 이런 메커니즘으로 타이머가 진행 됩니다. 1분 이하에는 0.1초 단위로 시간이 내려갑니다. See the Pen React + TypeScript Starter by powerku (@powerku) on CodePen. 타이머 컴포넌트 timer.tsx const Timer = ({minute = 15, second = 0}: TimerProps) => { const [min, setMinute] = React.u..

• format_list_bulleted Develop/React
• · 2023. 11. 1.
• textsms

React - useMemo 이용해서 성능 최적화 하기

useMemo란? useMemo는 리액트 훅 중의 하나입니다. Memoization 메모이제이션. 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술. 리액트에서 재 렌더링 될때 마다, 계산된 값을 캐시로 가지고 있기 때문에 동일한 계산을 반복하지 않고 이전 캐시된 값을 사용하여 성능 향상을 시킬 수 있습니다. 계산비용이 높거나, 컴포넌트가 불필요하게 자주 렌더링 되는 경우에 사용하면 좋습니다. useMemo 사용법 useMemo(calculateValue, dependency) 파라미터 caculateValue 계산하려는 값을 반환하는 함수 입니다. 반드시 return 값이 있어야 합니다...

• format_list_bulleted Develop/React
• · 2023. 11. 1.
• textsms

next-auth 이용해서 10분만에 소셜 로그인 구현 하기

next-auth란? next-auth는 Next.js 프로젝트에서 소셜 로그인을 간단하게 구현할 수 있는 라이브러리 입니다. 국내에서는 구글, 카카오, 네이버, 페이스북, 애플 등 다양한 소셜 로그인을 이용하고 사용합니다. 해당 사이트가 늘어나면 늘어날 수록 로직은 달라지고 복잡해지는데 next-auth를 이용하면 한번에 쉽고 간단하게 구현 가능합니다. Next.js 프로젝트 구성하기 Typescript, tailwind, App Router 방식을 이용해서 구현할 예정입니다. 저는 shacdn이라는 라이브러리를 사용해서 버튼과 아바타 컴포넌트를 사용할 예정입니다. Next.js 설치하기 npx create-next-app Next.js 설치하는 방법에 대해서 알아보도록 하겠습니다. 설치하는 방법에는 ..

• format_list_bulleted Develop/React
• · 2023. 10. 26.
• textsms

Next.js 설치하기 npx create-next-app

Next.js 설치하는 방법에 대해서 알아보도록 하겠습니다. 설치하는 방법에는 두가지가 있습니다. npx create-next-app을 이용해서 한 번에 자동으로 설치하는 방법과 next.js에 필요한 라이브러리를 하나하나 설치해서 직접 설정하는 두 가지 방법이 있습니다. 이번 글에서는 자동 설치에 대해서 알아보겠습니다. npx create-next-app을 이용하여 설치하기 1. 프로젝트 폴더를 생성할 폴더에서 커맨드창에서 아래 명령어를 입력합니다. npx create-next-app@latest 2. 프로젝트 구성 설정을 선택합니다. What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like t..

• format_list_bulleted Develop/React
• · 2023. 10. 24.
• textsms

Zustand - 요즘 인기 있는 간편한 React 상태 관리 라이브러리

React 상태 관리 라이브러리란? React에서는 상태 값을 useState나 useReducer를 이용해서 관리할 수 있습니다만, 다양한 컴포넌트, 페이지에서 공유하기 위해는 상태 관리 라이브러리를 사용하는 것이 편리하고 좋습니다. 그중 유명한 것들이 Redux, Recoil, Zustand 등이 있습니다. 그중 Zustand 특징, 설치 방법, 사용법에 대해서 작성해 보겠습니다. Zustand 란? React 상태 관리 라이브러리 중 하나입니다. 가볍고 사용하기 간편해서 Redux 다음으로 가장 npm 다운로드수가 가장 높습니다. Zustand 특징 React 상태 관리 라이브러리 중 하나인 Redux의 경우에는 사용하기 어렵고, 코드가 복잡합니다. 그래서 React를 공부하는 분들 중에, Redu..

• format_list_bulleted Develop/React
• · 2023. 10. 19.
• textsms

React DOM이란? React 원리

React란? 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리입니다. 리액트는 컴포넌트를 이용하여 사용자 인터페이스를 효과적으로 구축할 수 있습니다. Props를 이용해서 데이터를 전달하고 State를 이용하여 상태 변화를 감지할 수 있습니다. 상태 변화를 감지하게 되면 컴포넌트를 업데이트 합니다. 하지만, React는 웹화면에 직접 렌더링 하지 않습니다. React는 단지 컴포넌트화를 하고, 데이터를 전달하고 상태를 관리하는 라이브러리일뿐입니다. 사용자가 보는 웹 화면은 React DOM을 이용해서 업데이트를 진행합니다. React DOM 이란? import React from 'react'; import ReactDOM from 'react-dom'; import App from './App';..

• format_list_bulleted Develop/React
• · 2023. 9. 19.
• textsms

React - 조건부 렌더링 하기 삼항연산자/논리연산자/변수 할당

React에서 조건에 따라서 렌더링 할 수 있는 방법이 3가지 있습니다. 삼항연산자 사용하기 isLogin 값이 true, false 값에 따라서 다른 화면을 렌더링 할 수 있습니다. export default function Dev() { const [isLogin, setIsLogin] = useState(true); return ( {isLogin ? 로그인 되었습니다. : 로그인이 필요합니다.} ); } 논리 연산자 사용하기 && 연산자를 사용합니다. isLogin 값이 true일 경우에만 렌더링 합니다. export default function Dev() { const [isLogin, setIsLogin] = useState(true); return ( {isLogin && 로그인 되었습니다..

• format_list_bulleted Develop/React
• · 2023. 9. 16.
• textsms

React - 데이터 배열 렌더링 하는 방법 key를 입력해야 하는 이유

리액트에서 배열을 렌더링 할 수 있는 방법이 있습니다. Javascript 문법 중 map 함수를 이용해서 데이터 렌더링을 할 수 있습니다. Array.prototype.map() - JavaScript | MDN map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. developer.mozilla.org 리액트 배열 렌더링하기 아래와 Array 함수 map을 실행시켜서 배열을 렌더링 할 수 있습니다. map 함수의 첫번째 인자는 배열의 내부의 객체이고 두 번째 인자는 index 순서입니다. 단 key 값을 입력하지 않으면 오류가 발생합니다. const userInfo = [ { id: 1, name: "Superman", }, { id: 2..

• format_list_bulleted Develop/React
• · 2023. 9. 15.
• textsms

React - 부모➡️자식 / 자식➡️부모 데이터 전달하기🚀

React에서 부모에서 자식으로 자식에서 부모로 데이터 전달할수 있습니다. 부모에서 자식은 Props를 이용해서 데이터를 전달할 수 있고, 자식에서 부모 데이터 전달은 부모 컴포넌트에서 데이터를 변경하는 함수를 Props로 전달하고 자식컴포넌트에서 전달받은 함수를 호출해서 데이터를 변경할 수 있습니다. 아래 예시를 보면서 알아보도록 하겠습니다. 부모➡️자식 데이터 전달하기 부모 컴포넌트 부모 컴포넌트에 name Props를 이용해서 Child 컴포넌트에 전달합니다. import { useState } from "react"; import Child from "../../components/Child"; export default function Dev() { const [name, setName] = u..

• format_list_bulleted Develop/React
• · 2023. 9. 15.
• textsms