React Hook 의존성 배열 설정 관련 질문(함수이름을 의존성 리스트로 설정)

Question

React Hook을 학습 중인데, 아래 makeCard()함수 에서[dispatch], [card, removeCard]처럼 값이 아닌 함수명을 의존성 배열에 설정하는 것이 어떤 의미인지 질문드립니다.import {useCallback, useMemo, useEffect} from 'react' import {useSelector, useDispatch} from 'react-redux' import {Icon} from '../../theme/daisyui' import * as D from '../../data' import type {AppState} from '../../store' import * as C from '../../store/cards' import {Title} from '../../components' import Card from './Card' const makeCard = () => D.makeCard(D.randomUUID(), D.makeRandomUser(), D.randomImage(200, 100), '', '', '', '') export default function CardsTest() { const dispatch = useDispatch() const cards = useSelector(({cards}) => cards) const addCard = useCallback(() => { dispatch(C.addCard(makeCard())) }, [dispatch]) const removeCard = useCallback( (id: string) => () => dispatch(C.removeCard(id)), [dispatch] ) const children = useMemo( () => cards.map(card => ( )), [cards, removeCard] ) useEffect(addCard, [addCard]) return (

CardsTest

{children}

) }출처 : 리액트 모던 웹 개발 with 타입스크립트

songline · Accepted Answer

3줄 요약함수도 일종의 객체이자 값. 다른 위치에서 정의된 함수는 다른 객체임.useCallback이나 useMemo는 새로 렌더링 되어도 기존 값을 이용해 정의된 함수, 그걸 실행해 반환된 값을 기억하여 쓸 데 없이 재정의/실행이 야기되지 않도록 하는 함수.때문에 참조하는 외부 변수의 값이 변화했는데도 갱신되지 않는 문제가 있을 수 있는데, 여기에서 외부 변수에는 함수도 포함됨. 즉, 함수가 새걸로 바뀌어도 갱신해주어야 하니까 이름을 넣어주는 것.같은 내용의 함수는 언제가 같다고 생각하기 쉽지만 실제로는 아무리 내용이 같아도 다른 위치에서 정의된 함수는 다른 함수입니다.const func1 &#61; () &#61;> { console.log('a'); } const func2 &#61; () &#61;> { console.log('a'); } console.log(&#96;func1() &#61;&#61;&#61; func2(): ${func1() &#61;&#61;&#61; func2()}&#96;); console.log(&#96;func1 &#61;&#61;&#61; func2: ${func1 &#61;&#61;&#61; func2}&#96;);위 코드를 실행해보면 분명 func1과 func2는 똑같은 내용을 가지고 출력을 비교하면 똑같다 나오지만, 막상 함수 자체를 비교해보면 다르다고 나오죠.다음으로 저번 답변(OKKY - React useState 셀렉트 박스 선택값 설정 관련)에서 말씀드린 것처럼 javascript는 렉시컬 스코프를 따르고, 함수는 자신이 호출된 곳이 아니라 선언된 곳을 기준으로 외부 변수를 탐색하며, useCallback은 리렌더링 되는 와중에도 함수가 재정의되지 않도록 하여 이전 렌더링 시점의 함수를 그대로 쓰게 만들고, 이는 해당 재탕 함수를 호출할 때 현재 시점의 변수가 아니라 이전 렌더링 시점의 변수를 참조하게 하는 현상이 있습니다.이를 회피하기 위해 아래와 같이 의존 배열을 추가하여 참조해야 하는 외부 변수(예시에서는 dispatch라는 함수)의 값이 변화하면 기존 함수를 버리고 새로 정의하도록 구성할 수 있죠. const addCard &#61; useCallback(() &#61;> { dispatch(C.addCard(makeCard())) }, [dispatch]) const children &#61; useMemo( () &#61;> cards.map(card &#61;> ( <Card key&#61;{card.uuid} card&#61;{card} onRemove&#61;{removeCard(card.uuid)} /> )), [cards, removeCard] )이 부분을 보기 이전에 useMemo에 대해 간략히 설명하면 const a &#61; func(k) 라는 코드가 있을 때 매번 렌더링 될 때마다 같은 값을 반환하기 위해 쓸 데 없는 연산을 반복하는 것을 방지하기 위해 함수를 실행하여 반환된 값을 기억하고 다시 함수가 호출되었을 때 만약 k의 값이 바뀌지 않으면 함수를 실행하는 대신 이전에 기억한 값을 그대로 반환해 효율을 높이는 함수입니다. const a &#61; useMemo((k) &#61;> { return func(k); }, [k]); 이런 식으로 사용하죠.여튼 그렇다보니 이전 질문에서 다룬 useCallback과 비슷한 현상이 나타납니다. 만약 func라는 함수가 자기 외부의 함수나 데이터를 끌어다 사용했다면 그렇게 반환된 값은 그 시점의 외부 변수등에 연관되게 되는데, 리렌더링되고 외부 변수가 새걸로 바뀌었는데도 함수를 새로 정의해서 다시 실행하지 않고 기존 값을 그대로 사용한다면 맞지 않겠죠. 그걸 방지하기 위해 이러한 변수의 값이 달라지면 이전 값은 버리고 새로 함수를 정의해서 실행해라라고 표현하는 것이 useMemo의 두번째 인자로 제공되는 의존 배열이라는 것입니다.여기에 함수의 이름이 들어가는 이유는 값을 얻을 때 그 외부 함수를 사용했기 때문으로, 그 때 사용한 함수가 새걸로 바뀌었는데 그걸 반영해서 값을 새로 계산하지 않으면 사실상 함수를 새로 갱신한 의미가 없겠죠. 그래서 함수의 이름을 넣어줌으로써 이 함수가 새것으로 바뀌었는지 아니면 그냥 옛날 그대로라 딱히 갱신할 필요가 없는지를 확인하도록 한 것입니다.참고로 앞서 말했듯 함수는 아무리 그 내용이 같아도 다른 장소에서 정의된 함수는 그냥 다른 함수입니다. 외부의 변수를 참조했는지 여부 같은건 무관하고 그냥 다른 위치에서 정의된 함수는 다른 함수에요.

개발.. · Answer

자바스크립트에서는 함수도 값인 일급객체입니다 ㅎㅎ!

으악 또 · Answer

이벤트 연결하는 거 같음 까먹었네 다시 봐야 겠음 ㅋㅋ

React Hook 의존성 배열 설정 관련 질문(함수이름을 의존성 리스트로 설정)

3개의 답변

Q&A 목록