Programming/React
-
컴포넌트 최적화Programming/React 2020. 3. 23. 11:06
렌더링할 데이터가 많아지면, 그만큼 화면을 그리는데 시간이 많이 걸리게 된다. 리스트형 컴포넌트에서 100개이상의 컴포넌트를 렌더링 해야하고, 업데이트가 자주 발생한다면 꼭 필요한 작업이다. 개발자 도구로 소요되는 시간 확인하기 동작에 따른 걸리는 시간을 확인하기 위해서는, 크롬 개발자 도구 performance 탭에서 record Button 을 눌러 동작을 실행한 다음, 동작이 완료되었으면 Stop Button 을 눌러 기록된 화면에서 확인가능하다. 컴포넌트가 렌더링하는 상황 자신이 전달받은 props 가 변경될 때 자신의 state 가 바뀔때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수가 실행될 때 최적화 방법 1. 라이프사이클 함수 활용(shouldComponentUpdate) 함수형..
-
리덕스] 개념 이해Programming/React 2020. 2. 23. 11:23
리덕스 상태 관리 로직을 컴포넌트 밖에서 처리 함으로써, state 를 보다 효율적으로 관리 하기위한 라이브러리. store 라는 객체 내부에 상태를 담고, 액션이 디스패치 되었을때 reducer 함수를 이용하여 상태를 변화시킨다. 리액트와 리덕스는 별개로 동작하므로, 함께 사용이 가능하다. 리덕스는 편리하기는 하나 모든 state 를 리덕스로 처리하게 되면 상태값, 액션, 리듀서를 모두 정의해야 하므로 귀찮아지는 단점이 있다. 그래서, 서버 통신이 필요하는 것과 같은 유형의 작업을 주로 리덕스로 구현하고 다른 자잘한 state 는 리액트로 사용하는 것이 좋다. 리덕스의 한계 액션을 실행하면 바로 실행한다.(동기) 특정시간이나 특정동작 이후에 액션을 끼워넣을 수 없다.(예. 로그인같은 서버와 통신이 필요..