목록React (2)

개발 블로그

React 더미 데이터 사용하기, 가장 간단한 Mock Data 사용방법. (라이브러리 없이 )

프론트와 백을 나누어 프로젝트를 진행하다보면 API 가 만들어지기 전에 디자인 및 레이아웃이 먼저 나오는 경우가 정말 많다. 이 경우에 백엔드에서 마치 데이터를 받아 오는 것처럼 미리 구현을 해놓으면, 추후 API 가 만들어졌을때 라우터명만 바꿔주면 된다. 이렇게 더미 데이터를 만들어 놓고 미리 화면을 짜고, 로직을 만드는 방식은 정말 많다. 구글링을 해보면 보통 MSW(https://www.npmjs.com/package/msw) 라이브러리를 사용하여 Mocking (단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을 가짜(mock)로 대체하는 기법) 하는 방법을 많이 소개해준다. 이번 포스팅에서는 MSW 와 같은 Mocking 라이브러리를 사용하지 않고 아주 간단하게 Mocking 하는 방법을 소..
React 2024. 3. 17. 20:06
React - Context API 설명과 예시 코드, 그림 설명

벌써 프론트엔드 개발 2년차인데 이 회사를 들어오고 나서 단 한번도 Context API 를 사용한 적이 없다. 기존 프로젝트가 redux 로 상태관리를 하였었고, 이후에 react-query 와 jotai 라이브러리로 상태 데이터를 관리하는 것으로 리팩토링을 진행하였기 때문이다. 이러던 중 문득, 다른 많은 UI 라이브러리들이 Context API 로 구성되어 있는 것을 발견하였고 Context API 공부의 필요성을 느껴 따로 공부하여 정리하여 본다. Context API 란? Context API 란 React 에서 제공하는 상태 관리 API 이다. 먼저 기존 리액트의 구조를 살펴보겠다. 리액트는 컴포넌트가 다음과 같이 트리구조로 구성되어 있다. 때문에, 컴포넌트 간의 데이터를 교환 할때는 pro..
React 2024. 1. 15. 00:08
이전 Prev 1 Next 다음