리액트20

• 

  [React] useId 이거 언제쓰지...싶을 때. (사용 예시) React-hooks에 있던 useId. 이거 대체 언제 쓰나 싶었었다. 딱히 별 다른 건 아니고, unique ID를 생성하는 건데, 늘 언제쓰는거지 싶었었다. 오늘 사용 했었는데, input과 label을 연결해줄 때 사용했다. component 중 일부의 코드다. 아래와 같이 input 과 label을 연결해줄 때, 동일한 ID를 입력해야해서, component 생성 때마다 unique id가 발급되도록 만들어주었다. 생각보다 유용했다. const connectionId = useId(); const [isChecked, setIsChecked] = useState(checked); return ( {...} ); 참고 useId – React The library for web and native.. React & TypeScript/React 2023. 11. 15.

• 

  [React] React-beautiful-dnd 활용법 Basic 개요 React-beautiful-dnd (이하 rbd)는 zira로 유명한 atlassian에서 만든 오픈소스다. 디자인 시스템을 구축하는 팀에서 주로 작업하는 듯 하다. (오픈소스 운영자 트윗) 만약, zira를 써보았다면, 오픈소스를 사용하면서, 똑같은 느낌을 받을 수 있을 것이다. 비슷한 오픈소스들이 많았지만, zira의 점유율이 높아지면서, 자연스럽게 atlassian 에서 공개한 rbd 라이브러리도 점유율이 매우 높다. 같은 카테고리에서는 과반이상이 되어버린 것 같다. 사용하게 된 계기 nomad coder 수업을 수강하면서 알게되었다. api 구조가 매우 단순하면서도, 편하게 사용할 수 있게 되어 있다. 그래서 앞으로 Trello 형태의 UI를 구현해야하면, rbd를 계속 사용하게 될 것 같.. React & Library/React-beautiful-dnd 2023. 2. 3.

• 

  [React] React.memo로 만드는 성능 최적화 기법 개요 가끔씩 React.memo에 대해 왜 쓰는지 이해가 안가는 경우가 많았다. 이건 또 뭔가 싶고. 개선해도 얼마 되지도 않고.. 오늘에서야 그 이유를 정확히 알게 된 것 같아서 글을 정리하게 되었다. 😁 React.memo 라는 것 한문장으로 정리하면, props가 변경되지 않으면, 재 렌더링 하지 않게 하는 것 그렇다. 이게 끝이다. 그럼 언제 사용할까? 당연하게도, props가 변경되지 않는데, 자꾸 재 렌더링해서 성능이 저하 되는 경우에 사용한다. 예제 코드 // parents.tsx // ... {toDos.map((toDo, index) => ( ))} {magic.placeholder} // ... // children.tsx import React, { memo } from "react".. React & TypeScript/React 2023. 1. 26.

• 

  [React / Recoil] 예제로 알아보는 Recoil (컨셉, 환경세팅, Atom, Selector) This Document wrote based Recoil v0.7.6 at 2022.12.30. 1. Concept 전역 상태 관리를 하는 상태 관리 라이브러리이다. key, value를 한 쌍으로 이루어서 사용한다. React를 만든 메타에서 직접 만든 Library이기 때문에, React답게 유지하려고 만들었다고 한다. 나는 redux(현재까지 좀 더 많이 사용 중인)를 안써봤기 때문에 잘 모르지만, 비교 사용해본 사람들은 redux보다 사용하기에 단순하고 편리하다고 한다. 실제 익혀서 사용까지 매우 금방이었다. (결국은 짬바인가? 얼마되진 않지만 전보다는 쉬워졌다. 오히려 개념을 익히는 게 더 시간이 많이 걸리지 않을까 싶다.) 공식 사이트에 있는 아래 영상을 보면서 개념을 익히는 것도 매우 유용.. React & TypeScript/Recoil 2023. 1. 9.

