개발자
리액트 리랜더링 질문
안녕하세요! 제가 개발중에 문제가 생겼는데 혹시 아시는분이 계시면 답변해주시면 정말 감사하겠습니다. 저는 녹음기능을 구현하고 있습니다. 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이 리랜더링 되면서 기존의 커서위치를 초기화 시키는 문제가 있습니다. 이걸 어떻게 해결해야할까요? 글을 좀 못쓴거같은데 읽느라 고생하셨습니다 ㅠㅠ
답변 2
부모컴포넌트의 상태가 바뀌면 자식 컴포넌트는 리랜더링 됩니다. 커서위치가 초기화된다는게 어떤 의미인지는 모르겠으나 해당 상태를 방지하려면 메모이제이션을 활용하면 될 것 같습니다. 하지만 리랜더링을 막기위한 메모이제이션은 권장하지 않으니 컴포넌트 계층 구조를 적절하게 수정하여서 처리할 수도 있을 것 같아요
A_1은 반드시 mice의 값을 읽어야 하고, A_2 는 그 값을 변경하기 때문에 현재와 같은 컨테이너 패턴이나 상태 관리를 위한 스토어 패턴을 사용해도 결과가 같을 것입니다. 부모 컴포넌트가 state를 생성하는 주체가 아니라 스토어에 생성과 관리를 위임시킨다고 해도 참조하는 컴포넌트이므로 리렌더링을 피할 수는 없겠죠. useMemo를 사용해서 메모이제이션을 하는 것도 방법이고, 말씀하시는 커서 위치 그 자체도 state로 다루어 제어하는 것도 방법입니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 05월 10일
이 문제는 React의 리랜더링 특성 때문에 발생하는 것 같습니다. 커서 위치를 유지하기 위해선, 컴포넌트의 로컬 state 보다는 ref를 사용하는 것을 권장합니다. refs를 사용하면 컴포넌트들이 Re-render될 때 값을 유지시킬 수 있습니다. React useRef 훅을 이용하면 현재의 커서 위치를 저장해놓고, 값이 변경되어도 리렌더링 없이 해당 값을 참조하거나 변경할 수 있습니다. 다음은 그 예시입니다. ```jsx ... const cursorPosition = useRef(null); ... // cursorPosition 업데이트: cursorPosition.current = yourCursorPosition; ``` 이렇게 하면 컴포넌트가 리렌더링 되어도 cursorPosition.current는 이전 값을 계속 유지합니다. 따라서 레코딩 중지 시점에서 `cursorPosition.current` 값으로 커서 위치를 잡아주면 됩니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!