Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

React, Next

원래는 React Query였으나 v4부터 Tanstack Query로 변경되었다고 함! 1. React Query(Tanstack Query)란? React Query는 서버에서 데이터 가져오기, 캐싱, 동기화, 업데이트 하는 것을 쉽게 만들어주는 라이브러리 일반적으로 사용하는 Redux, MobX와 같은 상태관리 라이브러리는 주로 클라이언트 상태에 초점을 맞추고 있는데 React Query는 서버 상태를 관리하여 서버에서 가져오거나, 업데이트 해야하는 데이터에 초점을 두며 클라이언트 상태 뿐 아니라 서버 상태도 효율적으로 관리할 수 있도록 도와준다. *클라이언트 상태(Client State)는 주로 UI와 관련된 상태, 서버 상태(Server State)는 DB에 저장되는 데이터 2. React Qu..

2024. 3. 17.

React, Next

React Hook Form이란? React에서 폼을 관리하기 위한 라이브러리 https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form library Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com 공식문서 말을 빌리자면, 사용자 경험을 중요시 하는 라이브러리로 폼에 일관된 유효성 검사 전략을 구현. 라이브러리가 가벼워 패키지 크기를 최소화하며 성능면에서도 렌더링 횟수를 최소화하는 라이브러리 React Hook Form 왜 사용할까? 이 라이브러리를 사용하기 전에 왜 사용하면 좋은지 라이브러리..

2024. 3. 16.

React, Next

생명주기 (Life Cycle)이란? 일반적으로 생명주기라는 건 인간의 생애주기처럼 탄생부터 죽음까지 타임라인을 단계별로 나누어놓은 것을 말한다. 리액트 컴포넌트의 라이프사이클은 간단히 말하면 컴포넌트가 생성되고 제거되는 과정을 말하며 크게 Mount, Update, Unmount로 나눌 수 있다. Mount: 탄생. 컴포넌트가 화면에 렌더링 됨 Update: 변화. 컴포넌트가 리렌더 됨 Unmout: 죽음. 컴포넌트가 화면에서 제거됨 이 과정을 좀 더 자세하게 알아보기 위해 카운터 앱을 만들어보자! import { useState, useEffect } from "react"; function App() { // useState 훅을 사용해서 count 상태와 그 값을 업데이트 하는 setCount 함..

2024. 3. 3.

React, Next

Virtual DOM이란? 먼저 Virtual DOM을 이해하기 위해선 웹 브라우저가 어떻게 동작하는지를 알아야 하며 아래 글을 참고하면 좋다! DOM(Document Object Model) 이란? 문서 객체 모델은 브라우저가 HTML 코드를 읽어서 웹페이지 구조를 아래처럼 트리형태로 표현한다. 그렇다면 화면을 업데이트 하고 싶을 때 어떻게 동작할까? 웹 브라우저가 화면을 업데이트 하는 건, 자바스크립트가 DOM을 수정할 때 발생하게 된다. DOM이 변경되면 브라우저는 해당 변경 사항을 감지하고 다시 레이아웃을 계산하고 화면을 다시 그리게 된다. 하지만 이 레이아웃 계산과 페인팅 과정은 굉장히 오래 걸리는 작업이며 성능을 저하시킬 수 있다. 이런 문제를 해결하기 위해 Virtual DOM이 도입되었는데..

2024. 2. 27.

React, Next

1. API키 발급받기 문서: https://apis.map.kakao.com/web/guide/ 카카오맵 개발자 사이트: https://developers.kakao.com/ 사용하기 전 카카오맵 개발자 사이트에 들어가 키를 발급받아야 한다. 애플리케이션 추가하기를 클릭 후 앱이름, 사업자명, 카테고리 정보를 넣어준다. 플랫폼을 등록할 땐 도메인이 있으면 도메인 주소를 넣으면 되는데 개발환경이기 때문에 http://localhost:3000 으로 등록을 해줬다. 이렇게 자바스크립트 키까지 발급 받았으면 생성한 React 프로젝트 안에 있는 public - index.html에 있는 header에 아래 코드와 함께 자바스크립트 키를 넣어주면 된다. 2. 지도 띄우기 문서를 보면 다 html, javasc..

2024. 1. 27.

React, Next

1. 초기 렌더링 시 function App() { const [list, setList] = useState(); useEffect(() => { const fetchData = async () => { const res = await fetch("https://api.example.com/data"); const result = await res.json(); setList(result); }; fetchData(); }, []); return ( {list.map((item) => ( ))} ); } 위 코드는 useState훅을 사용해서 list라는 상태 변수를 만들고 데이터를 비동기적으로 가져와 list상태를 업데이트 하게 된다. 하지만, 상태변수를 만들 때 괄호가 비어있으면 초기값이 undef..

2024. 1. 17.