Typescript 에러(?)

문제의 코드

  const [arts, setArts] = useState<obj[]>([]);

  interface obj {
    author?: string;
    download_url?: string;
    height?: number;
    id?: string;
    url?: string;
    width?: number;
  }

 return (
    <div>
      {arts.length > 0 && !isLoading ? (
        {arts.map((el:obj)=>
        <div>
          <div>데이터 목록</div>
          <div>작가 명</div>
          <div>{el.author}</div>
        </div>)}
      ) : (
        <p>불러온 데이터가 없습니다</p>
      )}
    </div>
  );
};

arts배열을 map메서드로 돌려주는 부분에서 에러가 났었다.
위 코드는 styled-component와 typescript를 같이쓰면 에러가 난다는 글을 주워읽어서 div로만 바꾼 상태다.

No overload matches this call. ts(2769)

overloaded function에서 지정한 매개변수들의 타입 형식과 실제 전달한 인자의 타입 형식이 일치하지 않으면 뜨는 에러이다.

styled-component와 typescript를 같이쓰면 에러가 난다고 하는데 그래서 그런가?
아니었다. 대신 styled-component가 아닌 일반적인 div 태그로 바꿨더니 에러가 바뀌었다.

Type 'Element|{data:obj[];"":any;}is not assignable to type 'ReactNode'. ts(2322)

2322번 관련 구글링을 어제부터 계속 했는데 안나와서 내 머릿속은 ???였다.
arts를 만들 때 useState에 타입도 맞게 지정했다.
react 버전도 바꿔보고 별 짓을 다했는데 흑흑
원인은 arts가 아니었다. 삼항 연산자가 문제였다. 삼항 연산자를 지우니까 arts부분의 밑줄이 사라졌다.

바꾼 코드

  return (
    <div>
      {arts.length > 0 ? (
        arts.map((el: obj) => (
          <div>
            <div>데이터 목록</div>
            <div>작가 명</div>
            <div>{el.author}</div>
          </div>
        ))
      ) : (
        <p>불러온 데이터가 없습니다</p>
      )}
    </div>
  );
};

이럴수가 {}를 잘못 적어서 type error 삽질을 열심히 했었다니!!!!
그래서 에러에 'Element|{data:obj[];"":any;}이렇게 떴구나 ㅎ..

오늘의 교훈

타입 에러가 일어났지만 타입이 아니라 그냥 jsx문법을 어기는 등 다른 곳에서 에러가 일어나서 타입스크립트가 타입 에러라고 인식할 가능성도 있다는걸 잊지말자