리액트에서 외부 시스템과 동기화할 때 useEffect라는 훅을 사용합니다. 리액트에서 Effect란 컴포넌트의 렌더링 자체로 발생하는 부작용을 표현하기 위함입니다. 따라서 컴포넌트의 렌더링 이후 화면이 업데이트 된 후에 발생합니다.(After commit phase) 이런 특성을 사용한다면 리액트 외부에 있는 스토어와 동기화하는데 사용할 수 있습니다. Redux와 비슷한 방식으로 스토어를 만들어서 useEffect를 사용해 외부 시스템과 동기화해보도록 하겠습니다. 아래 예제에서는 Store의 count 변수를 setInterval를 사용하여 1초마다 1씩 증가하도록 dispatch하고 이를 구독하는 Counter 컴포넌트를 만들어봅니다.(Full Code) Redux는 Flux 패턴을 따르므로 View 또는 외부로부터 들어온 Action을 Dispatch 할 수 있도록 하였고 Store를 객체 형태로 정의했습니다. 그리고 이 Store를 컴포넌트에서 사용할 수 있도록 useSt…

이 글에서는 UI의 구성을 통해서 Prop Drilling Layer를 얇게 구성하는 방법을 알아봅니다. 메인 컨셉은 children prop을 사용해서 하위 컴포넌트를 상위 컴포넌트에 직접 노출시켜 props를 전달하기만 하는 컴포넌트를 최소화하는 것입니다. 하나의 페이지를 구성하는 App 컴포넌트를 위와 같은 형태로 추상화 시켰습니다. Header, Sidebar, Main, Footer로 섹션을 구분하였고 각각은 하위 컴포넌트들을 가지게 됩니다. 이때 Main 컴포넌트에서 data라는 prop을 필요로해서 data를 prop으로 내려주었습니다. Main 컴포넌트에서는 data를 prop으로 받아서 데이터를 사용하는 Card라는 컴포넌트에게 전달합니다. 결국 Main 컴포넌트는 레이아웃을 잡기위한 역할 뿐만 아니라 데이터를 전달하는용으로도 사용되고 있습니다. 이런 데이터 전달용 컴포넌트를 사용하지 않고 하위 컴포넌트에서 상위 컴포넌트의 데이터에 직접 접근하는 벙법에는 리액트에…

이 글에서는 리액트의 렌더링을 렌더 단계와 커밋 단계로 구분하여 전체적인 렌더링 프로세스에 대해 이해해봅니다. Rendering in React 렌더링이란 리액트가 컴포넌트에게 현재의 props와 state를 기반으로 UI가 어떻게 생겼으면 좋겠는지 설명하도록 요청하는 프로세스입니다. 함수 컴포넌트에서 렌더링은 함수의 실행(execution)입니다. 함수가 실행되어 JSX를 반환하고 JSX는 리액트 엘리먼트들로 변환됩니다. React Element (1)과 (2)는 동일한 것이고 결국 컴포넌트에서 반환하는 것은 리액트 엘리먼트입니다. 이 리액트 엘리먼트를 를 통해 확인해보면 다음과 같습니다. 여기서 주목할 점은 React.createElement를 호출하는 것은 UI의 구조를 설명할 수 있는 자바스크립트 객체를 만든다는 것입니다. 이 메모리상에 존재하는 객체를 우리는 virtual DOM이라고 부릅니다. Virtual DOM Virtual DOM이라는 컨셉은 UI를 자바스크립트…

React에서 함수나 값을 최적화하기 위해 useMemo, useCallback을 활용해보신 경험이 있으실 것입니다. 이 글에서는 useMemo와 useCallback이 React에 존재하는 이유와 이를 사용해야하는 상황에 대하여 알아보고 대다수의 경우에 useMemo와 useCallback을 제거할 수 있는 이유에 대해 설명해보려고 합니다. useCallback 모든 값이나 함수에 useMemo와 useCallback을 사용하는것이 성능을 높여줄 수 있을까요? 성능은 수치에 기반해야합니다. 예제를 통해 직접 확인해봅시다. Full Code 저는 Toggle이라는 컴포넌트를 만들었고 버튼을 클릭할 때마다 함수를 호출해서 컴포넌트를 리렌더링 시키면서 렌더링 시간을 측정하였습니다. (6명의 사람, 6번의 버튼 클릭) 먼저 useCallback으로 hide 함수를 감싸지 않고 테스트를 진행했습니다. 측정에는 React Dev tools의 Profiler 탭을 사용해 렌더링시간을 측정…