띠띠의 개발오답노트

React.js/react

• [react] Drag And Drop 구현 코드

  React.js/react 2024. 12. 4. 13:36

  import { IoLogoOctocat } from 'react-icons/io';import styled from 'styled-components';import testImg from '../../../assets/collection/carousel_01.jpg';import { FaPlus } from 'react-icons/fa';import { MdDeleteSweep } from 'react-icons/md';import { useState } from 'react';import { BasicButton } from '../../common/BasicButton';import { theme } from '../../../styles/theme';export const PropShopMedia..

  Read More
• [react] 3D carousel 구현해보기!

  React.js/react 2024. 7. 8. 15:34

  import { useState } from 'react';import styled from 'styled-components';export const Carousel3D = () => { const [rotation, setRotation] = useState(0); const cells = Array.from({ length: 9 }, (_, i) => i + 1); const rotateCarousel = (direction) => { setRotation(rotation + (direction === 'next' ? -40 : 40)); }; return ( {cells.map((cell, index) => ( ..

  Read More
• [embla-carousel] Carousel을 라이브러리로 쉽게 구현해보자2

  React.js/react 2023. 11. 15. 15:24

  단순한 캐러셀 말고 예쁜 캐러셀을 찾다가 알게 된 라이브러리 embla-carousel https://www.embla-carousel.com/ A lightweight carousel library with fluid motion and great swipe precision | Embla Carousel www.embla-carousel.com 캐러셀 예제를 한 눈에 볼 수 있어서 좋았다. 나는 양 옆에 이미지가 살짝 보이는 디자인으로 선택했다. 1. 라이브러리 설치 npm install embla-carousel-react --save yarn add embla-carousel-react 나는 autoplay 속성이 필요했는데, 문서를 살펴보니 옵션이 없었다. 구글링 결과 패키지 설치가 추가적으로 ..

  Read More
• [react] path 수정 시 스크롤 상단으로 이동하는 컴포넌트

  React.js/react 2023. 10. 31. 14:52

  1. 아래와 같이 경로가 바뀌면 스크롤이 최상단으로 이동하는 컴포넌트를 생성한다. // ScrollToTop.tsx import { useEffect } from "react"; import { useLocation } from "react-router-dom"; export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo({top: 0, left: 0, behavior: 'smooth' }); }, [pathname]); return null; } 2. 최상위 컴포넌트에 해당 컴포넌트를 삽입한다. // App.tsx export const App = (): JSX.El..

  Read More
• [react] fetch된 데이터가 변경된 후, 새로운 데이터를 가져오려면?

  React.js/react 2023. 10. 23. 02:04

  댓글 등록, 수정, 삭제 후에 새로고침을 하지 않고 변경된 데이터를 적용하려면 일반적으로 다음과 같은 방법들이 있다. API를 호출한 것이 성공했을 때 클라이언트 데이터를 기존 데이터에 추가한다. API를 호출한 결과로 추가시에는 해당 댓글 부분의 객체를 backend 서버로 부터 response로 전달받아서 클라이언트에서 추가한다. (수정, 삭제시에는 1번과 같음) react-query를 사용하고 있다면 success 메서드를 활용한다. const postMutation = useMutation(postComment, { onSuccess: () => { // 댓글 등록 후 쿼리 무효화 queryClient.invalidateQueries(['comments']); }, });

  Read More