React를 사용하다보면 높은 확률로 ( 거의 무조건 ) Hooks를 마주하게 될 것이다. 당연하게 본인도 React를 사용하면서 Hooks를 아주 애용하면서 잘 사용하고 있다. 이런 Hooks의 핵심? 장점?이 바로 Custom Hook를 만들어서 사용할 수 있다는 것이다. 이미 사용하고 있는 useState, useEffect ... 등은 Rules of Hooks ( 훅의 규칙 ㅋ )만 지켜주면 문제없이 사용할 수 있습니다. 그렇다면 Custom Hook도 마찬가지로 해당 규칙만 지키면 될까요? 또 어떤 경우에 Custom Hook을 만들면 좋을까요? useInput function useInput () { const [state, setState] = useState(""); const onCha..

React 하면 많은 것이 떠오르겠지만 컴포넌트, 재사용성 등의 키워드가 가장 먼저 떠오른다. 리액트에서는 props를 통해서 컴포넌트에 새로운 엘리먼트나 컴포넌트를 추가하는 것이 가능하다. 이것을 컴포넌트 합성이라고 부른다. 그러면 내부의 디자인이 다른 UI에서도 쉽게 재사용할 수 있는 컴포넌트를 만들 수 있다. 다음과 같은 디자인이 있다고 생각해보자 노란색 박스 영역이 조금 형식이 다른데, 위에는 보라색 버튼과, 녹색 내용이 있으며, 아래는 버튼은 없고, 갈색 내용이 있다. 이것을 위해서 모든 내용을 매개변수로 받기에는 노란색 박스가 관리해야할 매개변수가 너무 많아진다. ( 위 레이아웃까지야 괜찮다고 하더라도 더 큰 형식이면?! ) 이걸 이제 React로 한번 만들어보자 interface Props ..

지금까지 리액트 환경을 구성하는 부분은 많이 작성했기 때문에 리액트 환경 구성을 모두 다 했다는 조건으로 글을 작성합니다. Canvas 만들기 //GlobalStyle.tsx import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` body { margin: 0; } `; export default GlobalStyle; 우선 거슬리는 body의 margin을 styled-components의 createGlobalStyle을 사용해서 없애준다. import GlobalStyle from './GlobalStyle'; import Home from './pages/Home'; interface ..

React를 사용하다보면 자연스럽게 마주하는 부분이 상태 관리일 것이다. Hooks를 사용하는 useState만으로는 프로젝트의 크기가 커진다면 불편함을 느낄 것이고, 그러면 자연스럽게 전역 상태 관리에 눈이 가게 될 것이다. React는 Redux, MobX, Recoil 과 같은 전역 상태 관리가 있다. 그런데 어느날 React Query 라는 것을 알게 되었는데, 이것도 상태 관리를 도와주는 라이브러리라고 한다. hmm... 솔직히 들어보지 못했다. 이런 것이 있는줄은.... 그래서 한번 찾아보니 일반적으로 상태 관리는 Client의 상태와 Server의 상태가 있다. 그동안의 나는 당연하다듯이 Redux를 사용해서 두가지 상태를 모두 관리하게 되었다. Redux를 사용해서 서버와 통신을 하기 위해..

들어가며. 이 글은 최대한 Redux의 공식 홈페이지를 토대로 Redux를 정리 및 이해하려고 한다. 동기. 자바스크립트 싱글 페이지 애플리케이션이 갖추어할 요건이 점점 더 복잡해지고있는 만큼, 어느 때보다도 많은 상태를 자바스크립트 코드로 관리할 필요가 생겨났습니다 상태에는 서버 응답, 캐시 데이터, 지역적으로 생성해서 사용하고 있지만 아직 서버에 저장되지 않은 데이터를 의미 실제로 프론트엔드를 개발하다보면 생각보다 많은 곳에서 State를 사용해야한다. 예를들어, 작은 모달창을 화면에 나오게 하기 위해서도 isModal 과 같은 상태를 만들어준다. 항상 변하는 상태를 관리하기란 어렵습니다... 상태를 언제, 왜, 어떻게 업데이트할지 제어할 수 없는 지경에 이르고 맙니다. 그렇다. 부모 컴포넌트에서 자..

Flux? Flux는 페이스북에서 클라이언트 사이드 웹 애플리케이션을 만들때 사용한 애플리케이션 아키텍쳐이다. 단방향 데이터 흐름을 활용해서 뷰 컴포넌트를 구성하는 리액트를 보충해주는 역할을 합니다. 구조와 데이터 흐름 Flux에서의 데이터는 앞에서 말한 것처럼 단방향으로 흐른다. view는 사용자의 상호작용에 따라 응답을 위해서 새로운 Action을 만들어서 다시 전파를 하게 된다. 이렇게보면 단방향(?)이라는 부분이 이해가 안될 수 있지만, 결국 Action은 대부분의 상황에서는 View의 사용자 상호작용으로 Action이 발생하게 된다. 모든 Action은 Dispatcher에게 가게 되는데, Dispatcher는 Store에 적용하기 위한 콜백을 실행한 다음 결과를 Store에 전달한다. Stor..

0. 들어가며, Redux에 대해서 몇가지 공부를 했었다. 이번에는 타입스크립트와 함께 사용해볼 계획이다. [React] Redux - 기본편 [React] Redux - toolkit편 [React] Reduxt - toolkit 사용해보기편 기본적인 타입스크립트 세팅은 끝났다고 생각하고, Redux를 사용하는 부분만 작성할 예정이다. 세팅하기 yarn add @reduxjs/toolkit react-redux 리액트에서 리덕스를 사용하기 위해서 필요한 패키지를 먼저 설치한다. @types/react-redux 타입스크립트를 위해서 해당 패키지가 필요하지 않은가 생각할 수 있지만 react-redux 7.2.3버전부터 해당 패키지를 포함하고 있기 때문에 이후 버전은 설치할 필요가 없다. - src --..

react에서 뒤로가기 버튼을 감지하는 작업을 해야할 때가 있다. 과연 어떤 방법을 사용해야 할까? 세팅 본인은 react-router-dom v6 을 사용하고 있다. v6에는 history를 제공해주는 useHistory가 사라져서 따로 패키지를 받아야 한다. yarn add history 작업 시작 // common/history.ts import { createBrowserHistory } from "history"; const history = createBrowserHistory(); export default history; 필요할 때마다 createBrowserHistory를 사용해서 history를 만들어도 되지만 그렇게되면 두번 일을 한다는 느낌이 있어서 따로 만들었다. history는 ..