#usecallback

usecallback

usecallback을 사용하여, 참여기능, 좋아요기능 함수에 usecallback으로 감싼것을 성능최적화 경험이라고 할수있을까요 ? 참여나 좋아요 함수가 다른 함수들 때문에 불필요한 리렌더링이 될수가있어서.. 사용해보았는데 궁금합니다. 이외 다른..실무에서 usecallback이 사용되는 경우가 궁금합니다.

React 컴포넌트 안 or 밖에서 변수 선언-할당하는 것의 차이가 뭔가요?

삽입한 코드는 그냥 위치 설명하기 위한 것이고, 만약에 복잡한 계산식의 결과나, 긴 함수같은 것을 컴포넌트 안에서, 밖에서 선언했을 때의 차이가 명확히 뭔가요..?? (1) 컴포넌트의 state나 props가 바뀔 때마다 해당 컴포넌트가 리렌더링 되면 컴포넌트 내에서 선언-할당한 변수는 재선언-재할당 되나요? 그래서 이 불필요한 재선언-재할당을 막기 위해서 useCallback을 쓰는 건가요..? (2) 아니면 만약 함수의 내용이 state나 props를 사용해서 최신값을 참조해 사용해야 할 경우에 의존성 배열에 이를 넣어서 useCallback을 사용하는 것인지... usecallback의 명확한 목적도 헷갈립니다. (3) 또, 만약 함수 내용이 바뀔 일이 없고 state나 props 값도 사용하지 않으면, 컴포넌트 바깥에서 선언-할당하는 게 좋은 건가요? 성능적인 측면에서 뭐가 좋은 건 지 알려주시면 감사하겠습니다..!

api의 첫번째 호출 이후부터 antd Button 렌더링 안되는 이슈가 있습니다.

```jsx import { Popover, Modal, Button, Image, Result } from "antd"; const [prevImg, setPrevImg] = useState(["any"]); const [loading, setLoading] = useState(false); const [removeImgFiles, setRemoveImgFiles] = useState([]); const combinePrevImages = (prevImages, newImages) => { const combinedImages = [...prevImages, ...newImages]; return combinedImages; }; useEffect(() => { const postSeg = async () => { try { const res = await axios.post( "apiurl", { filepath: filePath, clips: sortableList.map(list => `${list.seg.start}-${list.seg.end}`), frame: frameValue }, { proxy: false } ); return res.data; } catch (error) { console.error("Error posting segments:", error); return []; } finally { setLoading(false); } }; const postSegments = async () => { if (segments[0]?.start === 0 && segments[0]?.end === 0) return; if (sortableList && filePath) { setLoading(true); const res = await postSeg(); const combinedPrevImg = combinePrevImages(prevImg, res.results); setPrevImg(combinedPrevImg); console.log("Post Request Success"); } }; postSegments(); }, [filePath, segments, frameValue]); const handleModalOpen = useCallback(() => setModalOpen(true), []); const handleModalClose = useCallback(() => { setRemoveImgFiles([]); setModalOpen(false); }, []); const handleDeleteButtonClick = async () => { if (removeImgFiles.length > 0) { setPrevImg([...removeImgFiles]); setRemoveImgFiles([]); } else { const result = await showSwal({ title: "Are you sure delete?", showCancelButton: true, confirmButtonText: "Confirm", cancelButtonText: "Cancel", confirmButtonColor: "#3085d6", cancelButtonColor: "#d33" }); if (result.isConfirmed) { setRemoveImgFiles([...prevImg]); setPrevImg([]); } const success = await Promise.all(removeImgFiles.map(deleteFiles)); return success; } } const handleRemoveFinish = async () => { if (removeImgFiles) { for (const filePath of removeImgFiles) { try { await removeFile(filePath); } catch (e) { console.log("File Remove Error", e); } } } setRemoveImgFiles([]); handleModalClose(); }; return ( <motion.div initial={{ x: width }} animate={{ x: 0 }} exit={{ x: width }} transition={mySpring} > <div style={{ fontSize: 12, padding: "0 5px", color: "var(--gray12)", display: "flex", justifyContent: "space-between", alignItems: "center" }} > <FaAngleRight title={t("Close sidebar")} size={20} className="angle-right" role="button" onClick={toggleSegmentsList} /> {header} <FaExpandArrowsAlt title={t("Image Inspection")} size={18} className="expand-arrow-alt" style={{ cursor: "pointer" }} role="button" onClick={!loading ? handleModalOpen : handleModalClose} /> <Modal title={t("Image Inspection")} centered onCancel={handleModalClose} open={modalOpen} footer={[]} width="100%" > <div className="imagecontainer"> <Button danger className="toggle-remove" onClick={handleDeleteButtonClick}> {removeImgFiles.length > 0 ? "Add" : "Remove"} </Button> {prevImg?.length > 10 && prevImg.map(img => ( <Popover key={img}> {removeImgFiles?.includes(img) ? ( <span> <Result className="result" icon={<FaSmile />} subTitle="delete" /> </span> ) : <Image key={uuidv4()} src={img} preview={{ src: img }} alt={uuidv4()} /> )} </Popover> ))} </div> <Button block onClick={handleRemoveFinish}> Finish </Button> </Modal> </div> ) ``` api 호출을 통해 frameValue 개수(여기서는 12개씩) 만큼 이미지를 렌더링 하고 있는데 두번째 호출부터는 Button이 렌더링되지 않아서 어디가 잘못됐는지 알고싶습니다.. 필요한 부분이 imagecontainer 클래스네임인 div를 렌더링 해야합니다.

