react4 useMemo, useCallback useMemo 값을 캐싱하기 위해 사용합니다. useCallback 함수를 캐싱하기 위해 사용합니다. const Item = ({ item, onClick }) => {item.name}; const Component = ({ data }) => { const value = useMemo(() => (복잡한연산 retrun true or false), [someStateValue]); const onClick = useCallback(() => { console.log(value); }, [value]); return ( {data.map((d) => ( ))} ); }; 해당 코드처럼 복잡한 연산을 다시 하지 않기 위해 결괏값을 저장해놨다가 의존하는 값이 변경될 때에만 재연산하는 것이 useMemo. .. 2023. 1. 2. react key prop 글 작성 동기? react key prop의 필요성에 대해서 정리하고 싶어서 글을 작성하였습니다. key props 왜 필요한가? key props를 사용하지 않는다면 1 2 해당 코드가 1 2 3 로 업데이트 될 때, react 내부에서는 1와 1가 일치하는지 확인하고 2와 2가 일치하는지 확인하고 마침내 3는 한곳에만 있음을 발견하고 추가해 줍니다. 그런데 만약 1 2 3 1 2 이러한 변경이 일어 났을 때, react는 3를 단순히 추가하지않고, 1를 3로 변경하고 2를 1로 변경하는 비효울적인 연산을 하게 됩니다. 이러한 비효율을 방지하기 위해서 ... key props를 쓰게 됩니다. key를 사용하면 key를 통해 트리를 비교하기 때문에 3가 새로운 노드란 것을 알 수 있게 됩니다. => 사실.. 2022. 12. 29. React 클래스형 컴포넌트 vs 함수 컴포넌트 소개 react 클래스형 컴포넌트와 함수 컴포넌트의 차이점을 알아봅시다. 현재 react 공식문서는 새로운 프로젝트의 경우 함수 컴포넌트 사용할 것을 권장하고 있습니다. why react 개발팀은 왜 클래스형 컴포넌트를 놔두고 함수 컴포넌트를 개발했을까요? 1. 로직을 재사용하기 힘들었다. 두 컴포넌트의 로직이 비슷할 때, 하나의 더 높은 차원의 컴포넌트를 생성하여 나머지 컴포넌트를 감싸주는 식으로 구현하였습니다. 이러다 보니 점점 감싸주는 컴포넌트의 개수가 많아졌고, wrapper hell에 빠지기도 하였습니다. => 현재는 커스텀 훅을 이용해서 로직을 재사용 합니다. 2. 복잡해진 컴포넌트는 이해하기가 어려웠다. 클래스형 컴포넌트의 경우 라이프 사이클을 이용하는 메서드가 있었습니다. (componen.. 2022. 12. 23. [React] lazy loading Lazy Loading이란? lazy loading이란 말그대로 느린 로딩을 의미합니다. react를 사용하여 렌더링을 할때, 프로젝트가 클수록, 초기 렌더링 시간이 오래걸리기 때문에 이를 해결해야할 필요성이 있습니다.(CSR을 채택하기 때문) 그리하여 나온 방법이 한번에 다 로딩하지 않는 느린 로딩 방식입니다. 처음에 모든페이지를 다 렌더링 하지않고 특정 페이지를 요청했을때 js를 다운받아오는 방식입니다. 문법 lazy Loading 안썼을 때 import A from './경로'; lazy Loading 썼을 때 const A = React.lazy(() => import('./경로'); 이제 A컴포넌트는 필요시에만 다운로드되어 작동합니다. 문제점 근데 이렇게 까지만 구현하면 원하는대로 작동하지 않습.. 2022. 7. 11. 이전 1 다음 반응형
