컴포넌트

이번 포스팅에서는 React의 내재된 상태관리 API인 Context에 대한 사용 방법을 알아보려고 한다. 리액트에서 데이터는 일반적으로 props, state로 관리하며 부모 컴포넌트에서 자식 컴포넌트로 흐르게 된다. 이 부분에 대해서는 이번 글에서는 길게 설명하지는 않겠다. 예를 들어 E 컴포넌트에서 state를 만들고 그걸 prop drilling 방식으로 G에 내려 주어서 사용하는 식이다. 그런데 때에 따라서는 정말 많은 컴포넌트에서 데이터를 써야 할 일이 있을 수도 있다. 위의 그림처럼 많은 컴포넌트에서 데이터를 사용해야 한다면, 사실상 전역으로 사용한다고 보아도 무방하다. 이 경우는 Root Component에서 state를 만들고 각각 자식 컴포넌트로 props 를 내려주는 식으로 사용을 해..

화 : [Javascript] 비동기, Promise, async, await 확실하게 이해하기 [Javascript] 비동기, Promise, async, await 확실하게 이해하기 – Under The Pencil 개요 본 글은 자바스크립트에서 Promise 에 대한 개념을 잡기 위해 작성한 글입니다. 자바스크립트의 기본 문법을 먼저 알아야 이 글을 조금 더 수월하게 보실 수 있습니다. 필자는 Node.js 기반에서 elvanov.com 수 : Apollo Client는 Redux와 무엇이 다른가 목 : 리액트의 Hooks 완벽 정복하기 리액트의 Hooks 완벽 정복하기 React Hooks 는 v16.8 에 도입된 개념으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고..

회사에서 업무를 하면서 공부해야 하는 것들이 계속해서 생겨난다. 그러한 주제들을 중심으로 글을 읽었다. 월 : 변경에 유연한 컴포넌트 변경에 유연한 컴포넌트 이번 포스트에서는 변경에 유연하게 대응할 수 있는 컴포넌트에 대해 이야기해보려고 한다 TL;DR 컴포넌트는 데이터를 중심으로 추상화한다. 일반적인 인터페이스로 컴포넌트를 디자인한다. 변 jbee.io 화 : node_modules로부터 우리를 구원해 줄 Yarn Berry node_modules로부터 우리를 구원해 줄 Yarn Berry 토스 프론트엔드 레포지토리 대부분에서 사용하고 있는 패키지 매니저 Yarn Berry. 채택하게 된 배경과 사용하면서 좋았던 점을 공유합니다. toss.tech 수 : MVVM 패턴 MVVM 패턴 나의 첫 디자인 패..

이번 포스팅에서는 리액트에서 코드 스플리팅이 무엇이고 어떻게 하는지에 대한 방법을 간단하게 설명해 보려고 한다. 우리가 리액트 프로젝트를 완성한 후 서비스를 사용자에게 전달하기 위해서는 빌드를 통해서 배포해야 한다. 이 과정에서 파일 크기를 가능하면 최소화 하는 것이 바람직한데, 그 이유는 이 파일 크기가 성능을 결정하고 결과적으로 사용자 경험에까지 영향을 미치기 때문이다. 또한 브라우저에서 JSX나 최신 자바스크립트 문법 등이 문제없이 잘 실행될 수 있도록 트랜스파일링 하는 작업도 해 주어야 한다. 일반적으로 이러한 작업은 웹팩(webpack)에서 담당하며, 웹팩을 따로 설정해 주지 않으면 프로젝트의 모든 자바스크립트 파일은 하나의 파일로 합쳐지고, CSS 역시 하나의 파일로 합쳐지게 된다. 하나의 파..

이번 포스팅에서는 React Hook에 대해서 개념을 정리해 보려고 한다. 리액트 훅은 v16.8에 새로 도입되었으며 함수형 컴포넌트에서 기존에 라이프사이클 메서드가 없어서 사용할 수 없었던 기능들을 사용할 수 있게 만들어 주었다. 리액트 훅을 도입하게 된 목적은 여러가지가 있다. 먼저 컴포넌트에서 상태관련 로직을 사용할 때 레이어 변화 없이 재사용할 수 있게하기 위함이 첫번째 목적이다. 기존에는 여러가지 레이어로 둘러 쌓여있어서 구조가 복잡했기 때문이다. 두 번째 목적은 기존의 라이프사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다는 이점 때문이다. 그 외에도 클래스 기반 컴포넌트를 지양하고자 하는 목적 등도 있다. 그러면 지금부터 자주 사용하는 리액트..

모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 컴포넌트의 라이프 사이클은 페이지 렌더링 전 준비과정에서 시작하여 페이지가 사라질 때 끝이 나게 된다. 리액트 프로젝트에서 컴포넌트를 처음 렌더링할 때 어떤 작업을 처리해야 하는지, 또는 컴포넌트를 업데이트 하기 전후로 어떤 작업을 처리해야 하는지를 알아야 불필요한 업데이트를 방지할 수가 있다. 리액트의 클래스 컴포넌트는 컴포넌트 라이프사이클 메서드가 있어서 이를 사용하고, 함수형 컴포넌트는 Hook을 사용한다. 이번 포스팅에서는 컴포넌트 라이프사이클에 대해서 다뤄보도록 한다. 라이프사이클 메서드의 종류는 총 9가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 하기 전에 실행이 되며, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행이 된..

리액트를 사용하여 프론트 개발을 할 때 두 가지 방법으로 컴포넌트를 선언할 수가 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다. 두 가지 방법에 대해 모두 다 잘 알고 있으며, 필요한 상황에 맞게 사용하는 것이 중요하므로 각각의 방법에 대해서 좀 더 깊이있게 살펴보도록 한다. 먼저 컴포넌트의 기능을 한 번 짚어보고 가도록 하자. 컴포넌트는 단순한 템플릿 이상의 기능을 수행한다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들..