IT 엘도라도

이번 포스팅에서는 React 웹 애플리케이션을 개발할 때 클라이언트 사이드 라우팅을 위해 많이 사용하는 패키지들의 동작 원리에 대해 간단히 한 번 알아볼 것이다. 대표적으로 가장 많이 사용하는 패키지는 react-router-dom이며, 이는 react-router 패키지에 의존하는 패키지로서 브라우저에서 클라이언트 사이드 라우팅을 수행할 수 있도록 해준다. 한편, 라우팅과 관련된 정보들을 Redux의 스토어에 저장하는 방식을 필요로 하는 경우 connected-react-router 패키지를 사용하기도 한다. 따라서 필자는 이 세 패키지의 핵심 요소들에 대해 그 동작 원리를 간단히 살펴보기로 했다. 동작 원리는 직접 해당 패키지의 JavaScript 코드를 뜯어보며 파악하였다. 혹시 잘못된 부분이 있다..

이번 포스팅은 React 애플리케이션 개발의 핵심 중 하나인 Babel과 Webpack에 대해 다뤄볼 것이다. 다만 엄청 자세히는 다루지 않고, React 애플리케이션을 개발하는 사람이라면 알아야 하는 상식 선의 개념 및 동작 원리에 대해서만 다룰 것이다. 실제로 Create React App을 통해 React 애플리케이션을 개발하고 있는 사람은 Babel과 Webpack이 어떻게 설정되어 있는지 확인해보지 못한 경우도 있을 것이다. 그것은 Create React App이 Babel 및 Webpack의 설치와 각종 설정을 내부적으로 이미 다 해주고 이를 숨겨두었기 때문이다(물론 확인하는 방법이 있긴 하다). 그래서 막연하게 개발만 하던 사람은 내부적으로 Babel 및 Webpack이 어떻게 돌아가는지 자..

Building Your Own Hooks – React A JavaScript library for building user interfaces reactjs.org * React 공식 문서를 꼼꼼히 읽으면서 개인적으로 요약한 내용입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. 개요 - 커스텀 Hook이 필요한 경우 기존의 React에서는 컴포넌트 내에 존재하는 상태 관련 로직을 다른 컴포넌트에서도 재사용하려면 고차 컴포넌트나 Render Props와 같은 패턴을 사용해야 했다. 그러나 이러한 패턴들은 컴포넌트 트리에 부가적인 컴포넌트를 추가시킴으로써 래퍼 지옥(Wrapper Hell)과 같은 현상을 유발했다. React 16.8.0부터 도입된 Hook을 이용하면 이러한 문제없이 컴포넌트의 상태..

Rules of Hooks – React A JavaScript library for building user interfaces reactjs.org * React 공식 문서를 꼼꼼히 읽으면서 개인적으로 요약한 내용입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. 컴포넌트의 최상위(Top Level)에서만 Hook을 호출해야 한다. 반복문, 조건문, 혹은 중첩된 함수 내에서 Hook을 호출하면 안 된다. 대신 React 함수형 컴포넌트의 최상위에서만 호출해야 한다. 이 규칙을 따르면 해당 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 여러 개의 Hook이 호출되는 것을 보장할 수 있다. 이는 React가 여러 개의 Hook이 호출되는 경우에도 각 Hook의 상태를 렌더링 간에 제대로 유지할 수 ..

Using the Effect Hook – React A JavaScript library for building user interfaces reactjs.org * React 공식 문서를 꼼꼼히 읽으면서 개인적으로 요약한 내용입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. 사이드 이펙트와 useEffect() 함수 클래스형 컴포넌트에서는 데이터를 가져오거나, 어떠한 이벤트를 구독하거나, DOM을 직접 조작하는 등의 작업이 가능하다. 이러한 작업들은 자기 자신뿐 아니라 외부에도 영향을 준다는 의미에서 사이드 이펙트(Side Effect) 또는 간단히 이펙트(Effect)라고 부른다. 이때 useEffect() 함수를 사용하면 함수형 컴포넌트에서도 이러한 이펙트를 수행할 수 있도록 해준다. 그리고..

