삼바의 성장 블로그

Dominik의 트위터에 useQuery의 변경점에 대한 내용이 올라왔습니다. 이미 우리는 콜백(onSuccess, onError, onSettled)을 많이 사용하고 있습니다. 따라서 콜백을 제거하는 것에 대해 부정적으로 생각할 수 있지만, 기존의 콜백은 예상대로 동작하지 않을 수 있기에 변경이 필요했습니다. API에서 중요한 요소중 하나는 일관성입니다. 사람들은 추상화되어있는 API에서 일관된 응답을 받기를 원합니다. 하지만 useQuery의 콜백들은 그렇지 않습니다. Callback 들여다보기 useQuery에는 성공했을 때, 실패했을 때, 그리고 둘과 관계없이 실행되는 onSuccess, onError, onSettled 콜백이 있습니다. onError를 사용하는 예시를 보면, onError 콜백..

기존 React 어플리케이션은 번들된 js를 가져와 DOM을 렌더링하는 CSR(Client Side Rendering) 방식으로 렌더링을 하였습니다. 이러한 방식은 번들된 js 코드를 사용하므로 서버구성을 간단하게 가져갈 수 있었고 초기에 번들된 js를 가져오므로 사용자에게 마치 네이티브 어플리케이션처럼 동작하는 경험을 제공해줄 수 있었습니다. 하지만 CSR은 번들된 js로 어플리케이션의 콘텐츠를 화면에 렌더링(FCP)하고 상호작용 까지 걸리는 시간(TTI)이 증가하는 단점을 가지고 있습니다. 따라서 이와 같은 단점을 해결하고자 상황에 따라 SSR을 선택합니다. SSR은 서버에서 정적 페이지를 렌더링하고 JS파일들도 번들링한 후에 Client Side로 전달해주는데, 이 경우 서버에서는 DOM을 조작할 ..

React 어플리케이션을 만들 때 서버로부터 데이터를 가져오고 사용하는 것을 구현하는 것은 상당히 어려운 일입니다. 따라서 이를 돕기 위해 리액트에서 데이터를 가져오고, 캐싱하며 이를 관리할 수 있는 효과적인 방법을 제공하는 라이브러리들이 생겨났습니다. 이러한 라이브러리들을 데이터 페칭(data-fetching) 라이브러리라고 부르는데 근래 가장 잘 알려진 라이브러리로는 React Query와 SWR이 있습니다. 이 두 라이브러리가 어떤 특징을 가지고 있는지 그리고 어떤 차이점이 있는지 이 글을 통해 소개해보려합니다. React Query React Query는 React앱이 숨쉴 수 있도록(Breeze) 데이터를 가져오고, 캐싱하고 서버의 상태와 동기화(Synchronizing)을 쉽게 합니다. Rea..

리액트를 사용하며 ReactElement와 JSX.Element는 같은 의미로 사용되곤 합니다. 하지만 이 두 개념에는 개발자가 이해해야하는 중요한 차이점이 있습니다. ReactElement ReactElement는 리액트 라이브러리에서 저수준의 UI 컴포넌트를 가리키는데 사용합니다. ReactElement는 컴포넌트의 props , 그리고 자식들(children)을 의미하는 객체입니다. ReactElement는 React.creatElement 메소드를 통해 만들 수 있으며, React.creatElement는 컴포넌트의 타입, props , 그리고 그의 자식들을 인수로 받습니다. JSX.Element 반면에 JSX.Element 는 JSX 문법으로 생성된 element를 의미하는 타입입니다. JSX ..

리액트를 사용해 앱을 개발하다보면 “리액트는 언제 또는 왜 컴포넌트를 렌더링하는지 궁금증을 갖게 됩니다. 렌더링이 언제, 왜 일어나는지 모른다면 리액트 컴포넌트들을 조합하여 사용자가 원하는 UI를 보여주기 어려울 것이고 원하지 않는 렌더링 때문에 사용자에게 좋지 않은 경험을 심어줄 수 있습니다. 따라서 리액트가 언제 컴포넌트를 렌더링 하는지 공부하며 이 글을 적습니다. “렌더링"이란 무엇입니까? 리액트 컴포넌트의 렌더링은 props 와 state 의 조합으로 리액트가 특정 구역의 UI 를 어떻게 보여줄지 설명하는 것을 이야기합니다. 렌더링 프로세스 리액트는 컴포넌트 트리의 Root부터 시작하여 업데이트가 필요한 것으로 보이는 모든 컴포넌트를 찾아 아래쪽으로 순환합니다. 플래그가 지정된(flagged) 컴..

