KBennyCC

React.js 01.13. React Redux 리액트로 프로젝트에서는 최상위 컴포넌트에서 상태 관리 로직이 너무 많아져 코드가 길어지고 가독성이 떨어진다.  불필요한 리렌더링을 방지하기 위해서 하위 컴포넌트에서 shouldComponentUpdate를 구현하여 방지한다 하더라도 프로젝트가 복잡해질 경우 여러 컴포넌트를 거쳐 porps를 전달하는 것은 비효율적이다.  작업을 진행하면서 헷갈릴 수 있고, 실제로 컴포넌트 자기 자신은 필요하지 않은데 하위 컴포넌트 때문에 필요한 props 개수가 많아지기 때문이다. 추가로 형제 컴포넌트에서 불필요한 렌더링이 일어나기 때문에 이 역시 상황에 따라 방지를 해주어야한다. 이러한 문제점들은 리덕스라는 상태 관리 도구를 사용하면 매끄럽게 해결할 수 있다. 01.13.1. Redux 개념 상태를 더 효율적으로 관리하는데 사용하는 상태 관리 라이브러리이다. 리덕스는 상태 관리의 로직을 컴포넌트 밖에서 처리하는 것이다. 리덕스를 사용하면 스토어(store)라는 객체 내부에 상태를 담게 된다. 리덕스 적용 구조 리덕스를 사용하면 스토어에서 모든 상태 관리가 일어난다. 상태에 어떤 변화를 일으켜야 할 때는 액션(action)을 스토어에 전달한다.  액션은 객체 형태로 되어 있으며, 상태를 변화시킬 때 이 객체를 참조하여 변화를 일으킨다. 액션을 전달하는 과정을 디스패치(dispatch)라고 한다. 스토어가 액션을 받으면 리듀서(reducer)가 전달받은 액션을 기반으로 상태를 어떻게 변경시켜야할지 정한다. 액션을 처리하면 새 상태를 스토어에 저장한다. 스토어 안에 있는 상태가 바뀌면 스토어를 구독하고 있는 컴포넌트에 바로 전달한다. 부모 컴포넌트로 props를 전달하는 작업은 생략하며, 리덕스에 연결하는 함수를 사용하여 컴포넌트를 스토어에 구독시킨다. 스토어 : 애플리케이션의 상태 값들을 내장하고 있다. 액션 : 상태 변화를 일으킬 때 참조

React.js 01.12. React Component Rerendering 최적화 리액트에서는 Virtual DOM을 사용하여 필요한 DOM만 업데이트한다 고 했는데, 왜 최적화가 필요할까? 리액트는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링된다. 여기에서 불필요한 리렌더링 이란 실제 웹 브라우저의 페이지에 나타난 DOM의 렌더링이 아니라 Virtual DOM에 하는 렌더링 을 의미한다. 리액트가 어떤 DOM을 변경할지 인지하려면 Virtual DOM에 모두 렌더링을 해야 한다. 이 과정에서 Virtual DOM에 하는 불필요한 리렌더링을 shouldComponentUpdate로 방지한다. 그러면 Virtual DOM에 렌더링하는 과정에서 render() 함수를 실행하지 않고, 이전에 썼던 DOM 정보를 그대로 사용하여 자원을 아낄 수 있다. 어떤 상황에서? 컴포넌트 배열이 렌더링되는 리스트 컴포넌트일때 리스트 컴포넌트 내부에 있는 아이템 컴포넌트일때 하위 컴포넌트 개수가 많으며, 리렌더링되지 말아야 할 상황에서도 리렌더링이 진행될 때 리스트를 렌더링할 때는 언제나 shouldComponentUpdate를 구현해 놓는 것을 습관화하는 것이 좋다.