인프런 커뮤니티 질문&답변

ReferenceError: Cannot access 'friendsWithAgeShowLimit' before initialization

  14 | ] = useSelector((state) => {
  15 |   const { ageLimit, showLimit, friends } = state.friend;
  16 |   const friendsWithAgeLimit = friends.filter((item) => item.age <= ageLimit);
> 17 |   return [
     | ^  18 |     ageLimit,
  19 |     showLimit,
  20 |     friendsWithAgeLimit,

이렇게 에러가 났는데요. 

혼자서 찾아봤는데도 원인을 못 찾았습니다.

import 할 때 js 확장자 다 없이 했고

밑에 분처럼 node_modules와 package_lock.json 삭제 후 다시 install 했는데도 계속 같은 에러가 나고 있습니다. 

짐작가시는 원인이 있으실까요? 

혹시 몰라서 FriendMain.js  코드 첨부합니다.

import { getNextFriend } from "../../common/mockData";
import { addFriend, setAgeLimit, setShowLimit } from "../state";
import FriendList from "../component/FriendList";
import NumberSelect from "../component/NumberSelect";
import { shallowEqual, useSelector, useDispatch } from "react-redux";
import { MAX_AGE_LIMIT, MAX_SHOW_LIMIT } from "../common";

export default function FriendMain() {
  const [
    ageLimit,
    showLimit,
    friendsWithAgeLimit,
    friendsWithAgeShowLimit,
  ] = useSelector((state) => {
    const { ageLimit, showLimit, friends } = state.friend;
    const friendsWithAgeLimit = friends.filter((item) => item.age <= ageLimit);
    return [
      ageLimit,
      showLimit,
      friendsWithAgeLimit,
      friendsWithAgeShowLimit.slice(0, showLimit),
    ];
  }, shallowEqual);
  const dispatch = useDispatch();

  function onAdd() {
    const friend = getNextFriend();
    dispatch(addFriend(friend));
  }

  return (
    <div>
      <button onClick={onAdd}>친구 추가</button>
      <NumberSelect
        onChange={(v) => dispatch(setAgeLimit(v))}
        value={ageLimit}
        options={AGE_LIMIT_OPTIONS}
        postfix="세 이하만 보기"
      />
      <FriendList friends={friendsWithAgeLimit} />
      <NumberSelect
        onChange={(v) => dispatch(setShowLimit(v))}
        value={showLimit}
        options={SHOW_LIMIT_OPTIONS}
        postfix="명 이하만 보기(연령 제한 적용)"
      />
      <FriendList friends={friendsWithAgeShowLimit} />
    </div>
  );
}

const AGE_LIMIT_OPTIONS = [15, 20, 25, MAX_AGE_LIMIT];
const SHOW_LIMIT_OPTIONS = [2, 4, 6, MAX_SHOW_LIMIT];