리액트에서 외부 시스템과 동기화할 때 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 탭을 사용해 렌더링시간을 측정…

웹 프론트엔드에서 핵심적으로 논의되는 주제인 상태는 무엇이며 왜 관리해야하는 대상인지 그리고 관리하는 방법에는 어떤 것들이 있는지 알아봅니다. 프로그래밍에서 상태란? 프로그래밍에서 상태에 대해 이야기해보기 전에 저의 현재 상태에 대해 이야기해보겠습니다. 현재 저의 상태는 앉아 있다는 것이고 커피의 상태는 뜨거운 상태입니다. 몇시간이 지났습니다. 이제 제 상태는 운동 중인 상태이고 책상에 있던 커피는 차가워진 상태입니다. 이것이 현실 세계에서의 상태입니다. 현실 세계에서의 상태와 비슷하게 프로그래밍에서의 상태는 데이터로 표현합니다. 컴퓨터 프로그램에서 상태란 시간이 지남에 따라서 변할 수 있는 데이터입니다. 간단한 카운터 프로그램을 만들어서 시간이 지남에 따라 카운터 변수의 변화를 지켜보도록 하겠습니다. 아래 코드를 브라우저 콘솔 창에 입력한 후에 실행해보세요. 이 프로그램에서 counter는 상태라고 할 수 있습니다. 처음에 counter 변수는 0이라는 상태를 가지고 있다가…

이 글에서는 setState의 비동기적 동작에 대한 이유를 찾아봅니다. setState의 동작 먼저 setState가 어떻게 동작하는지 알아보도록 하겠습니다. 버튼을 누르면 함수가 실행되고 차례대로 , 가 실행됩니다. 만약 이 동기적으로 실행되었다면 가 출력하는 것은 1이여야 합니다. 하지만 결과는 0이 출력됩니다. 이는 가 비동기적으로 실행되었다는 것을 의미합니다. 왜 를 비동기적으로 설계했을까요? Why is setState asynchronous? 이슈 번역 검색을 통해 Why is setState asynchronous?(2017년 11월 11일)라는 이슈를 찾을 수 있었습니다. 먼저 이슈를 남긴분의 글을 요약 및 번역해보겠습니다. 저는 setState가 비동기인 이유를 이해하려고 노력했지만 해답을 찾지 못했고 아마도 그것이 리액트 코드에 대한 역사적인 이유(아키텍처적인 문제)이고 아마도 지금은 바꾸기 어려울 것이라는 결론에 도달했습니다. 하지만 Dan은 분명한 이유가 있…

이 글에서는 Flux 아키텍처가 무엇인지 알아봅니다. Facebook에서 작성한 Flux 공식 문서에 따르면 Flux는 다음과 같습니다. Application architecture for building user interfaces. 애플리케이션 아키텍처인 Flux를 이해하기 위해 Flux 아키텍처의 시작점으로 돌아가보려고 합니다. MVC의 문제점 Flux는 기존 MVC 모델의 복잡도에서부터 시작되었습니다. MVC > Model, View, Controller라는 영역으로 애플리케이션을 나누고 소프트웨어의 비즈니스 로직(Model)과 화면(View)을 구분하는데 중점을 두고 있는 패턴 이런 MVC 패턴은 간단하고 작은 애플리케이션을 만드는데에는 문제가 없었습니다. 애플리케이션의 규모가 커질수록 Model과 View는 많아집니다. Model이 업데이트되어서 View가 새로 그려질 수도 있고 View에 사용자와 상호작용이 발생하여 Model이 업데이트될 수도 있습니다. 이러한 …

안녕하세요 이현진입니다. 라는 주제로 발표를 진행하겠습니다. React로 생각한다는 표현이 조금 추상적일 수 있는데, 이 발표에는 React를 다룰 때 갖고 있어야하는 생각들을 담았습니다. 먼저 에 대한 이야기부터 시작해보겠습니다. 은 의 약자로, 브라우저가 을 파싱하여 객체 형태로 만든 것을 말합니다. 위와 같은 구조를 갖는 웹사이트가 있다고 가정해보겠습니다. 은 문자열입니다.문자열은 다루기 어렵습니다.(파싱, 합치기등의 작업) 브라우저는 이 다루기 어려운 문자열을 훨씬 다루기 쉬운 객체 형태로 바꿔주고, 이 객체를 이라 합니다. 개발자는 JavaScript를 이용해 을 조작하여 웹 애플리케이션을 개발합니다. DOM이 갖는 문제점 하지만 JavaScript로 직접 을 조작하는 것은 여러가지 단점이 따라옵니다. JavaScript로 을 조작할 때 HTML의 구조를 파악하기 어렵습니다.(을 직접 생성, 수정 삭제할 때 구조를 파악하기 어렵습니다.) 표준을 따르는 브라우저도 많…

