Curt Poem about Computer

리액트로 개발을 진행하다보면 하나의 컴포넌트에서 여러 개의 상태(state)를 사용해야 될 때가 있습니다. 상태가 많아지는 것 자체는 큰 문제가 되지 않을 수도 있지만 상태가 많을 경우 여러 방식으로 상태가 변화할 수 있기 때문에 상태 관리가 복잡해 질 수있습니다. 리액트에서는 이 문제를 해결하기 위해 Reducer를 사용할 수 있습니다.예시 코드만약 목록들을 생성, 수정, 삭제하는 기능을 가진 컴포넌트를 만들어야 한다고 가정해봅시다. 그러면 해당 요구사항을 충족하기 위해 다음과 같은 컴포넌트를 만들 수 있습니다.import { useState } from 'react';import AddElement from "./AddElement"import List from "./List"export defaul..

useEffect 훅의 목적 중 하나는 부수효과를 안전하게 처리하는 것입니다. 부수효과란 앱이 의도한 대로 동작하기 위해 실행되어야 하지만 현재의 컴포넌트 렌더링 과정에 직접적인 영향을 미치지는 않는 작업입니다. 이러한 작업들은 꼭 실행되어야하는 작업이지만 현 컴포넌트 렌더링 과정에 직접적이고 즉각적인 영향을 미치지 않는 작업들이죠. 즉각적인 변화를 주지 않고 뒤늦게 영향을 주기 때문에 무한 루프 같은 문제점이 발생할 수 있습니다. useEffect로 부수효과 안전하게 처리하기 HTTP 요청에서의 부수효과 일반적으로 이러한 부수 효과는 외부 서버에서 데이터를 불러오는 작업 등 비동기 함수를 실행하는 상황에서 쉽게 볼 수 있습니다. 다음 코드를 보시죠. import { useState, useEffect ..

axios 요청의 try-catch문에서 catch (error) {console.log(error)}로 인해 콘솔창에 나온 메세지였습니다. canceled라는 에러가 발생하였는데 요청을 취소하는 로직을 추가한 상태도 아니었습니다. Tanstack ReactQuery 라이브러리를 사용하고 있었기에 Tanstack에서 뭔가 이상을 감지하고 취소하였을 거라 생각도 해보았지만 요청이 취소될 이유가 전혀 없어 보였습니다. error의 signal 항목을 살펴보니 다음과 같이 reason이라는 항목이 있어 확인해보았습니다. code: 20에 message: signal is aborted without reason"라는 것을 확인할 수 있었습니다. 아무런 정보를 얻지못했죠. 그래서 다른 곳에 원인이 있을 것이라고..

앞선 글에서 리액트는 SPA를 만드는 라이브러리라고 했습니다. SPA는 페이지 이동없이 동적인 콘텐츠를 표시할 수 있는 어플리케이션입니다. SPA를 구현하기 위해서는 여러 콘텐츠를 사용자와의 상호작용에 따라 보여줄 수 있어야 하죠. 리액트는 훅이라고 불리는 것으로 동적인 값을 관리할 수 있습니다. '훅'이라는 용어는 함수형 컴포넌트 내에서 특정한 리액트 기능에 "연결(hook into)"하거나 액세스할 수 있는 개념을 나타냅니다. 리액트의 수 많은 'Hook' 중에서 가장 기초가 되는 Hook인 userState에 대해서 알아보겠습니다. HOOK의 규칙 useState에 대해 자세히 알아보기 전에 모든 리액트 Hook들이 가지는 공통적인 규칙 먼저 알아보겠습니다. 리액트의 모든 Hook들은 컴포넌트의 최..