Using the State Hook – React A JavaScript library for building user interfaces reactjs.org * React 공식 문서를 꼼꼼히 읽으면서 개인적으로 요약한 내용입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. 클래스형 컴포넌트와의 비교 다음은 버튼을 클릭할 때마다 화면에 표시되는 숫자가 1씩 증가하는 카운터를 렌더링 하는 예시이다. 첫 번째 코드는 클래스형 컴포넌트로 구현한 것, 두 번째 코드는 함수형 컴포넌트와 Hook으로 구현한 것이다. 이 둘을 비교하면서 이 포스팅의 설명을 이해해보도록 하자. ▼ 클래스형 컴포넌트 class Example extends React.Component { constructor(props) { su..

Hooks at a Glance – React A JavaScript library for building user interfaces reactjs.org * React 공식 문서를 꼼꼼히 읽으면서 개인적으로 요약한 내용입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. State Hook : useState() State Hook은 함수형 컴포넌트가 클래스형 컴포넌트처럼 지역 상태를 가질 수 있도록 한다. 자세한 설명은 'State Hook 사용하기' 포스팅을 참조하자. 다음은 버튼을 클릭할 때마다 화면에 표시되는 숫자가 1씩 증가하는 카운터를 렌더링 하는 예시이다. import React, { useState } from 'react'; function Example() { // Declare ..

Introducing Hooks – React A JavaScript library for building user interfaces reactjs.org * React 공식 문서를 꼼꼼히 읽으면서 개인적으로 요약한 내용입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. Hook 개요 Hook은 함수형 컴포넌트로도 클래스형 컴포넌트의 기능들(상태, 생명주기 메소드 등)을 사용할 수 있도록 하는 새로운 개념으로, React 16.8.0부터 도입이 되었다. 참고로 Hook을 사용하려면 React뿐만 아니라 React DOM을 포함한 모든 패키지도 함께 업데이트해줘야 한다. 이 문서에서는 React가 왜 Hook이라는 것을 새롭게 도입하였는지, 그리고 이것이 애플리케이션의 개발에 어떠한 도움을 주는지에 ..

* React 공식 문서의 '고급 안내서' 부분을 읽으면서 개인적으로 요약한 내용들입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. 코드 분할 (Code-Splitting) 코드 분할 – React A JavaScript library for building user interfaces ko.reactjs.org 대부분의 React 앱들은 여러 정적 파일들을 Webpack, Rollup, Browserify 등의 번들러로 번들링 한 파일들을 웹 페이지에 포함하여 한 번에 앱 전체를 로드할 수 있다. 이러한 종류의 앱을 SPA(Single Page Application)라고 부른다. Create React App, Next.js, Gatsby 등의 툴을 사용한다면 자동으로 Webpack이 설치되고 적..

* React를 공부하면서 생긴 궁금증들과 이에 대한 해답을 개인적으로 정리한 것입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. 태그로 Babel 라이브러리를 로드하는 경우 Babel은 어떠한 원리로 동작하는가? 태그로 Babel 라이브러리를 로드한다. 태그를 만들고 그 안에 ES6(+ JSX) 문법의 코드를 작성한다. 브라우저는 태그 안에 작성된 코드를 ES6(+ JSX) 문법으로 간주한다. 그 코드들은 로드된 Babel 라이브러리에 의해 모든 브라우저에서 호환이 가능한 문법의 코드로 컴파일된다. 따라서 이러한 런타임 변환은 서버에서 미리 컴파일된 코드를 제공하는 것보다 더 느릴 수밖에 없다. 2. key prop은 엘리먼트 배열을 사용할 때만 의미가 있는가? React 공식 문서에 따르면, 프..