🪁react/react 이론정리

map 함수는 콜백 함수 내에서 반환값을 요구(return값이 꼭필요)

하얀성 2024. 2. 22. 09:39

그저 작은 오류이지만, 잘 모르면 나중에 큰일나는 얘기다. 그래서 문서화한다.

 

아래는 map 함수의 반환값인 return을 지정해주지 않았기 때문에 undefined로 반환하게 된다.

return문을 map 함수에 필히 넣어야 하는 이유이다.

return (
    <div className="App">
      <div>
        <h2>Notes:</h2>
        {notes &&
          notes.map((note) => {
            <div key={note._id}>
              <h3>{note.title}</h3>
            </div>;
          })}
      </div>
    </div>
  );

수정코드

return (
    <div className="App">
      <div>
        <h2>Notes:</h2>
        {notes &&
          notes.map((note) => {
            return (
              <div key={note._id}>
                <h3>{note.title}</h3>
              </div>
            );
          })}
      </div>
    </div>
  );

 

출력이 잘된다.


https://www.youtube.com/watch?v=jjuXRSb1UT8&list=PL-LRDpVN2fZA-1igOQ6PDcqfBjS-vaC7w&index=3