화살표 함수 오류 해결

간단한 리액트 프로젝트를 만들면서 map 함수를 사용했는데 코드가 작동하지 않는 문제 발생했다

 

 

//내가 작성한 기존 코드

{cards.map((card) => {
      <Card card={card} />;
    })}

 

 

에러 메세지는 뜨지 않았는데 코드가 동작하지 않아서 한참을 고민하다가 map 함수와 화살표 함수에 대해서

다시 찾아봤는데 범인은 화살표 함수였다

 

 

https://ko.javascript.info/arrow-functions-basics

화살표 함수 기본

 

 

 

화살표 함수를 중괄호랑 함께 작성하려면 반드시 retrun을 사용해 주어야 한다!!

 

 

// 중괄호 사용할 경우

 {cards.map((card) => {
      return <Card card={card} />;
    })}
    
 
 
// 중괄호 사용 안 할 경우

 {cards.map((card) => (
      <Card card={card} />
    ))}

 

 

 

한 줄 요약 : 

화살표 함수 사용시 중괄호 쓸거면 무조건 return과 같이 사용하자!!!!