useEffect 완벽 가이드(A Complete Guide to useEffect)를 읽으며 모든 렌더링은 고유의 이펙트를 가진다는 것을 알 수 있었습니다. 그리고 그 이펙트는 React가 기억해놨다가 DOM 업데이트 후에 실행한다는 것을 알게되었습니다. useEffect에 대해 어느정도 이해했다고 생각했지만 useEffect sometimes fires before paint라는 글의 제목을 보고 혼란에 빠졌고 이를 해결하기 위해 위의 글을 공부해보기로 했습니다. useLayoutEffect "Updating state in useLayoutEffect makes every useEffect from the same render run before paint" 두괄식으로 useLayoutEffect ..

서론 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn’t have a dependency array, or one of the dependencies changes on every render. React를 사용하여 App을 만들던 도중 위와 같은 오류를 만나게 되었고, 이를 useCallback Hook API를 사용하여 해결하였습니다. 해결은 했지만 위와같은 Warning이 왜 발생했는지 그리고 어떻게 해결할 수 있는지 이해를 하지 못하여 공부하며 이 글을 적어봅니다. 제가 공부한 흐름에 따라 정리해놓은 부족한 글..

일반적으로 React에서는 부모 컴포넌트와 자식 컴포넌트가 상호작용할 수 있는 수단이 props 밖에 없습니다. 자식을 수정하려면 새로운 props 를 전달하여 자식을 다시 렌더링해야합니다. 하지만 React에서의 상태의 흐름에서 벗어나 직접적으로 자식 컴포넌트의 인스턴스 혹은 DOM 엘리먼트를 수정해야하는 경우도 있습니다. VanillaJS 일반적으로 JS에서 DOM Element를 수정해야하는 경우, 특정 DOM을 지정하기 위해 선택자를 사용합니다. 특정한 DOM요소에 style을 따로 적용하거나 속성 값을 바꾸는등 다양한 작업을 할 수 있습니다. /* 안녕하세요 */ // 예시 const myElement = document.querySelector('#my-id'); myElemen..

{list.map((item, index) => ())} map 함수를 사용하여 DOM Elements들을 만들 경우 key 값이 없으면 Each child in an array or iterator should have a unique "key" prop. 이라는 에러와 만나게 됩니다. {list.map((item, index) => ())} 따라서 우리는 종종 배열의 index 값을 사용하여 key 값을 넣어 에러를 피하곤 합니다. 하지만 이렇게 key 값으로 index 를 넣는 것은 React를 통해 완성된 페이지가 잘못된 데이터를 보여줄 수 있게하는 원인이 됩니다. 왜 index 에 key 값을 넣는 것이 비효율적인 동작을 야기하는지, 그리고 어떻게 해결할 수 있을지 알아봅시다. React 트리 ..

프로젝트의 규모가 커짐에 따라 관리가 어려워진 상태들이 생겨났고 이를 위해 상태 관리 라이브러리를 사용하고자 합니다. 하지만 다양한 라이브러리 중 어떠한 것을 사용해보는 것이 좋을지에 대한 의문이 생겼고 이러한 의문은 내가 "상태(Status)"가 무엇인지, "상태 관리"가 왜 필요한지에 대해 명확히 모르는 것에서 시작된다고 생각합니다. 따라서 상태와 상태 관리가 무엇인지, 그리고 이를 다루기 위한 Redux를 알아보려 합니다. 상태 관리란? 기존 웹페이지를 개발하는 것 뿐만아니라 이제 웹앱이라고 불리는 개발을 더 많이하게 되었습니다. 사용자들은 더 이상 페이지를 오고가는 UX를 원하지 않고 따라서 하나의 페이지를 띄워놓고 그 안에서 데이터를 주고 받으면서 화면을 실시간으로 변경하는 SPA가 웹 개발의 ..