Intro 소프트웨어 마에스트로 컨퍼런스 발표(8.31) 내용을 요약한 글 입니다. 안녕하세요. 소프트웨어 마에스트로 연수생 이현진입니다. 이번 발표에서는 GraphQL의 컨셉, REST API와의 차이, 실제 활용 실습과 더 나아가 React에서 GraphQL이 해결할 수 있는 문제에 대해서 이야기해보도록 하겠습니다. 페이스북이 그래프QL을 만들기로한 이유는 다음과 같습니다. 모바일 사용량의 증가로 효율적인 데이터 로딩이 필요(저전력 장치 및 느린 네트워크 문제) 다양한 플랫폼(플랫폼의 다양화로 인해 모든 요구 사항에 맞는 하나의 API를 구축하고 유지관리하기 어려움) 빠른 기능 개발에 대한 기대(지속적 배포는 업계의 표준이 되었고 빠른 반복과 빈번한 제품 배포는 필수적이고 이에따라, ) 이런 문제들을 해결하기위한 방법은 뭘까요? 각각 대응시켜보겠습니다. 만 , 요청한다. 엔드포인트를 한다. 프론트엔드와 백엔드의 개발에 집중한다. 이 해결 방법이 곧 입니다. 이제 Gra…

안녕하세요 소프트웨어 마에스트로 연수생 프론트엔드 개발자 이현진 입니다. 웹 페이지를 그리는 다양한 렌더링 방식 즉 Rendering Pattern들에 대해 이야기 해보겠습니다. 렌더링은 브라우저 화면에 웹 페이지를 그리는 것을 말합니다. 먼저 유저가 브라우저를 통해 서버에 요청을 보내고, 서버는 이에 응답으로 HTML, CSS, JavaScript를 보내줍니다. 브라우저는 이를 해석하여 웹 페이지를 그립니다. (렌더링을 수행하는 브라우저의 프로세스를 렌더러 프로세스라고 합니다.) 브라우저가 화면에 HTML, CSS, JavaScript를 그리는 과정(절차)를 (Critical Rendering Path)라고 합니다. 이 과정은 우선 DOM Tree와 CSSOM Tree를 만들고, 이 둘을 결합하여 Render Tree를 만듭니다. 다음에는 Render Tree를 배치하는 Layout과정, 화면에 직접 그리는 Paint 과정을 따릅니다. 위 그림에서 DOM Tree 부터 Ren…

소프트웨어 마에스트로 컨퍼런스 발표 (22.05.10) 소프트웨어 마에스트로 세미나(야간자율학습 팀) 발표 (22.07.03) CNU SW Academy 발표 (22.07.06) 발표 REPO 안녕하세요. 프론트엔드 개발자 이현진입니다. 오늘 이야기할 주제는 ‘웹은 어떻게 발전했는가’입니다. 발표는 우선 웹의 역사를 먼저 살펴보고, 그 후에는 브라우저에 관해서 이야기 해보고, 마지막으로 렌더링 프로세스에 대해서 이야기 해보려고 합니다. 인터넷과 웹은 같을까요? 다를까요? 다릅니다. 인터넷이 도시이면 웹은 그 도시 위에있는 건물 하나입니다. 인터넷이 운영체제라면 웹은 그 위에서 실행되는 프로그램 하나입니다. 인터넷이라는 전체안에 웹이라는 부분이 존재하고 웹과 동급인 여러가지 서비스들이 있고 이 세가지 이외에도 수많은 서비스들이 존재합니다. 이제 웹이야기를 해보겠습니다. 이분은 웹의 아버지라고 불리는 분입니다. (팀 버너스 리) 팀 버너스 리는 1990년 10월에 세계 최…