Array.map is not a function 에러

배열이 빈 배열일 경우 나타난다. 빈 배열의 boolean 값이 false 인줄 알았는데 알고보니 true 였다. 이럴땐 Array.length 를 사용하자.

잘못된 예시

const todoList = (todos) => {
    console.log(Boolean(todos));
    return(
        <div>
            <ul>
                {todos && todos.map((todo,index) => <TodoItem todo={todo} key={index}/>)}
            </ul>
        </div>
    )
}

올바른 예시

const todoList = (todos) => {
    console.log(Boolean(todos));
    return(
        <div>
            <ul>
                {todos.length && todos.map((todo,index) => <TodoItem todo={todo} key={index}/>)}
            </ul>
        </div>
    )
}