리액트를 다루는 기술을 참고하여 기술하였습니다.
개발을 하다보면 반복되는 코드를 작성할때가 존재한다.
리액트에서는 for 반복문을 사용할수가 없기때문에 map() 함수를 사용해서 이를 효율적으로 관리하게 된다.
자바스크립트 배열의 map()함수
맵함수를 사용하기 위한 기본적인 형태는 다음과 같다.
배열.map(function(a){
return '12345'})위와같이 입력하면 배열의 개수만큼 반복한다.
a라는 파라미터는 배열에 있는 자료를 앞에서 부터 하나씩 가져온다.
return문 안에 있는 것은 배열 a자료 a대신 array에 넣어줄 값을 반환해준다.
map의 반환값은 배열이다.
컴포넌트를 다시 쓰고 싶을때
{
배열.map(function(){
return(<컴포넌트>)});
}이렇게 하면 계속해서 배열의 개수만큼 컴포넌트를 만들게 된다. 이때, 파라미터로 최대 2개를 보낼수 있다.
배열.map(function(a,i){에서 a는 배열의 자료를 하나씩 받아오는것이고,
i는 반복문이 한번씩 돌때 0부터 1씩 늘게 되는 값을 반환한다.
key값을 포함한 map()함수
map()함수의 경우에는 맨앞에서 부터 하나씩 순차적으로 확인하고 비교하기 때문에 시간이 많이 걸리지만, key값을 가지면 한번에 접근할수 있기 때문에 빠르게 접근 가능하다.
이처럼 key값을 포함하게 map()함수를 넣기 위해서는 다음과 같이 코드를 작성한다.
<태그 key={키값}>{map돌때 받는값}</태그>
- 키값은 유일해야 한다.
filter()
어떤 조건을 넣어주면, 그 조건에 해당되는 배열값만을 반환하게 한다.
즉 배열을 입력받고, 배열을 반환한다.
사용하는 코드는 다음과 같다.
const 배열1= [1,2,3,4,5,6]
const 배열2= 배열1.filter(배열1=> 배열1>6)
왜 filter이나, map과 같은 함수를 사용하는가?
그 대답은 리액트의 불변성을 지키기 위해서 이다.
불변성이 무었일까?
Uploaded by N2T