동적으로 쿼리 사용하기input에 검색어를 입력하고 검색하면 해당되는 데이터를 받아오려고 한다.이전 게시물에서 분리해두었던 http.js의 url에 쿼리 파라미터를 추가해 동적인 쿼리를 만들어보자. export default function FindEventSection() { const searchElement = useRef(); function handleSubmit(event) { event.preventDefault(); } return ( Find your next event! Search Please enter a search term and to find events..
useQuery 사용하기npm install @tanstack/react-queryyarn add @tanstack/react-query 먼저 TanStack Query 사용을 위해 설치를 해준다. 강의를 따라가면서 기존 코드에서 useQuery를 도입해보자. NewEventsSection이라는 컴포넌트에는 커스텀 상태 관리와 useEffect hook이 있다.컴포넌트가 마운트 될 때마다 fetchEvents라는 함수가 실행된다. 이 함수가 실행되면서 setIsLoading(true)가 되고, response 또는 error를 받아 그에 맞는 content를 보여준다.export default function NewEventsSection() { const [data, setData] = useStat..
unknown 타입의 error 객체를 만나다커피빈 클론 중 로그인 폼을 제출했을 때, 실패 시 error status에 따라 적절한 alert을 띄우려고 한다.이 때 try catch문으로 erorr를 다루는데 error에서 자꾸만 빨간 줄이 떴다. error 뒤에가 보이지 않는데, 처음에는 error의 타입을 any로 줬다. 하지만 eslint에서 에러를 내기도 했고 (Unexpected any. Specify a different type 라고 off를 하지 않았다.), 되도록 any는 지양하려고 해서 하라는대로 unknown을 주었다. 그런데 error의 타입을 unknown으로 지정했는데도 자꾸만 error 타입은 unknown이야! 이런다.아니 unknown으로 했잖아 왜 그러는데! 하다가 ..
들어가기(v4부터 다른 프레임워크도 지원함에 따라 더 이상 React Query가 아니라 TanStack Query가 되었지만 여전히 많은 유저들이 React Query라고 하는 것 같다. 나도 그게 더 손에 붙지만 공식 문서에 TanStack Query로 명명되어 있으므로 앞으로는 TanStack Query라고 하겠다.) 최근 '좋은 상태 관리'에 대한 고민을 하고 있다. 이전에 작업한 곰곰 다이어리를 리팩토링하려고 하는데 상태가 매우 더러워 손을 댈 엄두를 내지 못하고 있기 때문이다. 클라이언트에서 쓰는 상태와 서버 데이터를 받는 상태들이 복잡하게 섞여 있는 게 가장 큰 이유인데, 이걸 어떻게 개선하면 좋을지 알아보다 TanStack Query를 적용해보면 좋겠다는 생각을 하게 됐다. 상태란?먼저 맨..
들어가기 예전부터 React로 개발하면 맨 윗줄에 import React from 'react'를 쓰는 게 거의 관행이었다. 뭔가 왜? 라는 의문을 가질 것도 없이 그렇게 해야 React를 쓸 수 있다고 이해했기 때문이었고, 단축키인 rafce를 사용하면 알아서 import React from 'react'가 포함된 화살표 함수 컴포넌트를 만들어주기 때문에 크게 불편함을 느끼지 못하고 있었다. 그런데 어느 순간부터 import React from 'react'에 밑줄이 쳐지면서 아래와 같은 메세지가 생겼다. 이게 불편하다는 걸 인지하게 된 첫 번째 이유는 "안 쓰고 있는데... 왜 이걸 import 해야 하지?" 라는 의문이었다. 두 번째로는 저걸 지우지 않은 상태로 Vercel을 사용해 빌드를 했더니 ..
들어가기 프로젝트의 규모가 커지고 관리해야 할 상태가 더 많아진다면 여러 가지 문제가 생길 수 있다. 먼저 리듀서 함수의 액션 타입(식별자)에서 오타가 난다거나, 식별자의 이름이 충돌되는 경우가 그렇다. 또 데이터와 상태가 많아질수록 리듀서 함수의 길이가 점점 길어지면서 유지보수하기 어려워질 수 있다. const counterReducer = (state = initialState, action) => { if (action.type === 'plus') { return { counter: state.counter + 1, showCounter: state.showCounter, }; } if (action.type === 'minus') { return { counter: state.counter - ..
들어가기 이전 글에서 + 버튼과 - 버튼을 눌러 1씩 증감하는 카운터를 만들었다. 매우 단순하게 하나의 action을 다뤘는데, 지금부터는 아주 약간 더 다양한 것을 하려고 한다. 예를 들어 1가 아니라 5씩 증가하는 버튼이나, 카운터 버튼이 보였다/보이지 않는 토글 같은 것은 어떻게 만들 수 있을까? payload 먼저 5씩 증가하는 버튼을 만들고 싶다면 어떻게 해야 할까? if (action.type === '5 plus') { return { counter: state.counter + 5, }; } 물론 이렇게 해도 상관 없지만, 이는 확장성이 떨어진다. action에 원하는 속성을 추가하는 더 좋은 방법이 있다. action은 객체라는 점을 기억하고 가자. const morePlusHandler..
들어가기 지난 번 글에서 Redux에 대해 간단히 알아보았다. React에서는 Redux Store를 어떻게 만들고, 어떻게 제공하고 그 데이터를 어떻게 사용하는지 예제를 통해 알아보자. Store 만들기 만들기 전에 먼저 yarn add(또는 npm i) redux react-redux로 라이브러리를 설치한다. 이전에 적었는지 모르겠지만 Redux는 React에서만 사용할 수 있는 라이브러리가 아니기 때문에 react-redux도 설치해야 한다. store 폴더를 만들고 index.js를 생성한다. 꼭 폴더명을 store로 할 필요는 없지만 통상적으로 store라고 사용하니 절대다수를 따라주자. import { createStore } from 'redux'; const counterReducer = ..
Redux란 A state management system for cross-component or app-wide state 컴포넌트 간 상태 또는 앱 전역 상태를 위한 상태 관리 시스템 상태는 3가지로 나눌 수 있다. 1. 로컬 상태: 데이터가 변경되어 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태 2. 컴포넌트 간 상태: 하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을 미치는 상태 (props drilling을 거치는) 3. 전역 상태: 애플리케이션의 모든 컴포넌트에 영향을 미치는 상태(사용자 인증 같은) 컴포넌트 간 상태나 전역 상태의 경우, 데이터를 넣고 전체 props 함수를 업데이트 하는 행위는 번거로울 수 있다. 그래서 React가 내부에서 지원하는 Context가 존재하고, 이를 ..
React.js의 렌더링 방식 React의 렌더링 방식을 살피기 전, 웹 브라우저가 어떻게 동작하는지 먼저 알아보자. 웹 브라우저의 동작 브라우저는 HTML, CSS로 작성한 웹 페이지를 화면에 렌더링한다. 이 렌더링 과정은 Critical Rendering Path를 이뤄진다. 1단계: HTML -> DOM, CSS -> CSSOM으로 변환한다. 이 때 DOM은 문서 객체 모델의 약자로, HTML을 브라우저가 해석하기 편한 방식으로 변환한 '객체 트리'를 말한다. CSSOM도 동일하다. 2단계: Render Tree DOM + CSSOM = Render Tree 웹 페이지의 청사진으로, DOM에는 HTML로 작성한 요소들의 배치 및 모양을 기술한 정보가 있고 CSSOM에는 CSS로 작성한 요소들의 스타..
