React
-
[React] framer-motion staggerChildren 사용React 2023. 3. 29. 15:28
framer-motion의 staggerChildren은 variants를 사용할시 자식 컴포넌트 애니메이션의 시차를 둘 수 있다. 예를 들어 stargeChildren이 0.01이면 첫 번째 자식이 0초, 두 번째 자식이 0.01, 세 번째 자식이 0.02 지연된다. const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.5 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } return ( ) 나의 경우 서버에서 받아온 데이터를 map으로 돌려 각 아이템이 각각 0.5씩 간격을 두고 애니메이션이 되길 바랬지만 적용이..
-
[React] vite + ts에서 svg component 사용하기React 2023. 1. 30. 14:34
vite-plugin-svgr 라이브러리를 사용하여 svg 파일을 리액트 컴포넌트로 변환할 수 있다. npm i -D vite-plugin-svgr yarn add -D vite-plugin-svgr // vite.config.js import svgr from 'vite-plugin-svgr' export default { // ... plugins: [svgr()], } import { ReactComponent as Logo } from './logo.svg' ts에서 사용하려면 추가적으로 설정을 해야한다. // vite-env.d.ts /// // svg.d.ts declare module "*.svg" { const content: React.FC; export default content; }..
-
[React] useCallback으로 useEffect 무한루프 방지React 2023. 1. 12. 14:37
useEffect 무한루프 상황 문제 발생 const 부모컴포넌트 () => { const 부모함수 = () => { setState(...); }; return { } } const 자식컴포넌트 = ({함수}) => { useEffect(() => { 함수(); }, [함수]) ] 부모 컴포넌트에서 생성한 함수를 props로 받고 useEffect에서 사용했더니 무한루프를 하는 상황이 발생하였다. 부모 컴포넌트가 리렌더링 되는 경우 함수도 재생성되기 때문에 당연히 자식 컴포넌트도 리렌더링된다. useEffect에 의존성 배열을 넣었음에도 불구하고 전달된 함수는 다른 참조값을 가지기 때문에 (함수는 참조에 의한 전달) useEffect 콜백함수는 실행되어 state가 바뀌고 또 state가 바뀌면 컴포넌..
-
[React] 검색어 자동완성 키보드 이벤트 기능 구현React 2023. 1. 5. 16:40
영화 검색 기능 구현 인풋에 텍스트를 작성하면 인풋 아래 자동 완성 목록이 나타나게 되는데 위와 같이 검색키보드 이벤트를 통하여 목록들 하나씩 선택되도록 구현해보려고 한다. 키보드 아래 방향키를 누르면 아래의 자동완성 목록들이 하나씩 선택되고 인풋에 선택된 영화의 제목이 나타난다. 자동 완성 목록 끝에서 아래 방향키를 누르면 다시 목록의 첫번째 아이템으로 이동한다. 첫번째 아이템에서 방향키 위를 누르면 기존의 내가 검색한 텍스트가 다시 나타난다. 선택된 검색 아이템을 기준으로 스크롤이 자동으로 된다. 엔터를 누르면 인풋에 나타난 텍스트를 쿼리로 받아 검색 결과 페이지로 라우팅된다. * 기능 구현 과정에 초점을 두어 코드를 간소화하여 작성하였다. 사용될 state 및 ref const [isAutoSear..
-
[React] 별점 기능 구현React 2022. 12. 14. 17:19
별점 기능에 대해 참고할만한 글이나 영상들을 찾아보다가 리액트로 별 반개 씩 별점을 주는 기능은 별로 없어서 써본다. import { useState } from "react"; import StarInput from "./StarInput"; const StarRating = () => { const [rating, setRating] = useState(0); const handleClickRating = (value) => { setRating(value); }; return ( 별점 // 생략 {rating} ); }; export default StarRating; 대략 전체적인 구조로 useState를 사용하여 rating이란 이름으로 상태를 관리하였고 라디오 인풋으로 5점부터 ~ 0.5점까지..
-
[React] 함수형 컴포넌트와 함수 컴포넌트React 2022. 11. 9. 18:09
지나가다 얼핏 '함수형 컴포넌트'가 아니라 '함수 컴포넌트'라고 불러야 한다라는 말을 들었다. 나도 여러 리액트를 다루는 글에서 '함수형 컴포넌트' '함수 컴포넌트' 용어 둘 다 쓰는 경우를 많이 봤었기 때문에 궁금하여 찾아보게 되었다. Rename "functional component" to "function component" by gaearon · Pull Request #863 · reactjs/reactjs.org Related to discussion in https://mobile.twitter.com/getify/status/993127777057550336 Yay or nay? github.com 결론은 초보자들에게 '함수형 컴포넌트'는 '함수형 프로그래밍'과 연결되어 혼란을 야기할 수..
-
[React] useEffect의 dependency array에 objectReact 2022. 11. 1. 16:45
// custom hook을 만들던 도중 무한루프에 빠지는 현상이 생겨 이유에 알아보았다. useEffect는 렌더링이 될 때마다 실행된다. 이는 두 번째 매개변수인 dependency array를 사용하여 useEffect의 실행을 제어할 수 있다. dependency array의 값들에 대하여 이전값과 현재값을 비교하게 되는데 만약 동일하지 않다면 Effect가 호출된다. 이때 리액트는 Object.is() 메소드를 통해 두 값을 비교하여 호출 여부를 결정한다. 리액트는 렌더링 시 props를 새 객체로 생성한다. 따라서 props로 전달한 객체가 이전 객체와 동일하더라도 다른 참조 주소를 가진 객체이기 때문에 dependency array에 넣어도 계속 호출되어 무한루프에 빠지고 만다. 즉, 객체나..
-
[React] 객체 key에 접근React 2022. 9. 21. 15:35
useState로 객체인 상태를 관리를 하던 중, 상태를 업데이트를 할 경우 key를 동적으로 받으려는 코드를 작성하려고 하다가 막혀 정리한다. const [filters, setFilters] = useState({ brightness: 100, contrast: 100, saturate: 100, grayscale: 0, invert: 0, huerotate: 0, blur: 0, sepia: 0, }); 위의 코드처럼 객체를 상태 관리 하려고 한다. 이때 하나의 속성 값이 바뀔경우 이 객체의 상태를 업데이트하는 하나의 함수를 작성하려고 한다. 그러면 이전 상태를 받아 그대로 전개하고 바뀐 속성을 찾아 업데이트를 해주면 된다. 이때 바뀐 속성의 key를 찾는 방법으로 대괄호([])을 이용하면 객체의 ..