REACT26 useEffect 내부에서는 기명함수를 사용하자 useEffect useEffect는 외부 시스템과 컴포넌트를 동기화 시켜주는 리액트 훅으로, 공식 문서에 나와있는 useEffect의 예시 코드는 이러한 모양입니다. 코드를 보면, useEffect의 첫 번째 인자로 트리거 시 실행될 동작을 익명함수로 넣어주고 있습니다. 이때 훅 내부의 함수가 길어지면 특별한 주석 없이는 코드의 동작을 알기 어려워 질 때가 종종 발생합니다. 따라서 함수를 적절한 이름을 붙인 기명함수로 바꿔주면 팀원들의 이해를 도와줄 수 있습니다. 이 상태에서, 임의로 오류를 발생시켜 보겠습니다. Uncaught Error: Error occurred! at (/src/App.jsx?t=1710664770335:24:11) 에러가 발생한 위치의 stack trace에 at 뒤로 파일의 .. 2024. 3. 17. Redux와 RTK로 상태 관리하기 들어가며 React에서 전역 상태를 관리하는 방법은 다양합니다. React가 공식적으로 제공하는 Context API부터, 얼마전에 소개했던 Zustand 등 수많은 라이브러리들이 있습니다. 오늘은 그중에서도, 꽤 오랜 시간 사용되어 온 Redux와 RTK에 대해 알아보겠습니다. Redux Redux는 Flux 패턴을 따라가는 상태 컨테이너입니다. Dispatcher의 Action를 통해 Store의 상태를 변화시키고, 이 상태가 다시 View에 차례대로 반영되는 단방향 구조가 Flux 패턴의 핵심입니다. 이러한 구조로 만들어진 컨테이너를 활용하여 쉽게 데이터를 집약하고, 일관성 있게 관리할 수 있다는 것이 바로 Redux의 장점입니다. 예시를 통해 React에서 Redux를 사용하는 방법에 대해 알아보.. 2024. 3. 3. Zustand로 전역 상태 관리하기 들어가며 React에서 전역 상태를 관리하는 방법에는 대표적으로 Context API가 있습니다. 단방향의 데이터 흐름을 해치지 않으면서도, Provider를 통해 각 컴포넌트에서 상태를 사용할 수 있게 해주는 기능입니다. React에서 공식적으로 지원하는 기능이기에 공식 문서에서도 이 방법을 추천하고 있습니다. 아직 Context API에 대해 잘 모른다면 아래 포스트를 참고해주세요. Context API 개념 잡기 그러나 Context API를 직접 사용하지 않고 서드 파티 라이브러리를 이용해 전역 상태를 관리하는 방법도 있습니다. 대표적으로 Zustand, Recoil, Jotai 등이 있는데요, 오늘은 Zustand를 사용하는 방법과 주의할 점들을 알아보도록 하겠습니다. 구성 먼저 사용하는 패키지.. 2023. 12. 20. 리액트에서 DOM Node를 찾는 방법 들어가며 오늘은 React에서 DOM Node를 선택하는 방법에 대해 짧게 적어보려합니다. 함수 컴포넌트가 주류가 된지 꽤 오랜 시간이 지난 지금이야 당연하게도 useRef를 사용하지만, 과거 클래스 컴포넌트가 주로 사용되었을때는 이러한 훅 대신, react-dom에 포함된 findDOMNode라는 메서드를 사용하여 브라우저의 DOM Node를 선택하였습니다. 이번 포스팅에서는 해당 메서드가 어떻게 사용되었는지, 이 방식이 어떤 문제점을 가지고 있었으며 현재의 모습으로 바뀌면서 어떻게 문제를 해결했는지에 대해 알아봅니다. findDOMNode findDOMNode는 리액트에서 노드를 찾는 가장 원시적인 방법으로, 클래스 컴포넌트의 생명 주기 메서드 내에서 사용합니다. 찾고싶은 DOM Node를 findD.. 2023. 8. 5. 리액트에서 기본 컴포넌트를 만들때 이번에 사이드 프로젝트를 하며 맞닥뜨렸던 문제인데, 잊기전에 간단히 정리해두려 합니다. 문제 상황 프로젝트를 처음 시작하면, 디자인을 적용하기 위해 자주 쓰는 기본 HTML 요소들을 커스텀 컴포넌트로 만들게 됩니다. 예를 들면 태그나 태그등이 있습니다. 보통 아래처럼 다양한 props들을 받을 수 있도록 여러가지 인자를 선언해두고 사용합니다. export interface InputProps { isValid?: boolean; hasUnderline?: boolean; } const Input = ({ isValid = true, hasUnderline = false, }: InputProps) => { return ; } 그러나 이미 존재하는 태그를 덮어씌워 반환해주는 이러한 기본 컴포넌트의 경우 그.. 2022. 12. 22. 썸네일 생성기를 리뉴얼 했어요 지금으로부터 약 1년 전, 블로그 포스팅에 사용하기 위해 썸네일을 생성해주는 프로그램을 만들었습니다. 이때 만든 프로그램을 지금까지도 만족스럽게 쭉 써오고 있었는데, 몇 가지 불편한 점이 있었으나 기술적인 역량이 부족하여 손대지 못하고 있었습니다. 🚩 이전에 만들었던 썸네일 생성기 제작기 썸네일 생성기를 만들었어요 (Thumbnail generator) 이번에 우아한테크코스를 진행하며 생각해오던 목표 중 하나가 기술적으로 성장해서 이전에 진행했던 프로젝트들을 리팩토링 하는 것이었습니다. 현재까지 가장 많이 사용했었고, 앞으로도 계속 사용할 예정이며 직접 사용하며 느꼈던 불편점들이 명확했던 썸네일 생성기가 첫 번째 대상이 되었습니다. 현재 프로젝트의 문제점 우선 기술스택부터 점검하였습니다. 기존의 썸네일 .. 2022. 12. 12. 이전 1 2 3 4 5 다음
