묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
TDD - Green, Red, Refactor
안녕하세요. TDD의 Green, Red, Refactor 파트(9:40)에서리팩터링을 진행하시면서 onPageNumberClick 함수를 useCallback으로 감싸서 렌더링이 다시 될때 이 함수가 두번 생성되지 않도록 한다고 하셨는데이 부분이 잘 이해가 가지 않아서요. 설명해주신걸로 유추해보면 useCallback으로 감싸면 함수가 한번만 생성되는 것 같은데 useCallback을 사용했을때와 사용하지 않았을 때 차이에 대해서 조금 더 설명해주실 수 있을까요?
-
해결됨웹 게임을 만들며 배우는 React
2:04초 onClickTd 왜 useCallback사용하는지 모르겠어요
onClickTd를 useCallback으로 만드신 이유가 있을까요 ?영상내에서 따로설명이 없으신거같아서요. 다시한번 짚어주세요 !! p.s ) 제가아는 useCallback은 제작한 함수를 재사용하기 위한것이잖아요 ..? 근데 onClickTd 라는 함수를 다른컴포넌트에서 사용안하지 않나요 ...?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
방금 useCallback 질문한 사람입니다!
handler를 사용한 곳을 살펴보니 컴포넌트 props로 함수를 넘겨주더라구요 왜 useCallback을 사용하셨는지 이해했습니다. 한 가지 더 궁금한 점은, 실제 업무에서는 이렇게 props로 넘겨줄때 주로 useCallback을 사용하나요? 저 혼자 프로젝트를 할 땐, props로 넘겨주거나 eslint가 useCallback으로 감싸주라고 할때만 사용하는 편인데 실제로는 언제 쓰는가 너무 궁금합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
회원가입 페이지 만들기 약관동의 useCallback 디펜더시 리스트에 대해서 질문 잠 있습니다.
안녕하십니까. 강의 잘 듣고 있습니다. 이번에 따라 배우면서 2강. 회원가입 페이지 만들기 부분에서 뜬금없이 의문이 생겨서 질문드립니다. useCallback 함수 안에서 사용하는 상태 혹은 props 가 있다면 꼭, deps 배열안에 포함시켜야 된다는 것 입니다. 만약에 deps 배열 안에 함수에서 사용하는 값을 넣지 않게 된다면, 함수 내에서 해당 값들을 참조할때 가장 최신 값을 참조 할 것이라고 보장 할 수 없습니다. 라고 되어있는데 진짜로 변경될 수 있는 상태를 안 넣어주니 제대로 작동을 안하더라구요 const onSubmit= useCallback(()=>{ if(password !== passwordCheck) { setPasswordError(true); return; } if(!term){ console.log("대체 term 이 왜>>>", term); //왜?????? setTermError(true); return; } console.log(id,nickName,password,passwordCheck, term); },[password, passwordCheck,passwordError]); //여기에 term이 들어가야지만 작동되는 이유가.. 위에 보시면, onsubmit 함수에 디펜더시 리스트에 term이 안 들어가면, 약관에 동의하는 부분이 정상적으로 작동이 되지 않는다. 하지만 콘솔에 찍어보면 막상 값은 잘 바뀌는데, 왜 useCallback 에는 작동이 안 되는지 그 원리가 궁금합니다. 질문이 불친절할 수 있지만, 짧게나마 답변해주시면 감사드립니다!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
Custom Hook 부분 질문
import React, { useState, useCallback } from "react"; //custom Hook으로 만들기 export default function (initialValue = null) { console.log("몇번 렌더링?"); const [Value, setValue] = useState(initialValue); const handler = useCallback((e) => { setValue(e.target.value); }, []); return [Value, handler]; } 제가 바르게 이해하고 있다면, useCallback은 필요없지 않은가요? useCallback는 함수를 재정의 하지 않고 , 1. 콜백함수가 호출되면서 2.depth부분이 바뀌었을때의 두 조건이 충족해야 다시 재정의 한다고 알고 있습니다. 위 커스텀훅에서는 [] depth가 비어져있기에 첫 마운트 했을때만 작동하고 어떠한 움직임도 없어야 하기에 함수 내 setValue의 기능을 수행 하지 않는다는 뜻인데, console.log('몇번 렌더링');으로 찍어보니깐 다른 곳에서 useInput 을 사용할때마다 커스텀훅 페이지를 리렌더링 하기때문에 애초에 useCallback이 무의미한 것이 아닌가요? 애초에 다른 모듈에 있기에 useCallback은 의미가 없는게 아닌가 궁금합니다