말은 쉽지, 코드를 보여줘!

우선 크롬 웹 스토어 로 접속해서 React Developer Tools, Redux DevTools 를 브라우저에 설치한다. 설치를 완료하고 크롬 개발자모드(F12)를 확인하면 Redux, Components, Profiler 탭이 추가된 것을 볼 수 있다. 리액트는 단적으로 보면 결국 렌더링을 효율적으로 해주는 라이브러리이다. 이에 대부분의 전역적인 설정은 최초 렌더링을 시작하는 src/index.js 에서 해주면 된다. 이 중 크롬 개발자 도구와의 연동 설정을 하면 어플리케이션에서 사용되는 리덕스의 상태와 컴포넌트 렌더링 등의 주요정보를 디버깅 할 수 있다. 이를 위한 설정이 src/index.js 파일의 아래 내용이다. createStore를 통해 리덕스 상태를 보관할 스토어를 만드는데 compo..

useEffect 함수를 통해 함수형 컴포넌트가 업데이트 될때마다 특정 작업을 수행할 수 있다. 예를 들어 컴포넌트 초기렌더링 시 필요한 상태값을 생성할 수 있다. 첫번째 인자의 함수 내부 로직으로 렌더링시 수행할 작업을 정의할 수 있고 해당 함수의 리턴값으로 업데이트 or 언마운트시 수행할 작업을 정의할 수 있다. 참고로 첫번째 인자의 return 은 선택적으로 정의할 수 있는데 초기상태값이 특정 조건에 따라 다르게 할당되어야 한다면 return 에 반드시 상태값을 초기화하는 디스패치 로직이 추가되어야 한다. 그렇지 않으면 컴포넌트 렌더링시 아주 짧은 시간동안 이전 상태값이 나타나는 깜빡임 현상이 발생한다. 사용법은 대략 아래와 같은데 리덕스를 사용하는 환경에서 dispatch(getTodos());로..

더 좋은 방법도 많겠지만 나는 아래와 같이 사용하고 있다. └── src ├── components ├── containers ├── lib │ ├── redux │ ├── rest │ └── utils └── pages src/components 상태 관리가 이루어지지 않고 그저 props를 받아와서 화면에 UI로 나타나는 프레젠테이셔널 컴포넌트 생성 src/containers 리덕스와 연동되어 리덕스 스토어에서 상태값을 구독하고 디스패치 함수를 정의하는 컨테이너 컴포넌트 생성. 구독한 상태값과 디스패치 함수는 프레젠테이셔널 컴포넌트 에 props로 전달되어 각각 동적데이터를 데이터를 완성하거나 이벤트 함수에 연결된다. src/lib/redux 기능별로 액션 타입, 액션 생성 함수, 리듀서, 사가 코드..

컴포넌트 성능 저하는 일반적으로 불필요한 컴포넌트 리렌더링 때문에 발생하는데 리렌더링 되는 상황은 아래와 같다. ​ 1. props 가 변경되었을 때 2. state 가 변경되었을 때 3. 부모 컴포넌트가 리렌더링 될 때 4. forceUpdate 함수가 실행될 때 6. useSelector 로 구독하는 값이 변경되었을 때 ​ 1, 2번은 변경된 상태에 따라 컴포넌트도 변화해야 하기 때문에 당연히 리렌더링 해야 하고 4번은 필요에 의해 강제로 리렌더링을 수행시키는 것이기 때문에 최대한 지양하면 된다. ​ 그런데 3번을 보면 부모컨포넌트가 리렌더링 된다고 해도 어떤 자식 컴포넌트는 변경되는 것이 없이 때문에 리렌더링이 필요하지 않을 수 있다. 바로 부모 컴포넌트에서 받아오는 props 가 바뀌지 않은 경우..