리액트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.. 2023. 11. 15. [React] React-beautiful-dnd 활용법 Basic 개요 React-beautiful-dnd (이하 rbd)는 zira로 유명한 atlassian에서 만든 오픈소스다. 디자인 시스템을 구축하는 팀에서 주로 작업하는 듯 하다. (오픈소스 운영자 트윗) 만약, zira를 써보았다면, 오픈소스를 사용하면서, 똑같은 느낌을 받을 수 있을 것이다. 비슷한 오픈소스들이 많았지만, zira의 점유율이 높아지면서, 자연스럽게 atlassian 에서 공개한 rbd 라이브러리도 점유율이 매우 높다. 같은 카테고리에서는 과반이상이 되어버린 것 같다. 사용하게 된 계기 nomad coder 수업을 수강하면서 알게되었다. api 구조가 매우 단순하면서도, 편하게 사용할 수 있게 되어 있다. 그래서 앞으로 Trello 형태의 UI를 구현해야하면, rbd를 계속 사용하게 될 것 같.. 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".. 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보다 사용하기에 단순하고 편리하다고 한다. 실제 익혀서 사용까지 매우 금방이었다. (결국은 짬바인가? 얼마되진 않지만 전보다는 쉬워졌다. 오히려 개념을 익히는 게 더 시간이 많이 걸리지 않을까 싶다.) 공식 사이트에 있는 아래 영상을 보면서 개념을 익히는 것도 매우 유용.. 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 = () => { .. 2022. 12. 21. 이전 1 2 3 4 다음
