[React] JSX에서 요소 반환 (JSX에서 map으로 렌더링)

투두리스트를 만드는중에 filteredTodos 배열을 map을 이용하여 하나씩 TodoItem이라는 컴포넌트로 props로 전달하여 렌더링하려고 하였다!

        {filteredTodos.map((todo) => {
            <TodoItem
              key={todo.id}
              content={todo.content}
              date={todo.date}
              isDone={todo.isDone}
            />
        })}

맨 처음에는 map(()=>{})형식으로 작성했었는데 중괄호부분이 렌더링이 안됐다.

        {filteredTodos.map((todo) => 
            <TodoItem
              key={todo.id}
              content={todo.content}
              date={todo.date}
              isDone={todo.isDone}
            />
        )}

그래서 이렇게 .map(()=>반환값) 형식으로 작성했는데, prettier가 .map(()=>())형식으로 바꿔주었다.

그래서 왜 그런가 찾아보니 JSX에서 요소를 반환할 때 사용하는 화살표 함수의 반환 방식이 있다고 한다!!

JSX에서 요소를 반환할때, 화살표 함수의 반환 방식을 결정하는 법

1. {} + return을 작성해서 명시적 반환 (여러개를 반환하는 경우에는 {return ()}

        {filteredTodos.map((todo) => {
            return <TodoItem
              key={todo.id}
              content={todo.content}
              date={todo.date}
              isDone={todo.isDone}
            />
        })}

2. ()를 사용해서 반환

        {filteredTodos.map((todo) => (
             <TodoItem
              key={todo.id}
              content={todo.content}
              date={todo.date}
              isDone={todo.isDone}
            />
        ))}