React Modal 어디까지 만들어봤니?모든 코드는 github에 있습니다.서론나는 개인적으로 모달창을 좋아한다.페이지 이동없이 내가 의도한대로 데이터를 전달받을수 있고 다른 화면을 클릭하면 모달이 꺼지는등 키고 끄는 동작을 간편하게 설정할 수 있기 때문이다.backdrop-filter에 blur를 설정하여 위와 같이 모달에 집중하게 할 수 도있고 아닐수도 있다.지금까지 간단히 모달을 띄우는 작업을 하다가 복잡한 모달의 요청을 받아서 하나의 리액트 훅으로 처리했던 코드를 공유하려고 한다.요구 사항모달이 아닌 부분 클릭하면 '작성 중이던 글을 취소하시겠습니까?' 라는 새로운 모달 띄우고 닫기 or 유지하기모달 step 만들기 - 1단계 -> 2단계 -> 3단계 (완료)단일 모달만 만들어본 나에게는 모달지..

모든 코드는 깃허브에 있습니다. 개발환경 설정 0. LICENSE 파일 생성 (MIT) MIT License Copyright (c) 2024 TeTedo Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copie..

sytled-components에서 Pseudo selector로 사용되는 &을 생략한 코드들의 css가 적용되지 않는 오류를 발견했다. "styled-components": "^6.0.4" 버전은 다음과 같이 사용하고 있었다. 일단 아래에 있는 코드들을 찾아서 급한대로 모든 코드에 &을 붙여 임시적으로 해결한 상태이다. :nth-child :first-child :last-child ::before ::after :focus styled-components github issues 첫 이슈 - v5 에서 v6 으로 마이그레이션 문제 Migration problems from v5 to v6 · Issue #4096 · styled-components/styled-components Hi! Found a..

React 최적화 - React.memo 모든 코드는 github에 있습니다. React는 부모가 렌더링 될때마다 자식들도 렌더링 되는 특징을 가지고 있다. 이러한 렌더링을 최적화하는 방법은 여러가지가 있다. 그 중 React.memo, useMemo, useCallback등이 있지만 React.memo를 소개하려고 한다. React.memo React.memo는 props가 변하지 않으면 리렌더링을 스킵한다. memo로 감싼 컴포넌트는 메모이제이션으로 이전 props와 새로운 props를 비교하여 같은 값이라면 리렌더링을 하지 않고 기존 컴포넌트를 반환한다. 여기서 props를 비교하는 함수로는 Object.is 를 사용하기 때문에 Object를 props로 넘기는거 보단 primitive 타입을 넘기..

React-CSV-Download + React recoil 모든 코드는 github에 있습니다. react-csv를 선택한 이유 여러 라이브러리중 react-csv를 선택한 이유는 사용이 간편해보여서이다. react-csv의 마지막 업데이트는 2022년 1월이지만 지금도 문제없이 사용된다. react-csv 사용 Install npm install react-csv --save; Import import { CSVLink, CSVDownload } from "react-csv"; CSVLink : 클릭시 다운로드 CSVDownload : 마운트시 다운로드 보통 다운로드 버튼으로 구현을 하기 때문에 CSVLink만 사용할 것이다. Import 후 해당 컴포넌트를 사용하면 끝이다. Download me ;..

모든 코드는 Github에 저장되어 있습니다. 나는 리액트로 개발을 할때 redux밖에 사용하지 않았었다. Redux는 검증되어있는 느낌이었고 커뮤니티 풀도 Redux가 우세했기 때문에 처음에 Redux를 공부하여 Redux만 사용했다. 최근 React-query를 사용하여 서버데이터와 클라이언트 내부데이터의 상태관리를 나누는 방법으로 개발을 하고 있다. 그래서 내부 상태저장을 할때 상대적으로 코드가 적은 recoil에 관심을 가지게 되었고 redux와 recoil의 차이점을 알아보려고 한다. 1. Redux 기존 양방향 데이터 흐름 Meta(전 Facebook)는 상태관리 문제를 해결하기 위해 Flux 패턴을 만들어 양방향 데이터 흐름에서 벗어나 단방향으로만 데이터를 변경할 수 있도록 만들었다. Red..