개발 블로그

“왜 써야 하는지부터, 언제 쓰면 안 되는지까지”React Native를 하다 보면한 번쯤은 Animated를 마주치게 됩니다.공식 문서도 있고 예제도 많은데,막상 써보려고 하면 이런 생각이 먼저 듭니다.“이거… 왜 이렇게 어려워?”“useState로 opacity 바꾸면 되는 거 아냐?”“이걸 꼭 써야 해?”저도 처음엔 Animated가 괜히 복잡한 API 같았고,실제로 몇 번은 안 써도 될 곳에 억지로 쓰다가 코드만 더 꼬였던 적도 있습니다.이 글에서는리액트 개발자 기준에서 Animated를 왜 쓰는지, 언제 써야 하는지최대한 사람 말로 정리해보려고 합니다.Animated는 뭐 하는 놈인가?한 줄로 요약하면 이겁니다.“부드러운 애니메이션을 성능 저하 없이 처리하기 위한 도구”일반적인 리액트 상태 변경..

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

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