Front-end/React
-
[React] Context API + useReducer 조합 살펴보기 feat. TypescriptFront-end/React 2021. 12. 2. 00:55
리액트 개발을 할 때 상태관리 라이브러리를 사용하지 않으면 무수히 많은 props들과 싸우며 개발을 하게 됩니다.. 😨 그러한 문제를 해결하기 위해 많은 라이브러리(Redux, Recoil, Mobx 등)들이 등장했습니다. 그래서 이번 기회에 간단한 Todo를 구현하며 Context API와 useReducer 조합을 통해 번거로운 prop drilling 없이 상태관리를 할 수 있는 방법에 대해 알아보겠습니다. ❗️ 이 글은 개인적으로 학습한 정보와 지식으로 작성된 글입니다. 혹시 잘못된 부분이 있거나 수정사항이 있다면 말씀해주시면 반영하겠습니다. 🙏 Context API 먼저 Context API 의 개념에 대해 알아보겠습니다! 일단, 결론부터 말씀드리면 Context API는 상태관리를 하는 목적이..
-
[React] 리액트로 클립보드 복사 기능 만들어보기 (feat. Custom Hook)Front-end/React 2021. 8. 16. 01:29
클립보드 클립보드는 개발자 뿐만 아니라 일반 웹 사용자들도 아주 잘 알고있는 용어일겁니다! 😲 특정 문구를 복사하고 싶은 욕구가 있을 때, 복사할 컨텐츠를 드래그 후 Ctrl + C 하는 방법도 있지만 그걸 더 편리하게 하기 위해 개발자들은 클립보드 복사 라는 버튼형태를 만들어 조금 더 유저에게 사용성이 높은 서비스를 제공하고 있습니다. 현재까지도 자주 사용되고 있고 실제로 많은 서비스에 적용이 되어있죠 예전부터 클립보드에 관련된 기능을 개발할 땐 document 객체에 있는 execCommand() 라는 함수를 통해 개발하였습니다. 하지만 현재는.. 보시는 바와 같이 Deprecated되어 현재 개발하는 기능에는 당연히 사용하지 말아야할 뿐더러 이전에 개발했던 기능들도 새롭게 대응을 해주어야 합니다. ..
-
[React] CRA Typescript 환경에서 Module Alias 설정하기Front-end/React 2021. 1. 26. 02:06
Module Alias React 개발을 하면서 정말 많은 모듈들, 컴포넌트들을 import, export하게 됩니다. 규모가 작은 프로젝트면 크게 번거롭지 않지만, 규모가 크거나 지속적으로 늘어나는 모듈과 컴포넌트들 때문에 정말 헷갈리고 관리하기 번거롭습니다. 그래서 특정 디렉토리의 별칭을 정해주어서 해당 디렉토리에 바로 접근할 수 있도록 해주는 방법을 통해 이 문제를 해결하기도 합니다. CRA의 말썽 위에 설명을 보고 당장 구글링을 하고 CRA로 TS환경의 프로젝트를 생성하고 세팅을 하다보면 큰 충격에 빠지게 됩니다. 바로 npm을 실행시키는 순간 기껏 세팅해놓은 tsconfig.json이 처음의 설정으로 리셋 되버립니다. 저는 처음에 제 눈을 의심했습니다. 그래서 다시 한 번 설정을 하고 npm을 ..
-
[React] Context로 언제 어디서든 상태 관리 해보기Front-end/React 2021. 1. 1. 21:35
상태 관리 React의 영원한 과제 상태 관리.. 이 상태관리를 위해 정말 많은 라이브러리가 탄생했습니다. 대표적으로 가장 많이 사용하는 Redux도 있고, Mobx, Recoil 등이 있습니다. 컴포넌트는 생성 될 때부터 끝날 때까지 가지고 있는 상태를 책임지게 되는데요, 즉 이말은 컴포넌트 내에서 생성된 상태는 외부에서 침범할 수 없다는 것을 의미합니다. 그렇다면 어떻게 해야 이 상태를 외부에서도 사용 및 관리를 할 수 있을까요? 첫 번째로는 상위 컴포넌트에서 상태를 관리하여 props로 내려주는 방법이 있습니다. 상위 컴포넌트에서 상태를 만들고 필요한 컴포넌트까지 prop으로 넘겨주는 것은 마치 축구 경기시 공격수가 공을 필요로 할 때 골키퍼 -> 수비수 -> 미드필더 -> 공격수까지 순서를 거치며..
-
[React] styled-components로 스타일 적용해보기Front-end/React 2020. 11. 30. 12:52
styled-components styled-component는 CSS in JS의 개념을 가지고 있는데요, 말 그대로 JS 안에 CSS를 넣는다는 의미입니다. 예전부터 웹에 스타일을 적용하기 위해서 일반적으로 전역에 CSS 파일을 두어 하나의 파일에서 관리하는 방식을 지속적으로 사용되어 왔고, 현재까지도 이용되고 있습니다. 하지만 이 방식의 경우 CSS 파일이 전역에 존재하기 때문에 클래스 명이 의도치 않게 겹치게 되거나, 같아야 하는 경우를 관리 하는 것이 쉽지 않았습니다. 그래서 최근에는 모듈화를 통해 각 컴포넌트 별로 묶어 Scope를 관리하는 방식도 존재합니다. styled-component는 이런 고민을 해결함과 동시에 편리함을 제공하게 되는데요, 말 그대로 스타일을 컴포넌트처럼 관리하고 사용..
-
[React] React로 범용적인 재사용 컴포넌트 만들어보기Front-end/React 2020. 11. 30. 12:52
컴포넌트 컴포넌트란 독립적인 단위모듈인데요, 이는 말 그대로 독립적으로 사용(수행)할 수 있다는 것을 말합니다. 그런데 뭔가 독립적이란 것이 조금 추상적이라고 느껴지시지 않나요? 그만큼 컴포넌트를 나누는 일은 이 독립이라는 단어를 어떻게 해석하느냐에 따라서 방법이 바뀌게 됩니다. 리액트와 같은 SPA 라이브러리 혹은 프레임워크를 사용하다보면 컴포넌트들을 만들게 되는데요 이렇게 만든 컴포넌트들은 특정 화면에서 사용이 될 것입니다. 이 컴포넌트들은 규모가 작은 애플리케이션에서는 적을 수 있지만 규모가 커질수록 컴포넌트의 갯수와 크기도 비례하여 커지게 될 것입니다. 이에 따라 프론트 개발자는 아마 이런 고민들을 하게 될겁니다... "음.. 어떻게 하면 컴포넌트를 재사용 할 수 있게 개발 할 수 있을까...?"..
-
Webpack으로 React 개발 환경 세팅해보기Front-end/React 2020. 11. 30. 12:51
리액트 프로젝트 리액트 프로젝트를 생성하는 방법에는 몇가지가 있는데요 대표적으로 CRA(Create React App)이 있습니다. CRA를 통해 프로젝트를 생성하게 되면 개발자가 특별한 세팅을 하지 않아도 아주 쉽고 편리하게 사용할 수 있습니다. CRA로 생성된 프로젝트는 웹팩 뿐만 아니라 엄청나게 많은 기본 세팅이 되어있는데요, 처음 프로젝트를 생성하면 등장하는 README.md를 보게되면 eject라는 명령어가 있다는 것을 알 수 있습니다. 이는 리액트 내부에 숨겨져 있는 설정 파일들을 꺼내서 볼 수 있게 해주는데요 실행을 해보면 아래와 같은 디렉토리가 추가가 되고 엄청나게 많은 양의 설정 파일들이 있습니다. 이만큼 하나의 프로젝트를 세팅하기 위해 엄청나게 많은 코드와 모듈이 필요한 것을 알 수 있..
-
[React] 라이프 사이클(Life-Cycle) 알아보기Front-end/React 2020. 11. 30. 02:39
라이프 사이클 리액트에서 라이프 사이클은 총 3가지로 나뉘어집니다. Mount: 컴포넌트 실행 후 DOM이 생성되고 웹 브라우저에 나타나는 것 Update: 컴포넌트를 업데이트 할 때 Unmount: 컴포넌트를 DOM에서 제거할 때 리액트가 최근 v17로 업데이트가 되면서 기존에 존재했던 몇가지 메소드가 아예 없어졌기도 합니다.(componentWillMount, componentWillUpdate, componentWillReceiveProps) 단계별로 하나씩 살펴보겠습니다. Mount DOM이 생성된 후 웹 브라우저에 최종적으로 나타나는 것을 Mount라고 합니다. 이 때 호출되는 메소드는 아래 순서대로 작동합니다. 컴포넌트 생성 constuctor: 컴포넌트 생성시 호출되는 생성자 getDeriv..