• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

useRef와 useEffect를 사용해서 어떤 props가 달라지는지 확인 부분 질문입니다.

23.11.05 14:23 작성 23.11.05 14:23 수정 조회수 241

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는 값을 바꿔도 화면을 리렌더링하지 않습니다. 화면을 리렌더링하지 않는 값을 저장할 목적으로 쓰는 겁니다.

신동마님의 프로필

신동마

질문자

2023.11.05

위에 찍으면 true true true true가 나와서 의도하신대로 되실꺼 같아서 그랬습니다. 뭔가 다른 의도가 혹시 있는지 하고 여쭤본거에요 ㅎㅎ.. 답변 감사합니다.

어... 하나라도 false가 나와야 정상입니다. 아래에 찍으면 오히려 true, true, true, true가 나와야 합니다.

신동마님의 프로필

신동마

질문자

2023.11.05

아 잘못말했습니다! 아래에 찍으면 true,true,true,true가 나와서 props 때문에 문제가 되지않음을 알 수 있지 않나요?

음.. 이해가 잘 안 되는데요. 지금 무엇때문에 바뀌었는지 확인하려고 찍는건데 true true true true를 봐서 뭐하나요..?

false인 걸 확인하려고 찍은겁니다.

신동마님의 프로필

신동마

질문자

2023.11.05

음.. 강의에서 현재 상황이 props 때문에 렌더링 문제가 되지 않는 상황입니다.(부모가 리렌더링 되서 일어난 억울한 자식 리렌더링 상황??)

그래서 true true true true가 나오게 해야하는데 true true true false가 나왔는데 어떻게 props 때문에 렌더링 문제 아님을 알 수 있었는지 궁금하달까?.. 어렵네요 글로 표현하기가 ㅜㅜ

신동마님의 프로필

신동마

질문자

2023.11.05

아 알아냈습니다. console.log(cellData)가 빈칸으로 뜨는게 맞는거네요.. cellData가 클릭하면 표시되는값이라

console.log(cellData === ref.current[3])가 false가 나오는게 맞군요..

답변 감사합니다!

신동마님의 프로필

신동마

질문자

2023.11.05

주제에 벗어난 질문이긴 한데 혹시 11월 말에 출시하시는 넥스트 강좌에서 타입스크립트도 도입할까요?

네 타입스크립트로 진행합니다.