리액트 리랜더링 질문

Question

안녕하세요!

제가 개발중에 문제가 생겼는데 혹시 아시는분이 계시면 답변해주시면 정말 감사하겠습니다.

저는 녹음기능을 구현하고 있습니다.
A(부모) 컴포넌트에서 상태를 정의하였고
const [mice, setMice]  = useState(false)

자식컴포넌트인 A_1, A_2 에게 props로 상태를 넘겨줍니다.

A_2에는 시작과 중지 버튼이 있는 컴포넌트 이고 
시작버튼을 누르면 setMice를 true로 
증지 버튼을 누르면 setMice를 false로 만드는 역할을합니다.

A_1은 props로 전달받은 mice에 따라  mice가 true면 녹음내용을 화면에 뿌리고,
mice가 false면 녹음을 중지합니다

문제는.. A_2에서 녹음 중지를 누르게 되면 
mice가  false가 되고 A_1이 리랜더링 되면서 기존의 커서위치를 초기화 시키는 문제가 있습니다.

이걸 어떻게 해결해야할까요?

글을 좀 못쓴거같은데 읽느라 고생하셨습니다 ㅠㅠ

JB · Answer

부모컴포넌트의 상태가 바뀌면 자식 컴포넌트는 리랜더링 됩니다.

커서위치가 초기화된다는게 어떤 의미인지는 모르겠으나 해당 상태를 방지하려면 메모이제이션을 활용하면 될 것 같습니다.

하지만 리랜더링을 막기위한 메모이제이션은 권장하지 않으니 컴포넌트 계층 구조를 적절하게 수정하여서 처리할 수도 있을 것 같아요

상현 · Answer

A_1은 반드시 mice의 값을 읽어야 하고, A_2 는 그 값을 변경하기 때문에 현재와 같은 컨테이너 패턴이나 상태 관리를 위한 스토어 패턴을 사용해도 결과가 같을 것입니다. 부모 컴포넌트가 state를 생성하는 주체가 아니라 스토어에 생성과 관리를 위임시킨다고 해도 참조하는 컴포넌트이므로 리렌더링을 피할 수는 없겠죠. useMemo를 사용해서 메모이제이션을 하는 것도 방법이고, 말씀하시는 커서 위치 그 자체도 state로 다루어 제어하는 것도 방법입니다.

useMemo를 사용해서 메모이제이션을 하는 것도 방법이고, 
말씀하시는 커서 위치 그 자체도 state로 다루어 제어하는 것도 방법입니다.