렌더링이 3번 된다..

리액트에서 렌더링 되는 이유.

1. state 변경이 있을 때

2. 새로운 props 가 들어올 때(props 업데이트)

3. 부모가 렌더링 될 때

4. forceUpdate 가 실행될 때.

 

 

문제 원인

1. 부모로부터 받은 editForm 함수를 이용해 setState를 해주기 때문에 부모의 state가 변경되어 자식의 자식 컴포넌트인 TagList 도 재렌더링 됨.

2. TagList 컴포넌트의 tagList state 는 최초에 변경되고 그다음 렌더링부터는 변경으로 인지되지 않아 useEffect 안의 editForm 이 실행되지 않음.

3. 때문에 부모 editForm 함수엔 가장 처음엔 수정된 정보로 나오고 그 후엔 계속 초기 지정 값으로 나옴.

 

문제 해결

1. editForm 함수가 아닌 tagList setState 를 직접 내려 데이터를 넣음.

 

* 사실 이 방법이 최선이라고 생각하지 않는다. 그러나 반나절 넘게 고민한 결과 props 가 조금 지저분 해져도 setState 를 직접 내리기로 결정했다. 리덕스 혹은 리액트 쿼리를 이용해 변수를 전역적으로 관리하면 해결할 수 있을 것 같았지만, 현시점에는 이 변수 하나 때문에 라이브러리를 추가하는 것은 맞지 않다고 생각했기 때문이다.