교육후 개인공부/React18 [React] useCallback useCallback 또한 메모이제이션 기법으로 컴포넌트 성능을 최적화 시켜주는 도구이다. useCallback은 인자로 전달한 콜백 함수 그 자체를 메모이제이션 하는 것이다. function Component() { const calculate = (num) => { return num + 1; } return {value} } export default Component; calculate 함수를 메모이제이션 하려면 useCallback으로 calculate 함수를 감싸주면 된다. 그리고 calculate 함수가 다시 필요할 때마다 함수를 새로 생성하는 것이 아닌 필요할 때마다 메모리에서 가져와서 재사용하는 것이다. function Component(){ const calculate = useCall.. 2024. 3. 19. [React] useMemo 컴포넌트 최적화를 위해 사용되는 대표적인 hook은 useMemo와 useCallback이 있다. 먼저 useMemo 대해서 파헤쳐보자. 불필요한 리렌더링을 줄여서 성능을 최적화한다 Memo는 memorized를 의미하는데, 이전에 계산 한 값을 재사용한다는 의미를 가지고 있다. 동일한 값을 리턴하는 함수를 반복적으로 호출할 경우 맨 처음 값을 메모리에 저장해서 필요할 때마다 또다시 계산하지 않고 메모리에서 꺼내서 재사용을 하는 기법이다. 간단히 말해서 자주 필요한 값을 맨 처음 계산할 때 캐싱 해놓아서 그 값이 필요할 때마다 다시 계산을 하는 것이 아니라 캐시에서 꺼내서 사용하는 것이다. 함수형 컴포넌트는 함수다. 함수형 컴포넌트가 렌더링이 된다는 것은 그 함수가 호출된다는 것이고 그때 함수 내부에 정.. 2024. 3. 19. [Next.js] 게시판 삭제기능 "use client"; import Link from "next/link"; import WriteBtn from "./WriteBtn"; export default function BoardItem({ data }) { return ( Q & A {data.map((a, i) => { return ( {data[i].title} {data[i].content} {/* {data[i]._id} */} 수정 { fetch("/api/post/delete", { method: "DELETE", body: data[i]._id, }) .then(r => r.json) .then(() => { e.target.parentElement.style.opacity = 0; setTimeout(() => { e.ta.. 2024. 2. 24. [Next.js] client component에서 DB데이터 가져오려면 client component에서 DB데이터 가져오려면 useEffect이용해서 서버에 부탁해서 DB데이터를 가져온다!! "use client"; import Link from "next/link"; import WriteBtn from "./WriteBtn"; import { useEffect } from "react"; export default function BoardItem() { useEffect(() => {}, []); return ( Q & A {data.map((a, i) => { return ( {data[i].title} {data[i].content} {/* {data[i]._id} */} 수정 삭제 ); })} ); } 근데 이렇게 하면 단점은 검색노출이 어려울수도 있다. 왜나면.. 2024. 2. 24. 이전 1 2 3 4 5 다음