동물의 숲 정보 웹페이지 만들기 2 - 에러 기록 : Property 'map' does not exist on type 'never' & Argument of type 'null' ~

지난 번에 이 프로젝트를 통째로 타입스크립트 + next.js로 옮기는 작업을 했다. ( + tailwind)

그 중에 한동안 해결이 안되던 오류가 있었는데...

 

Property 'map' does not exist on type 'never'

 

 

진짜 나를 한동안 피곤하게 만들었음.

인터넷에 나와있는 모든 방법을 총 동원했으나 이곳이 해결이 안되면 저곳이 빵구가 나고 .... 그랬는데

결국 조금~~은 허무한 해결이었다. 그래도 진짜 너무 속시원

 

일단 코드를 보면,

export default function VillagerList() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const URL = "https://api.nookipedia.com/villagers";

  const VillagersData = async () => {
    try {
      setData(null);
      setError(null);
      const response = await axios.get(URL, {
        headers: {
          "X-API-KEY": process.env.NEXT_PUBLIC_APP_API_KEY,
          "Accept-Version": "1.1.0",
        },
      });
      setData(response.data);
    } catch (e: any) {
      setError(e);
    }
  };

  useEffect(() => {
    VillagersData();
  }, []);
  
  
  return (
    <>
      <AnimalHeader />
      <Box>
        {data.map((item, idx) => (
    .....

	)
}

이 코드였고, 저 return 부분 map에서 계속 오류가 나는 것이어따..

 

 

원인 🤷🏻‍♀️

map 함수가 never 타입에 존재하지 않는다는 의미

never 타입은 보통 타입 추론이 실패했을 때 발생하는 타입인데, 일반적으로 초기 상태로 인해 발생한다.

처음 실행시에 data 상태가 null로 초기화되고, 데이터를 받아와서 setData로 업데이트하기 전까지는 data가 null이므로 map 함수를 호출할 수 없는 것이다.

 

 

해결 방법  🙆🏻‍♀️

data가 null인 경우에 대한 처리를 해주어야 한다.

예를 들어, 로딩 중이거나 데이터가 없을 때 특정 메시지를 표시하거나, data가 유효한 값으로 업데이트될 때까지 대기하도록 하는 것이다.

 

 

 

첫번째로 이용했던 방법은,

if (data === null) { 
	return <div>Loading...</div>;
 }

를 추가해, data가 null 인 경우 대기를 걸어놓는 작업이었다.

그럼에도 계속 오류가 났다..

 

그래서 두번째로는,

data가 null 일 경우 map이 돌아가지 않기 때문에, data가 있을 때에 실행되도록 다시 조건을 달아 주었다.

{data && data.map((item: any) => {
            return (
        ....

data && data.map을 사용하여 data가 유효한 값인 경우에만 map 함수를 호출하도록 해주었다..

이렇게 수정하면 data가 null인 경우에는 map 함수를 호출하지 않으므로 오류가 발생하지 않아야 하는데.... ^^

 

 

세번째로, 타입을 바꿔주었다. 파워 구글링..

 const [data, setData] = useState<any[]>(null);

이렇게 추가해주었더니 map에는 에러가 안나지만 또 다른 에러를 맞았다!

 

 

 

Argument of type 'null' is not assignable to parameter of type 'any[] | (() => any[])'.

 

 

 

ㅎ_ㅎ 나한테 왜그러는거얌

 

원인 🤷🏻‍♀️

data 변수의 초깃값으로 null을 할당하려고 할 때 발생

useState 훅은 초깃값으로 null 대신 빈 배열 []을 사용해야 합니다.

 

 

해결 방법  🙆🏻‍♀️

타입스크립트에서 useState를 사용할 때 제네릭 타입을 명시하면 초깃값을 지정할 수 있는데,

이를 이용해서 data 의 초깃값을 빈 배열로 지정!

 

 

const [data, setData] = useState<any[]>([]); // 초기값을 빈 배열로 설정
..

const VillagersData = async () => {
    try {
      setData([]); // 데이터 요청 전에 빈 배열로 초기화
      setError(null);
      
    ...
    

 if (data.length === 0) { // 빈 배열로 체크
    return <div>Loading...</div>;
  }

data가 null 인 것 체크할 때도, 배열이기때문에 length로 체크까지 해주면,..

null~ 오류는 해결이 된다 ㅠ.ㅠ