에러가 안나는데 동작을 안하는 이유 - () VS {}

 

 

벌써 몇 번을 이 문제를 가지고 시간낭비를 해놓고서 또 삽질을 해버린 삽질 전문가...

 

{expenses.map(({ date, desc, amount, payer }) => {
  <tr>
    <td>{date}</td>
    <td>{desc}</td>
    <td>{payer}</td>
    <td>{parseInt(amount)}원</td>
  </tr>;
})}

 

아무리봐도 코드에 문제도 없고 콘솔에 찍어봐도 깨끗한데 동작이 되질 않는다.

입력한 값을 콘솔로 찍어보면 나오는데 저장된 상태를 불러오려고 하니 undefined가 반환되서 상태관리를 잘못했나? 싶어

다른 곳에서 한참 시간을 낭비했다. 

 

이유는?

간단했다. 냅다 {} 를 사용해버려서 생긴 문제. ()로 바꿔주니 간단하게 해결됐다. 

 

이 둘의 차이를 정리해보자.

 

{ } 

{expenses.map(({ date, desc, amount, payer }) => {
  return (
    <tr>
      <td>{date}</td>
      <td>{desc}</td>
      <td>{payer}</td>
      <td>{parseInt(amount)}원</td>
    </tr>
  );
})}

• JavaScript 코드 블록 또는 표현식을 의미한다.
• { }를 사용하면 return 키워드를 사용하여 JSX 요소를 반환해야한다.
• 그렇지 않으면 undefined를 반환하게 되고 아무것도 렌더링 되지 않는다.

 

( )

{expenses.map(({ date, desc, amount, payer }) => (
  <tr>
    <td>{date}</td>
    <td>{desc}</td>
    <td>{payer}</td>
    <td>{parseInt(amount)}원</td>
  </tr>
))}

• 화살표 함수 내에서 사용하면 그 안의 표현식이 암시적으로 반환된다.
• JSX 안에서 사용하면 자동으로 반환되므로 return 키워드를 명시할 필요가 없다.

 

결국 데이터가 테이블에 렌더링 되지 않았던 이유는 { }를 사용하고서 return 키워드를 생략했기 때문이었다. 

간결하게 사용하기 위해 ( )로 바꿔주고 문제는 해결했다. 

 

다른 사람들은 이런 문제로 소중한 30분의 시간을 낭비하지 않길 바라며... ㅎㅎ