2021/04/25 2

리액트(ReactJS) 성능 최적화를 해보자 - shouldComponentUpdate()

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트로 기능을 구현하다보면 값의 변형이 거의 없는 요소가 호출되는 불필요한 경우가 있다. 이런 경우 렌더링 성능이 떨어지게 되므로 좋지 않다. 따라서, 조건을 걸고 특정한 경우에만 호출 되도록 shouldComponentUpdate()를 사용한다. 해당 메소드는 오직 성능 최적화를 위해서만 사용한다. shouldComponentUpdate(newProps, newState) 해당 메소드의 기본값은 true이다. 조건을 통해 false로 지정하여 특정 경우에 호출되지 않도록 설정하면 된다. 우선, 위 메소드를 적용하기 전을 살펴보자 관리자 도구를 보면 홈페이지의 네비게이션 역할을 하는 TOC 컴포넌트의 렌더 함수도..

React 2021.04.25

배열에 데이터를 추가하는 방법 - Array push()와 concat()

임의의 배열에 새로운 데이터를 추가하는 방법으로 자주 사용되는 push와 concat 의 특징과 차이점을 알아보자 push( ) push는 기존 배열에 새로운 데이터를 추가하는 방법이다. 데이터 추가 전과 후를 비교하면 true var arr1 = [1,2,3]; arr1.push(4); console.log(arr1); // 1,2,3,4 출력 var arr2 = arr1.push(4); console.log(arr1, arr2); // 1,2,3,4 와 1,2,3,4 출력 concat( ) concat은 기존 배열을 복사한 후, 새로운 데이터를 추가하는 방법이다. 데이터 추가 전과 후를 비교하면 false var arr1 = [1,2,3]; arr1.concat(4); console.log(arr1)..

Javascript 2021.04.25