[React.js] 리액트 반복문 map() 함수

리액트에서 여러 컴포넌트를 불러올 때는 map() 함수를 사용할 수 있다.

이 map 함수는 어떤 배열에 대해 각각 정해진 함수를 실행시켜주는 것이고, forEach함수와 비슷한 것 같다.

물론 map이 아닌 단순 반복으로도 컴포넌트들을 가져와서 사용할 수는 있다.

코드의 단순반복으로 여러 컴포넌트 사용

 

그럼에도 map함수를 사용하는 이유는 다음과 같다.

1. 코드는 짧고 간결할수록 좋다.

2. 실제 데이터는 사전에 한번에 정의하여 사용할 수가 없다.

2번 예시의 이유가 사실 더 큰데, 실제로 영화리스트를 만든다고 하면, 사용하면서 새로운 영화들이 계속 추가되어야 할 것이다. 하지만 그 때마다 새로 Movie 컴포넌트를 추가하여 출력한다고 할 경우, 불필요한 코드 수정 요소가 생길 수 있다. 따라서 배열을 통해 영화 데이터들을 관리하면서, map() 함수를 이용한다면, 영화 객체를 추가만 하고 객체 사용부분에서는 코드를 수정하지 않아도 된다.

사실 말이 길지, 다른 모든 언어에서 반복문을 사용하는 이유와 동일하다.

 

map을 사용했을 경우.

지금은 map을 사용하지 않는게 코드가 더 짧지만, 후에 데이터를 추가하거나 삭제하는 데 있어서 훨씬 편리한 사용성을 보여줄 것이라 생각된다.

map 함수는 어떤 iterable한 객체(여기서는 배열)의 내장함수로 사용되며, 각 item에 대해 함수를 호출하는 방식으로 사용한다. 위 사진에서 movie가 오브젝트이고, 해당 object의 props를 참조하여 구현한 것이다.