일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- dfs
- SSR
- 호이스팅
- 공변성
- tailwind
- webpack
- 반공변성
- 리터럴 타입
- ESlint
- Cypress
- 이분 검색
- 태그된 유니온
- app router
- RTK Query
- useAppDispatch
- 결정 알고리즘
- CI/CD
- Jest
- async/await
- React
- CORS
- map
- 인터섹션
- Promise
- recoil
- TS
- 투포인터
- 타입 좁히기
- 무한 스크롤
- autosize
- Today
- Total
목록리액트 (32)
짧은코딩
npm 사이트 https://www.npmjs.com/package/react-slick react-slick React port of slick carousel. Latest version: 0.29.0, last published: 8 months ago. Start using react-slick in your project by running `npm i react-slick`. There are 1771 other projects in the npm registry using react-slick. www.npmjs.com react-slick의 npm 주소이다. react-slick이란? 인스타 같은 곳에서 사진이 여러장 있으면 사진을 슬라이드 형태로 넘길 수 있게 해주는 라이브러리이다. 사용..
필요한 변수 및 interface interface ItemInfo { id: number; name: string; values: string; } TypeScript라서 우선 데이터의 구조를 잡아줬다. const ItemId = useRef(1); const [itemInfos, setItemInfos] = useState([ { id: 0, name: "", values: "" }, ]); ItemId는 input이 동적으로 늘어감에 따라 각 Item에 부여할 ID이다. itemInfos는 각 아이템들을 저장하는 배열이다. 필요한 함수들 input 추가 함수 const addInput = useCallback(() => { const Item = { id: ItemId.current, name: "..
map 함수 리액트에서 map 함수를 써주게되면 key를 줘야한다. ary.map((item, index) => return {item} ); 나는 보통 이렇게 map 함수의 index를 key 값으로 줬다. 하지만 이는 anti-pattern 중 하나이다. 이렇게 index를 key 값으로 주면 안되는 경우는 ary 배열 중 한 값이 지워지거나, 순서가 달라질때, 중간에 값이 추가되는 경우가 대표적이다. 다만 배열의 값이 절대 바뀔 일이 없다면 key 값을 index로 줘도 상관없다. ary.map((item, index) => return {item} ); 따라서 이런 경우에는 위 코드처럼 고유 id를 만들어서 key 값으로 주는 것이 좋다.
autosize 공식 페이지 https://www.npmjs.com/package/autosize autosize Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.. Latest version: 5.0.2, last published: a month ago. Start using autosize in your project by running `npm i autosize`. There are 541 other projects in the npm regi www.npmjs.com autosize는 DT라서 TypeScript에서는 TD까지 같이 설치해야된다. 설명 autosize는 texta..
문제점 const onClickLenUp: any = useCallback((e: any, idx: number) => { console.log("누름", idx); }, []); 이렇게해서 html에 바로 주게되면 버튼을 클릭하지도 않았는데 실행이되어있다. 해결법 해결방법은 익명 함수를 사용하는 것이다. onClickLenUp(item[index]?.id)}> 이렇게 익명 함수를 사용하게 되면 onClick 이벤트에 인자를 줄 수 있다!
input 동적으로 만들기 사진처럼 select로 옵션 개수를 입력받고 input을 동적으로 늘려주려고 한다. 옵션이 최대 5개라서 처음엔 5개를 다 만들고 + 버튼을 누르면 hidden이 사라지고 보이게 하려고 했다. 하지만 이 방법은 너무 비효율적인 거 같다. 해결법 옵션값을 컴포넌트로 만들어서 select로 선택한 숫자만큼 map으로 옵션값 컴포넌트를 늘려주면 된다. 그리고 나중에 각각의 값들을 한 곳에 모아주면 된다. 코드 -OpttionInput import React, { ChangeEvent, DetailedHTMLProps, Dispatch, ElementType, FC, HTMLAttributes, SetStateAction, useCallback, useEffect, } from "re..
map 사용 일정 숫자만큼 화면에 쓰고 싶어서 나는 for문을 생각하고 있었다. 하지만 for문은 사용할 수 없었다. 따라서 map을 이용해서 사용해야 한다. 적용 코드 옵션의 개수에 따라서 "으액"이 출력되도록 하고싶었다. const handleCountSelect = useCallback((e: ChangeEvent) => { const cnt = parseInt(e.target.value); setCount(cnt); }, []); 여기서 e.target.value를 정수형으로 바꾸지 않으면 코드 실행이 되지 않았다. {[...Array(count)].map((n, index) => { return 으액; })} 이렇게 렌더하면 위 사진과 같은 결과를 보여줄 수 있다.
useHistory react-router 6버전부터는 useNavigate로 구현할 수 있다. 하지만 5버전에서는 useHistory로 구현해야 한다. 구현 방법 -import import { useHistory } from "react-router"; -코드 const history = useHistory(); const handleHistory = () => { history.goBack(); }; 이렇게 goBack() 메서드를 사용하면 된다. 적용하기 onClick에 handleHistory 메서드를 주면 된다.
react-cookie react-cookie는 쿠키를 만들어 줄 수 있는 라이브러리이다. -npm 사이트 https://www.npmjs.com/package/react-cookie react-cookie Universal cookies for React. Latest version: 4.1.1, last published: a year ago. Start using react-cookie in your project by running `npm i react-cookie`. There are 505 other projects in the npm registry using react-cookie. www.npmjs.com npm i react-cookie 이 명령어로 다운 받을 수 있다. 적용 -uti..