usecallback 으로 만든 함수가 새로 불러와 지지 않음을 어떻게 확인할 수 있나요?

usecallback 사용하면 함수가 디펜던시가 변하지 않으면 새롭게 불러와지지 않는데 함수가 새롭게 불러와지지 않음을 어떻게 확인할 수 있을까요? useinput로 따로 빼서 그 안에 콘솔 넣고 확인해봤는데 계속 콘솔이 찍히더라고요! 그러면 useInput으로 따로 커스텀해서 사용하는 이유가 뭘까요...? (커스텀 훅으로 만들었습니다)

useCallback 으로 함수형 컴포넌트를 선언하고 사용해도 괜찮을까요 ?

아래처럼 함수 컴포넌트 내에 있는 useCallback으로 감싸진 함수에서 컴포넌트를 반환하고, 그값을 컴포넌트 처럼 JSX에서 사용하는 코드를 봤는데... 겉보기엔 동일한 함수 컴포넌트라 문제가 없어보이는데 더 좋은 방법이 있을까요?

useCallback과 useMemo를 쓰면 좋은 경우가 궁금합니다.

useCallback과 useMemo를 잘 쓰지 못하면 사용하느니만 못하다는 이야기를 들었는데, 그럼 useCallback과 useMemo 가 유용한 경우는 어떤 경우일까요?

useCallback 으로 내부 컴포넌트를 선언하고 사용할 경우 얻는 장점이 무엇인가요?

아래 코드와 같이 내부에서 사용하는 컴포넌트를 useCallback 으로 선언해서 사용하는 코드가 있습니다. 저는 InnerComponent 를 새로운 컴포넌트로 만들고 props 만 넘겨주는게 더 효율적일 것 같아요. 이렇게 useCallback 을 사용해서 컴포넌트를 선언해서 얻는 장점이 있는 걸까요 ?

실무에서 useCallback useMemo 자주 사용하나요?

제곧내! 실무에서 useCallback , useMemo를 어느정도 사용하는지 궁금합니다. 모든 함수에 useCallback을 할 것 같지는 않아보여서요. 사용하게되는 경우라면 어떤 경우인지 궁금합니다!

useCallback vs 컴포넌트 밖에 선언된 함수

React를 공부하다가 궁금한점이 생겨서 질문 남깁니다 useCallback은 의존성 배열의 값이 바뀌지 않는한 같은 함수를 반환하는 것으로 알고있습니다. react 컴포넌트 안에서 선언되는 함수는 useCallback의 의존성 배열에 추가해야되는 것을 이해하겠는데, react 컴포넌트 밖에서 선언되는 함수도 useCallback의 의존성 배열에 추가를 해야하나요? 혹시 성능 차이가 날까요?

React useState의 set함수와 deps

React에서 useState로 선언한 set 함수는 useEffect나 useCallback 같은 함수의 deps에 포함시키지 않아도 괜찮나요? 다른 분들의 예시 코드를 보는데 포함되지 않는 경우가 많아서 질문 드립니다. 포함시키지 않아도 괜찮다면 그 이유도 알려주실 수 있으실까요?