[React] Intro 오답노트

📝 왜 맞았는지 몰라서 쓰는 오답노트

에디터에 작성하고 확인해보니 답이라고 예상했던 B와 D가 아닌.. 정답이라고 확신했던 A이가 오답으로 나왔다. 왜 그럴까?

문제

다음은 render() 메서드가 실행 되면서 출력된 화면입니다. 해당 화면을 출력하기 위해서 작성한 코드 중 틀린 것을 고르세요. (key 속성은 고려하지 않습니다.)

결과
토이스토리
해리포터
스타워즈

//옵션 A ✅
let movies = ["토이스토리", "해리포터", "스타워즈"];
let viewMovies = () =>  {
  return movies.map((movie) => {
    return <p>{movie}</p>;
  });
};

return (
  <div>
    {viewMovies}
  </div>
);

//옵션 B
let movies = ["토이스토리", "해리포터", "스타워즈"];
let viewMovies = movies.map((movie) => {
    return <p>{movie}</p>;
  });
};

return (
  <div>
    {viewMovies}
  </div>
);

//옵션 C
let movies = ["토이스토리", "해리포터", "스타워즈"];

return (
  <div>
    {movies.map((movie) => {
      return <p>{movie}</p>;
    })} 
  </div>
);

//옵션 D
let movies = ["토이스토리", "해리포터", "스타워즈"];

return (
  <div>
    {movies.map((movie) => (
      <p>{movie}</p>;
    ))} 
  </div>
);

풀이

• 옵션 A의 경우, viewLangs 가 화살표 함수 표현식으로 선언되어 있기 때문에 함수를 호출하는 연산자 () 를 써야 작동하기 때문에 {viewLangs()} 라고 작성해야 제대로 작동한다.
• 옵션 B는 map 함수의 호출 결과를 viewMovies 변수에 담아서 호출하는 방법을 사용했다.
• 옵션 C는 중괄호{}를 사용하여 JavaScript를 내부에 표현해 주었기 때문에 올바르게 작동한다. 주의할 점은 화살표 함수에서 중괄호{}를 쓰게 되면 꼭 return 이 존재해야 한다. return 이 없다면 undefined 를 반환한다.
• 옵션 D의 경우, 화살표 함수에서 () 를 사용하면 () 안의 값이 return 값이 된다.