.map()
map은 자바스크립트의 표준 내장 객체이다.
JSX 코드는 React에서 UI에 그려질 html 요소들을 리턴한다.
이런 JSX 코드 안에서도 자바스크립트 문법을 사용할 수 있는 방법이 있다.
다음은 JSX 코드의 html 요소들에 .map()를 적용시킨 모습이다.
props로 받은 items 배열의 모든 데이터 개수 만큼의 요소들을 'ExpenseItem' 컴포넌트의 props로 전달해주고 있다. 이때 'ExpenseItem' 컴포넌트에서는 key, title, amount, date 데이터들을 이용해서 실제 UI에 그려질 요소들을 생산한다.
.map()의 실행 과정을 살펴보면 다음과 같다.
props의 items 배열의 요소를 처음부터 마지막까지 하나씩 꺼낸다. ➡
꺼내진 요소들이 props가 되어 'ExpenseItem' 컴포넌트를 실행한다. ➡
items 배열의 요소의 개수 만큼 실행된다.
이처럼 items 배열의 요소의 개수 만큼 컴포넌트가 실행되어야 하기 때문에 JSX 내부에서 동장하게끔 작성했다.
.filter()
filter는 map처럼 자바스크립트 표준 내장 객체이다.
map처럼 JSX 내부에서 작동하는 방법도 있지만 JSX 외부에서 정의된 변수를 JSX 내부로 가져오는 방법도 있다.
다음은 위의 map을 사용한 컴포넌트의 부모 컴포넌트이다.
위 모습처럼 JSX 밖에서 props.categories 데이터에 filter를 적용하여 변수에 저장한 모습이다. 이는 map처럼 데이터의 요소들이 하나씩 꺼내어질 때마다 컴포넌트를 실행한 것이 아니다. 모든 데이터를 필터링한 결과를 변수에 저장하고, 이 데이터를 prop에 담아서 자식 컴포넌트로 보냈다.
