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] 함수형 컴포넌트와 함수 컴포넌트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] 객체 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를 찾는 방법으로 대괄호([])을 이용하면 객체의 ..
-
[React] 코드 분할과 React.lazyReact 2022. 8. 11. 16:46
코드 분할 Code-Splitting 번들링 Bundling 대부분 React 앱들은 Webpack, Rollup, Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 “번들 된” 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있다. 코드 분할 하지만 사용자의 앱이 커지면 번들도 커지게 된다. 앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴야 한다. 번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 “나누는” 것입니다. 코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup과 Browserify (factor-bundle) 같은 번들러가 지원하는 기능입니다. 코드 분할은 앱을 “지연 로딩” 하게 도..
-
[React] React에서 setInterval 사용React 2022. 7. 22. 18:08
Making setInterval Declarative with React Hooks How I learned to stop worrying and love refs. overreacted.io 번역 / 리액트 훅스 컴포넌트에서 setInterval 사용 시의 문제점 Dan abramov의 https://overreacted.io/making-setinterval-declarative-with-react-hooks/ 번역입니다.All copyrights to Dan Abramovtranslated by Jake seoTHE velog.io react 프로젝트 진행 중 timer를 구현하기 위해 setInterval을 사용해야 했다. setInterval 사용 시 react에서 일어날 렌더링에 관한 이슈에..
-
[React] Intersection Observer API : 무한 스크롤 구현React 2022. 7. 3. 17:25
Intersection Observer API - Web API | MDN Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다.Intersection Observer API는 타겟 요소와 상위 요소 또는 developer.mozilla.org 🤔Intersection Observer API란? Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport사이의 교차점 (intersection) 내의 변화를 비동기적으로 관찰하는 방법이다. 즉, 내가 지정한 요소가 화면(뷰포트) 상에 보이고 있는지를 관찰하는 ..
-
[React] TypeError: Array.map is not a functionReact 2022. 6. 14. 14:17
TypeError: Array.map is not a function 문제 데이터 배열을 받아 map 함수로 데이터 목록을 출력하도록 하였다. 잘 동작하는 듯 하다가 특정 상황에서 해당 오류가 발생하였다. 분석 map 함수는 배열에만 동작한다. 이 오류는 해당 데이터가 배열이 아니기 때문에 나는 오류이다. 데이터를 받아오는 코드를 작성할 때도 이 사실에 주의하여 배열로 받아오겠끔 하였다. 그런데 왜 특정 경우에 이런 오류가 나는지 고민했다. 그 이유는 바로 데이터를 받는 상태의 초기값 때문이었다. 해당 프로젝트에서 상태 관리 라이브러리인 리덕스를 사용했다. 바로 데이터를 받아오는 상태의 initialState를 {}로 할당하였기 때문이었다. 해결 해당 상태의 initialState를 []로 할당하였다.