[react, type] Uncaught TypeError: local.map is not a function

리액트와 타입스크립트를 짬뽕해서 프로젝트를 만들어 보던 중 부모 컴포넌트로 부터 state 를 전달받아 state. map 형태로
리스트를 그려주려 했는데, 뜬금없이 타입 에러가 떳다.

그건 Uncaught TypeError: local.map is not a function 였는데, 이에 대해 검색해보니 map이 전달받은 local 이 배열이 아닌 경우에 띄워주는 에러 메시지 라고 하더라

( 즉, 배열이 아닌 것에 map() 함수로 접근하니 local.map()는 함수가 아니라고 잔소리를 한 것이다.),

그래서 해결 책으로 아래의 형식으로 map 이 전달 받은 것이 배열이면 map 을 실행하고, 아니라면 null을 반환하도록 삼항연산식 을 적용 했더니 무사히 해결 되었다

(근데 local을 출력 해보면 배열이 분명한데, 왜 배열이 아니라고 한 걸까? 타입스크립트를 적용했을 때 생긴 문제이니까 분명 타입 설정을 잘못한 것일수도 있겠다. 한 번 확인해봐야 겠다)

 

=> 초기에 컴포넌트가 랜더링 될 당시에는 Array 데이터가 존재하지 않는 상태이기 때문에 발생하는 것이라 하더라. 그래서 조건 형태로 받아온 데이터가 확인될 때 코드가 실행되도록 코드를 작성함으로써 이 문제를 해결하는 것이다).

Array.isArray(local)?  코드 : null

참고로 Array.isArray( 데이터 ) 는 ( )에 들어간 데이터가 배열인지 아닌지를 확인해주는 함수이다.

interface ButtonWeaType{
    local:string[]
    setLocal:Function
        
    }
const ButtonWea:React.FC<ButtonWeaType>= ({local,setLocal}) =>{
 
 
    return (
       <div className='button'>
            <h4>주요 지역 날씨</h4>
            <div className='btn'>

            //local 이 배열이라면 map 함수를 실행하고, 아니라면 null 을 반환한다.
            {Array.isArray(local)
            ? local.map((local,i:number)=>{
                return (
                    <Button
                        onClick={()=>{
                            setLocal(local) 
                             }
                        } 
                        key={i} 
                        variant="dark">{local}
                    </Button>
                )
              }) : null
            }
            </div>
      </div>
    )
}