● 리액트가 리렌더링 되는 경우
이전에 리액트로 쇼핑몰 사이트를 만들다가 localStorage에서 데이터를 가져와 값을 변경하고 싶었는데, 값은 수정이 되는데 HTML 렌더링이 안돼서 .. 리액트가 리렌더링이 되는 경우를 분석해보고자 포스팅한다. 분명 나는 useState 변수가 변경되면 리렌더링이 된다고 배웠는데 자꾸 안됐다 ㅜㅠ 이포스팅을 적고 차후에 수정해볼 생각이다.
- 내부상태(state) 변경 시
- 부모에게 전달받은 값(props) 변경시
- 중앙 상태값(Context value 혹은 redux store) 변경시
- 부모 컴포넌트가 리렌더링 되는 경우
- 부모 컴포넌트가 리렌더링(state변경 등등)된다면, 부모안에 있는 자식 컴포넌트들도 모두 리렌더링 되기 때문에 memo, useEffect 들을 사용하는게 좋다.
* redux store 변경시 자동으로 리렌더링이 되는 이유는, 리덕스 스토어가 <Provider store={store}>로 컴포넌트를 감싸주었을 때, 스토어 상태가 변경될 때마다 이를 참조하는 컴포넌트들이 리렌더링이 될 수 있도록 react-redux 라이브러리가 자동적으로 컴포넌트 들의 렌더 함수들을 subscribe 해주기 때문이다.