개발/React

[React] react template 만들어놓기

모든 코드는 깃허브에 있습니다. 개발환경 설정 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..

[React] styled-components에서 Pseudo selector &을 생략하면 오류

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 최적화

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] react-csv + recoil 로 csv다운로드 구현

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 ;..

[React] Redux vs Recoil

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

[React] i18next

i18n은 internationalization 의 약자로 i와 n사이에 18글자가 들어있기 때문에 i18n이라고 한다. i18n은 어플리케이션을 다양한 언어에 쉽게 적용할 수 있도록 하는 개발 프로세스이다. 각 특정 로케일에 대해 다시 개발을 할 필요 없이 전 세계 사용자가 동일한 어플리케이션을 사용할 수 있도록 한다. 예를 들면 홈페이지의 영문버전, 한글버전이 그 예이다. React에서는 이를 지원해주는 i18next라는 라이브러리가 있다. 1. i18n 세팅 src폴더에 아래와 같은 폴더들을 만들어준다. // i18n/index.js import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import en from ..