React

🌳 훅(Hook)이란함수형 컴포넌트에서 리액트의 상태(state)와 생명주기 기능을 연동해주는 함수입니다.리액트 버전 16.8부터 새롭게 추가된 기능으로, 리액트의 클래스형 컴포넌트에서만 이용할 수 있던 기능을 함수형 컴포넌트에서도 사용할 있게 해줍니다.따라서 훅을 사용하면 기존의 클래스(class)를 작성하지 않고도 상태와 리액트의 다른 여러 기능들을 이용할 수 있습니다.훅은 함수형 컴포넌트에 맞게 만들어진 것이므로 함수형 컴포넌트에서만 사용이 가능하며, 'use'라는 키워드로 시작하는 특징을 가지고 있습니다. 리액트에는 여러 가지 훅들이 존재합니다. 이번 글에서는 대표적인 5가지 훅을 정리해보겠습니다.useStateuseEffectuseRefuseMemouseCallback 🌳 대표적인 훅 5가지..

📬 서버 상태(Server State)서버 상태란 클라이언트가 아닌 서버나 그 밖의 외부 공간에 저장되어 있는 데이터로, 일반적으로 클라이언트가 요청을 보내 데이터를 사용합니다.서버 상태의 특징은 다음과 같습니다.서버에 저장되므로 클라이언트가 종료되어도 데이터가 사라지지 않습니다.보통 클라이언트에서 API 요청을 보내 데이터를 받아서 사용하며권한이 있는 클라이언트라면 누구나 서버 상태 데이터에 접근할 수 있습니다.네트워크 요청이 요구되므로 데이터에 접근하고 업데이트하는 데 시간이 걸릴 수 있습니다.서버 상태에는사용자와 관련된 정보(프로필, 권한의 정도)데이터베이스에 저장된 각종 데이터API를 통해 가져와야 하는 데이터비동기 데이터등이 존재합니다. 📬 클라이언트 상태(Client State)클라이언트 ..

🏝️ React-Query란웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 것을 쉽게 만들어주는 상태 관리 라이브러리입니다.- TanStack Query리액트로 애플리케이션을 개발하면, 보통 useState와 useEffect를 사용하여 데이터와 상태를 관리합니다.이 과정에서 상위 컴포넌트에서 하위 컴포넌트로 props를 깊게 내려줘야 하는 상황('props drilling')이나 공통된 데이터를 여러 컴포넌트에서 사용하는 경우가 존재합니다. 이때 리액트의 컨텍스트(context API)를 사용할 수 있지만, 애플리케이션의 규모가 크거나 구조가 복잡하다면 컨텍스트만으로 상태를 관리하는 것은 한계가 있습니다. 따라서 반복적인 데이터 fetching 코드 감소기존 데이터 캐싱..

🔮 디자인 패턴이란디자인 패턴이란 프로그램을 개발하는 과정에서 사용되는 설계 패턴들을 정의한 것입니다.과거의 웹 사이트보다 훨씬 복잡해지고 다양한 개발 프레임워크를 사용하는 지금, 효율적인 웹 사이트의 구축이나 유지보수를 위해 컴포넌트 단위의 활용은 더욱 중요한 사항이 되었습니다. 따라서 컴포넌트를 구성하는 방법에 대한 다양한 디자인 패턴이 생겨나게 되었으며,패턴마다 장단점이 존재하므로 프로젝트의 특성에 맞는 디자인 패턴을 선택해야 합니다. 리액트의 주요한 디자인 패턴은 다음과 같습니다.컴포넌트 기반 아키텍처(component-based architecture)상태 관리 패턴(state management pattern)프레젠테이션-컨테이너 패턴(presentation-container pattern)..