React

유지보수하기 좋은 React 코드를 작성하는 방법에 대한 고찰

React는 사용하기 편한 라이브러리라고 생각한다. 단순한 웹 페이지를 만드는데 있어서 리액트는 배우기 쉽고, 또한 사용하기도 간단한편이라고 느낀다. 하지만, 실제 서비스되는 클라이언트 웹은 수십, 수백개의 상태와 수백, 수천개의 컴포넌트로 이루어지는 거대한 프로젝트일 것이다. 모든 개발자가 새로운 서비스를 구현하지는 않을 것이고, 내가 작성한 코드는 언젠가 다른 이에 의해서 유지 보수되어야 할 것이다. 때문에, 읽기 쉽고 수정하기 쉬운 코드를 작성하는 방법에 대해서 생각해보았고, 이를 기록으로 남기고자 하였다. 🍎 지극히 주관적인 생각으로 쓰인 글이므로, 틀린 내용이 많을 수도 있습니다. 따라서 댓글로 의견을 남겨주시면 감사하겠습니다. 추상화 (abstract) 올바른 표현인지는 모르지만, 추상화라고 ..

react-router-dom의 HashRouter 사용

HashRouter는 BrowserRouter가 있기 이전에 많이 사용되었다. HashRouter를 사용하면, 주소에 #이 붙게 되고 이로인해 SEO에 대응되지 않는다. 또한 HashRouter는 History location을 지원하지 않는다. 위와 같은 이유로 요즘에는 잘 사용되지 않는다. 다만 HashRouter는 BrowserRouter와는 다르게 새로고침을 해도 페이지가 유지된다. 🍞 새로고침 시 BrowserRouter는 경로를 찾지 못하여 에러가 날 수 있다. 🍉 SPA는 index.html 파일 하나로 사이트를 구성하기에 새로고침 시 이 파일에 연결되지 않은 경로가 반영되어 에러가 난다. 따라서 정적 사이트를 만들 때는 HashRouter가 사용될 수 있다. import { BrowserR..

react-router-dom v6 사용하기

v6.4에 들어서 새로운 라우팅 방법이 생겼다. createBrowserRouter라는 새로운 함수를 통해서 라우터를 생성하고, Provider에 연결하는 방식이다. 기존의 BrowserRouter와 Routes/Switch를 이용한 라우팅 방법과는 확연한 차이가 있다. createBrowserRouter의 경우 BrowserRouter를 최상위에 감싸주지 않아도 된다. import React from 'react' import { createBrowserRouter, RouterProvider } from 'react-router-dom' import Com1 from './pages/Com1' import Com2 from './pages/Com2' const router = createBrowser..

자식 컴포넌트에게 Ref 전달하기 - forwardRef

useRef를 통해서 자식 컴포넌트를 통제하고자 한다고 해보자. 리액트에서 버튼을 별도의 컴포넌트로 만들어 관리하는 일은 빈번하다. 예를 들면, 다음과 같다. import { useEffect, useRef } from "react"; function CustomButton({ ref }) { return ( window.alert("Good!")} ref={ref}> This is Custom Button ); } function App() { const testRef = useRef(null); useEffect(() => { console.log(testRef.current); }, []); return ( Test Forward Ref ); } export default App; 그런데, 위의 코..

React에서 lottie 사용하기

lottie는 air bnb에서 제공하는 기술로, gif 이미지보다 용량이 작고 손쉽게 사용할 수 있는 백터 그래픽 애니메이션을 위한 파일 형식이다. 웹 및 모바일에서 사용할 수 있으며 react와 react native에서도 사용할 수 있다. 각각 lottie-web과 lottie-react-native 라이브러리를 사용하여 간단히 이미지를 렌더링할 수 있다. 🍤 React를 사용하며 실제로 lottie를 사용하여 이미지를 렌더링해 보았다. lottie 파일은 lottiefiles.com에서 다운로드 받을 수 있었다. import { useEffect, useRef } from 'react'; import Lottie from 'lottie-web'; import dayNightLottie from '..

리액트 createPortal 사용하기

리액트는 트리구조로 위에서 아래로 작성하게 된다. 하지만 리액트의 portal을 사용하면, 하위 컴포넌트에서 상위 컴포넌트에 element를 넣을 수 있게 된다. 따라서 modal을 구현할 때 많이 사용되는 portal의 사용법에 대해서 알아보기로 하였다. import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import "./index.css"; ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( ); 리액트의 최상위 파일은 다음과 같이 createRoot로 이루어진다. root라는 id를 갖는 element..

reduxjs/toolkit 더 자세히 알아보기 (typescript 적용)

예전에 역시 redux toolkit을 사용해보고 글을 남긴적이 있었다. https://citron031.tistory.com/entry/Redux-Toolkit-rtk-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 Redux Toolkit (rtk) 사용하기 로그인 정보를 전역 상태로 사용하기 위하여 redux를 사용하기로 마음먹었다. 자연스럽게 일단 전역 상태를 저장할 store를 만들기 위해 createStore를 불러왔는데, 다음과 같은 상황에 처했다. 커서 citron031.tistory.com 단순한 사용법에 대해서 작성했었는데, 타입스크립트의 적용이나 dev tool 사용하는 법 등 좀 더 사용하고 알게된 점들에 대해서 추가로 남기기로 하였다. import {configu..

간단하게 Redux Saga 사용하기

redux saga는 redux의 미들웨어로 비동기 액션을 처리하기 위해서 사용하는 라이브러리이다. redux thunk에 비해서 더 많은 기능을 제공하기에 애용되는 라이브러리이다. 다소 설정이 복잡하지만, 반복되는 패턴이 많고 많은 기능을 제공한다. 스토어에 미들웨어 연결하기 ... import {legacy_createStore as createStore, compose, applyMiddleware} from "redux"; import createSagaMiddleware from "@redux-saga/core"; import reducer from "../reducers"; import rootSaga from "../sagas"; const sagaMiddleware = createSagaM..