반응형 개발/React54 useEffect의 cleanUp 함수에 대한 착각 : unmount시 발생하는 것이 아니다! useEffect의 cleanUp 함수에 대한 착각 : unmount시 발생하는 것이 아니다! 들어가기에 앞서 결론부터 말하자면 공식문서에 나와있다 실제 실험을 통해 페이지 이동(unmount)이 안되어도 setInterval을 정리하여 버그를 차단함을 알 수 있었다. 1. clean-up 없을 때 import { useEffect, useState } from "react"; const initialCount = 0; function FrequentlyChangableDependencyInEffect() { const [count, setCount] = useState(initialCount); useEffect(() => { setInterval(() => { setCount(count); }, 10.. 2022. 8. 12. Flux 패턴 Flux패턴은 MVC모델의 단점을 보완하기 위해 페북에서 만든 새로운 패턴이다. MVC 패턴은 보는것과 같이 양방향이다. 양방향 데이터 흐름은 복잡하지 않은 어플리케이션에서는 문제가 없겠지만, 규모가 큰 어플리케이션에서는 view가 또다른 model을 업데이트 시키고 업데이트 된 model이 view2를 업데이트 시키고... 이렇게 되면 개발자들이 어플리케이션의 패턴을 예측하기가 힘들어진다. 페북에서는 이를 해결하기 위해 단방향 데이터 흐름인 Flux 패턴을 도입했다. 리액트에서 무조건 부모컴포넌트만 자식컴포넌트에게 props를 전달할 수 있는 규칙도 Flux 패턴중 하나이다. Action : 새로 발생한 액션타입과 페이로드를 Dispatcher로 전달 Dispatcher : 액션을 스토어에 전달 Sto.. 2022. 8. 11. Suspense react18에 suspense가 정식기능으로 나왔다. 그런데 if(loading) return 로딩 if(error) return 에러 else return (페이지) 위와 같이 하지 않고 아래와 같이 suspense를 쓰는게 왜 좋은것일까?? {data} 먼저 return을 로딩,에러,데이터 별로 분기하는것이 안좋은 이유는 다음과 같다. (사실 나는 체감으로 느껴보진 못했던 것들이었음..) 1. 기본적으로 데이터 로딩과 UI 랜더링이라는 두 가지 전혀 다른 목표가 하나의 컴포넌트 안에 커플링(coupling)되어 코드가 읽기가 어려워짐 2. 초기 랜더링 후에 데이터 로딩 후 다시 랜더링을 수행하는 방법은 좋은 방법이 아님. (리렌더링은 줄이는게 좋음) 3. 비동기통신을 하면 코드가 순서대로 작동한다는.. 2022. 8. 10. lodash 이용해서 프론트에서 고유한 id 만들기 프론트로만 작동하는 페이지를 하나 만들고 있다. 그런데 배열을 매핑할때 key를 index로 하다보니 없는것과 마찬가지이다. (이유) key에 인덱스를 사용하는 것은 최후의 수단이다. 예를들면 인덱스를 사용했을때는 댓글 삭제, 작성처럼 항목들이 재배열되는 경우 오히려 성능이 저하된다고 한다. 프론트에서 어떻게 고유id를 만들까 검색하다가 lodash에 uniqueId()가 있는것을 알게 되었다. (lodash는 debounce용으로 설치해둔 라이브러리였음) 초기 state를 다음과 같이 작성하고, const [purchases, setPurchases] = useState([ { id: uniqueId(), product: "과자", price: "2000", }, { id: uniqueId(), pro.. 2022. 7. 31. 이전 1 ··· 5 6 7 8 9 10 11 ··· 14 다음 반응형
