[React] 자주 쓰는 리액트 함수 정리

1. map

≫ 반복 함수 배열로 리턴한다

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

 

2. memo

≫ 컴퍼넌트가 React.memo()로 래핑 될 때, React는 컴퍼넌트를 렌더링하고 결과를 메모한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모된 내용을 재사용한다

≫ 같은 props로 자주 렌더링이 일어나는 컴포넌트에 사용한다

export function List({ title, date }) {
  return (
    <div>
      <div>title: {title}</div>
      <div>date: {date}</div>
    </div>
  );
}

export const ListMemo = React.memo(List);

 

3. promise

≫ 비동기 작업을 조금 더 편하게 처리 할 수 있도록 하는 기능

≫ 성공 할 때에는 resolve 를 호출, 실패할 때에는 reject 를 호출

≫ 작업후에 다른 작업을 할 때에는 Promise 뒤에 .then()을 붙여준다

const myPromise = new Promise((resolve, reject) => {
});

 

4. find

≫ 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 

≫ 그런 요소가 없다면 undefined를 반환한다.

const aaa = [5, 12, 8, 130, 44];
const found = aaa.find(element => element > 10);
console.log(found); //12

 

5. dispatch

≫ 현재 이벤트를 발생시키는 함수

≫ dispatch가 작동하면서 action을 따라간다

const GET_LISTS = 'GET_LISTS';
var fnObj = {
	btnClick : function(arg) {
		return arg;
	},
	dispatch : function(state, action) {
		switch (action.type) {
          // 조회
          case GET_LISTS:
			return {
              ...state,
              lists: {
                loading: true,
                data: null,
                error: null
              }
            };
        }
    }
}

 

6. filter

≫ 배열안에서 조건을 통해 원하는 값만 추출하여 배열로 반환한다.

let meta = [1,2,3,4,5,6];
let metaFilter = meta.filter(mVal => mVal > 3)
console.log(metaFilter) //[4,5,6]