• 

  [React / Typescript] setInterval, useRef 이용한 대기시간 제어하기 클라이언트에서 대기시간이 지나면, 화면이 전환되도록 작성한 코드다. 이 방법이 정답인지는 모르겠는데, 이런 저런 구글링은 그닥 도움이 되지 않았었다. 구글링 중 유용했던 내용은 다음과 같다. 1. useRef를 이용해서 dom에 간섭을 해야한다는 것. 2. useRef의 타입을 NodeJS.Timeout 으로 설정해주어야 한다는 것. 조사한 내용을 바탕으로 이렇게 하면 될 것 같아 작업했다. const timerRef = useRef(); let initProcessingCount = 0; const initializingCount = () => { initProcessingCount = 0; }; useEffect(() => { timerRef.current = setInterval(() => { if.. 카테고리 없음 2023. 1. 4.

• 

  [React / React Query] React Query를 사용하게 되면서 좋은 점들 React Query 공식문서에는 아래와 같이 설명되어 있다. Performant and powerful data synchronization for React 음... 그래. 리액트에 어울리는 동기화 라이브러리 라고 한다. (그래? 한번 써보았다.) 기존 코드 import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; import { getCoins } from "APIs/get"; import { useQuery } from "react-query"; // Styled Component 생략 // const Coins = () => { .. React & Library/React-Query 2022. 12. 21.

• 

  [React / TypeScript / API] API 구조 작성은 이렇게 한다. 컴포넌트 호출 시 import { getCoin, getCoinPrice } from "APIs/get"; index가 있어서, 이렇게 선언하면서 사용이 가능해진다. 리액트 템플릿 사면, 이런 구조로 작성된 형태가 종종 있었는데, 왜 그렇게 했는지 이해가 된다. 이 구조가 가장 깔끔하다. index.ts import { getCoins } from "./getCoins"; import { getCoin, getCoinPrice } from "./getCoin"; export { getCoins, getCoin, getCoinPrice }; getCoins.ts import axios from "axios"; export const getCoins = async () => { try { const resp.. React & TypeScript/TypeScript 2022. 12. 16.

• 

  [React / Router] Link 에서 state로 값 넘기기 전달하는 Link // state로 주면 된다. {coin.name} → 이렇게 하면 state에 값이 넘어간다. react router v6 에서 좀 더 간편해졌다. 예전에는 to 에 객체를 통째로 넣어야 했는데.. 지금은 state에 넣을 수 있게 되었다. state={{ name=coin.name }} 이런 식으로 작성도 가능해졌다. 전달받은 Link의 컴포넌트 전달받은 Link에 해당하는 Component에서는 useLocation 을 사용하도록 한다. useLocation().state를 받기 위해서 const { state } 라고 선언해주어서 사용하면 된다. import { useLocation } from "react-router-dom"; const Coin = (props: any) =.. React & Library/Router 2022. 12. 16.

• 

  [React] 프론트엔드 폴더 구조 방법론 정리 [펌 + 사견] 이런저런 자료들을 찾아보았다. 결론부터 말하면, 정답은 없다. 정답이 되게 하기 위한 정답에 가까운 구조만이 있을 뿐이다. 오픈소스들 보면서 폴더구조를 참조하는 것도 좋은 방법이다. Ant design Pro https://github.com/ant-design/ant-design-pro 주요 원칙 (결론) 그래도 원칙은 있는 것 같다. 1. 재사용 2. 중복 방지 3. 팀 시너지 증대 위 3가지 원칙을 지키기 위해 나온 것이 multi-Layerd Architecture (다층화 구조) 라고 보면 된다. 리액트에서 추천하는 분류법 (공식문서) 1. 파일의 기능이나 라우트에 의한 분류 최초에 src폴더를 이렇게 만들어봤는데, 폴더별로 가지는 파일 수가 너무 많이 늘어나는 경향이 있었다. 가벼운 프로젝트에.. React & TypeScript/React 2022. 12. 14.

• 

  [React / Test] Material UI (mui) + React + Testing Library 적용 간 어려운 점 회고 Render 관련 코드 구조 describe("Application 테스트", () => { it("Application - UI Test ", () => { render( , { wrapper: MemoryRouter } ); // ... material UI 특성상 theme 가 구동되기 때문에 ThemeProvider 를 감싸줘야 한다. (참고 : Custom Render - 아예 test-util을 만들어서 wrapping 하는 방법도 있다.) FetchProvider 도 감싸줘야 하며, Application 내부에서 match.params.id 를 사용하는데, 페이지를 전환하면서 전달한 게 아니라서, 임의로 props로 match 객체처럼 보여지게끔 전달해서 해결했다. Provider들을 감싸는.. React & TypeScript/React 2022. 6. 22.

• 

  React useEffect (included api 호출) 가 있는 컴포넌트 분리 방법 자식 컴포넌트에서는 아래와 같이 쓰고 export const childComp = () => { const [data, setData] = useState(); useEffect(() => { refresh(); },[]) const refresh = () => { fetch("URL") .then((res)=> res.json()) .then(_newData => setData(_newData)); } return [data, refresh]; } 부모 컴포넌트에서는 아래와 같이 쓴다. import childComp from "./childComp"; const parentComp = () => { const [data, refresh] = childComp(); return ( Refresh! ) }.. React & TypeScript/React 2022. 4. 29.

• 

  [React Router] 특정 경로 접속 시, 다른 경로로 변경 (리다이렉트) 하기 코드 자체는 매우 간단하다. (간단한 몇 줄이지만, 굉장히 자주 쓰이는 코드라서 기록해둔다.) ( {props.history.push( props.history.location.pathname.replace("/theme", "/donation") )} )} /> /theme 라는 경로는 과거에 사용하던 경로였다. 이른 donation 경로로 했으면, 아예 다른 라우터로 잡고, 과거의 경로로 접속할 경우, push로 새로 링크를 잡고 연결해주면 된다. 만약, props 정보로 history를 사용하지 못하는 경우는 useHistory를 연결하고나서 사용하면 되겠다. 그런 경우는 아마....router 컴포넌트는 아닐 것 같다. React & Library/Router 2021. 8. 2.