Type 'void[]' is not assignable to type 'ReactNode'. - 에러 해결

한글로 직역하면 'void[]' 형식은 'ReactNode' 형식에 할당할 수 없습니다. 의 오류 입니다.

 

Javascript를 사용해서 개발을 할 때에는 이런 식으로 작성해도 에러가 나지 않아서 그대로 작성을 했는데

해당 오류가 발생했다..

 

찾아보니 Typescript에서는 map 내부의 콜백에서 화살표 함수(=>)를 사용할 때, {} 블록을 사용하면 반드시 return 문을 사용하여 값을 반환해야 합니다.

 

[원래 코드]

const renderNotes = () => {
	return notes.map(note => { //이 화살표 함수 안에는 return 값 없음!!!
  		<Notes key={ note.id } note={ note } />
	})
}

 

[고친 코드]

const renderNotes = () => {
	return notes.map(note => { // => { } 를 사용하는 모든 곳에 return 값 주기!! 
		return <Notes key={ note.id } note={ note } />
	})
}