인프런 커뮤니티 질문&답변
작성한 질문수
useRef와 useEffect를 사용해서 어떤 props가 달라지는지 확인 부분 질문입니다.
작성
·
371
·
수정됨
0
const ref = useRef([]);
useEffect(() => {
console.log(rowIndex === ref.current[0], cellIndex === ref.current[1], dispatch === ref.current[2], cellData === ref.current[3]);
console.log(cellData, ref.current[3]);
ref.current = [rowIndex, cellIndex, dispatch, cellData];
}, [rowIndex, cellIndex, dispatch, cellData]);강좌에서 ref.current = [rowIndex, cellIndex, dispatch, cellData]; 부분을 console.log 아래에 두신 이유가 궁금합니다!
또한 useRef를 사용하는 이유가 화면이 리렌더링 되어도 ref에 있는 데이터들은 초기화가 되지 않기 때문이 맞을까요?
답변 1
0
console.log는 그냥 그 상황의 값을 보기 위한 것일 뿐입니다.. ref.current 밑에 있으면 밑에 상황을 보여주고 ref.current 위에 있으면 위에 상황이 나오는 것일 뿐이죠.
useRef는 값을 바꿔도 화면을 리렌더링하지 않습니다. 화면을 리렌더링하지 않는 값을 저장할 목적으로 쓰는 겁니다.
음.. 이해가 잘 안 되는데요. 지금 무엇때문에 바뀌었는지 확인하려고 찍는건데 true true true true를 봐서 뭐하나요..?
false인 걸 확인하려고 찍은겁니다.
음.. 강의에서 현재 상황이 props 때문에 렌더링 문제가 되지 않는 상황입니다.(부모가 리렌더링 되서 일어난 억울한 자식 리렌더링 상황??)
그래서 true true true true가 나오게 해야하는데 true true true false가 나왔는데 어떻게 props 때문에 렌더링 문제 아님을 알 수 있었는지 궁금하달까?.. 어렵네요 글로 표현하기가 ㅜㅜ
아 알아냈습니다. console.log(cellData)가 빈칸으로 뜨는게 맞는거네요.. cellData가 클릭하면 표시되는값이라
console.log(cellData === ref.current[3])가 false가 나오는게 맞군요..
답변 감사합니다!
위에 찍으면 true true true true가 나와서 의도하신대로 되실꺼 같아서 그랬습니다. 뭔가 다른 의도가 혹시 있는지 하고 여쭤본거에요 ㅎㅎ.. 답변 감사합니다.