React

Material UI를 사용하여 Pagination 적용하기

많은 데이터를 보여줘야 할 때, 가독성을 위해서 페이지를 나눠야할 필요가 있을 수 있다. Pagination을 통해서, 더 깔끔하게 사이트를 구성할 수 있다. Pagination 컴포넌트의 구현을 위해서 리액트 컴포넌트 라이브러리인 Material UI (mui)를 사용하였다. 🍙 mui 설치 : npm install @mui/material @emotion/react @emotion/styled 🍯 mui Pagination 사용 : https://mui.com/material-ui/react-pagination/#main-content 🍯 mui에서는 division을 나누기 위해서 Stack를 사용한다. React Pagination component - Material UI The Paginati..

낙관적 업데이트 - Optimistic update (with React)

프론트엔드 개발을 하다보면, 직면하는 문제가 있다. 나의 경우에는 커뮤니티 사이트를 만들고 있었는데, 댓글을 삭제한 뒤 해당 댓글이 삭제된 페이지를 다시 렌더링해야 했다. 이 경우, delete 요청을 보내고 다시 get 요청을 보내 댓글의 목록을 받아와야 할까? 하지만, 이렇게 하니 다시 Get으로 받아온 데이터는 아직 댓글이 삭제가 되지 않은 상태였다. 이 문제에 처음 직면하였을 때, 내가 선택한 방법은 삭제 후 결과를 받은 뒤 일정 시간이 지나고 다시 Get 요청을 보내 갱신된 데이터를 받는 것이었다. 그러나, 이 방법이 과연 좋았을까? 시간이 지나고 다시 해당 문제에 대해 찾아보니 낙관적 업데이트에 대해서 알게되었다. cont MyPage = () => { const [offButton, setO..

간단한 React 커스텀 훅(Custom Hook) 사용법

간단하게 리액트 커스텀 훅을 사용해보기로 하였다. 커스텀 훅은 내가 사용해보고 느끼기에, 커스텀 훅이란 기존의 훅이 사용된 함수를 의미하고, use로 시작하는 이름으로 네이밍한 것이 커스텀 훅인 것 같았다. 🍓 커스텀 훅을 만들어 사용함으로써, 반복되는 코드의 함수가 여러 번 재사용될 수 있다. 그리고 커스텀 훅을 사용하면서 알게된 훅의 사용법으로는, 훅은 조건부로 사용될 수 없고, 렌더링 될 때 조건에 상관없이 실행이 되어야 한다는 점이 있다. 다음으로 내가 만들어 사용해봤던 커스텀 훅의 몇가지 예시를 남긴다. useState를 이용한 input의 데이터를 관리하는 커스텀 훅 import { useState } from "react"; export const useCustomHook = () => { ..

간단하게 react-hook-form과 yup 사용하기

React에서 손쉽게 Form을 작성하고 유효성 검사를 하기 위해서 두 라이브러리를 사용해보았다. npm i react-hook-form npm i yup npm i @hookform/resolvers import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import * as yup from "yup"; function Form() { // yup으로 유효성 검사 const schema = yup.object({ firstName: yup.string().required("이름을 입력해 주세요."), lastName: yup.string().required("성을 입력해 주세요."),..

ContextAPI 사용하기

리액트의 코어 라이브러리로 ContextAPI는 redux, recoil, mobX와 같은 라이브러리와는 다르게 설치 없이 사용할 수 있다. 최상위 컴포넌트부터 최하위 컴포넌트까지 모두 동일한 상태를 만들고 사용하기 위해서 ContextAPI와 같은 전역 상태 관리 도구를 이용할 수 있다. // store.js import React, { useState } from "react"; export const MyContext = React.createContext(); const StateStore = (props) => { const [color, setColor] = useState("black"); const [direction, setDirection] = useState("row"); return..

axios의 interceptors 기능 사용하기

🍎 Axios나 ky, got과 같은 Promise 기반 HTTP 라이브러리에서는 interceptors 기능을 제공한다. 🍏 interceptors를 설정하여 매번 API가 처리되기 전에, 요청이나 응답을 가로채 그 사이에 함수를 실행시킬 수 있다. 예를 들면, 요청 전에 인증 토큰을 가져와 설정해두면, 매번 요청할 때 마다 인증 설정을 해야하는 번거로움을 줄일 수 있다. axios.interceptors.response.use( response => response, // 성공 error => { const { config, // 기존의 요청 response: {status}, } = error; console.log("status", status); return Promise.reject(error..

useEffect의 Clean-up 함수

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. clean-up 함수를 사용하게 되면 렌더링이 될 때, 이전에 남은 함수가 실행되어 메모리 누수가 일어나는 일을 막을 수 있다. useEffect를 사용하여 컴포넌트에서 side effect를 수행하는데, 이때 렌더링이 발생시 메모리 누수가 일어날 수 있다. 🍠 데이터 가져오기, 구독 설정, 수동으로 ..

코드 깔끔하게 작성하기 (리액트, Styled-Components)

자신이 짠 코드라도, 시간이 지난 뒤에 보면 이게 무슨 코드지? 하는 생각이 들 때가 있다. 하물며, 다른 사람이 내 코드를 보는 것은 어떨까? 그렇기에, 최대한 깔끔한 코드와 프로젝트를 위해서 내가 알아낸 방법을 남기고자 한다. Styled-Components 분리하기 (S-dot) Styled-Components의 이름을 짓는 방법에 대해서 고민하던 와중, 외국의 블로그들과 다른 사람들의 코드를 보고 찾은 방법이다. 기본적으로 다음과 같이 Styled-Components를 작성한다. import styled from 'styled-components'; const S = {}; S.Home = styled.div` text-align: center; font-size: 1.3rem; ` S.P = s..