NavArea.jsx:13 Uncaught TypeError: axiosData is not a function

axios와 같은 기능적 코드를 재사용하기 위해 외부 함수로 만드는 과정을 진행하는 와중에 NavArea.jsx:13 Uncaught TypeError: axiosData is not a function와 같은 오류를 만났다.

axios

function axiosGetData(url, getData) {
  return axios(url, {
    method: "GET",
    data: getData,
  })
    .then((res) => res.data)
    .catch((error) => console.log(error));
}

사용한 코드 - error

  const subLinkData = "./data/nav.json";
  const [data, setData] = useState([]);
  const axiosData = axiosGetData(subLinkData).then((res) => setData(res));
  axiosData();

하지만 아래와 같이 작성하면 오류가 뜨지 않았다.

  const subLinkData = "./data/nav.json";
  const [data, setData] = useState([]);
  axiosGetData(subLinkData).then((res) => setData(res));

그래서 일단은 function으로 변경을 해 아래와 같이 작성했다.

해결한 코드

  const subLinkData = "./data/nav.json";
  const [data, setData] = useState([]);
  function axiosData() {
    axiosGetData(subLinkData).then((res) => setData(res));
  }
  useEffect(() => {
    axiosData();
  }, []);

  // 이렇게도 가능
    useEffect(() => {
    axiosGetData(subLinkData).then((res) => setData(res));
  }, []);

하지만!! 이미 function으로 작성한 코드를 불러올 때, 왜 function으로 사용해야 하는지 이유가 궁금해서 찾아봤는데,
책에 공부한대로에 따르면 변수의 정의는 아래와 같다.

변수

컴퓨터는 연산을 위한 장치와 기억을 위한 장치가 따로 존재하며 연산 후 이를 저장한 곳에서 해당 연산 값을 꺼내올 수 없다. (메모리 주소를 사용하는 것은 오류를 발생할 수 있기 때문에 금지되었다.)

• 하나의 값을 저장하기 위해 확보한 메모리 공간 그자체
• 메모리 공간을 식별하기 위해 붙인 이름
• 값의 위치를 가리키는 상징적인 이름
• 변수 이름을 사용하여 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해 값을 반환

할당

• 변수에 값을 대입하는 것

참조

• 변수에 저장된 값을 읽는 것

따라서 변수는 값을 저장하기 때문에 동작을 말하는 위와 같은 코드는 그대로 사용하는 것이 아닌, 함수로 작성해 실행해야 맞는 코드인 것 같다.