useRef와 useEffect를 사용해서 어떤 props가 달라지는지 확인 부분 질문입니다.
392
작성한 질문수 19
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는 값을 바꿔도 화면을 리렌더링하지 않습니다. 화면을 리렌더링하지 않는 값을 저장할 목적으로 쓰는 겁니다.
0
위에 찍으면 true true true true가 나와서 의도하신대로 되실꺼 같아서 그랬습니다. 뭔가 다른 의도가 혹시 있는지 하고 여쭤본거에요 ㅎㅎ.. 답변 감사합니다.
0
음.. 이해가 잘 안 되는데요. 지금 무엇때문에 바뀌었는지 확인하려고 찍는건데 true true true true를 봐서 뭐하나요..?
false인 걸 확인하려고 찍은겁니다.
0
음.. 강의에서 현재 상황이 props 때문에 렌더링 문제가 되지 않는 상황입니다.(부모가 리렌더링 되서 일어난 억울한 자식 리렌더링 상황??)
그래서 true true true true가 나오게 해야하는데 true true true false가 나왔는데 어떻게 props 때문에 렌더링 문제 아님을 알 수 있었는지 궁금하달까?.. 어렵네요 글로 표현하기가 ㅜㅜ
0
아 알아냈습니다. console.log(cellData)가 빈칸으로 뜨는게 맞는거네요.. cellData가 클릭하면 표시되는값이라
console.log(cellData === ref.current[3])가 false가 나오는게 맞군요..
답변 감사합니다!
npm run dev 실행 시 포트가 안뜨는 문제
0
206
2
timeouts.current를 useEffect 의 input값으로 넣었을때
0
88
2
렌더링 테스트 코드 (Hooks)
0
80
1
Cannot find package 'react-refesh' 이런 에러 뜨시는 분들 보세요.
0
150
1
해당 에러 뜨는 분들 보세요. "Uncaught TypeError: ReactDom.createRoot is not a function"
1
192
1
강사님 레포지토리에서 코드 복사 시 master 브랜치 말고 react18 브랜치꺼 복붙하세요ㅠㅠ
0
97
1
useMemo와 useCallback 사용 시기
0
208
2
onRightClickTd가 작동을 하지 않습니다.
0
227
1
action.type 불러오는 방식
0
222
2
onClickRedo 질문
0
172
1
const Try = require(./Try) 빨간줄
0
249
1
npx webpack 실행시
0
315
1
지뢰찾기 강좌에서 빈칸들 한번에 열기 파트에서 여쭤보고싶은부분이 있어서 글 올립니다.
0
235
1
강좌에서 다루지 않은 기능들은 어떻게 학습하면 좋을까요?
0
311
1
react devtool이 enable 않됩니다.
0
531
2
React 랜더링이 되지 않습니다.
0
412
2
비동기로 동작하는 setState에 대해서
0
332
1
npm run dev 할 때 에러발생
0
480
2
memo, PureComponenet, shouldComponentUpdate 관련 질문
0
207
1
devMiddleware의 필요성
0
352
1
리액트에서 화살표 함수를 사용해야하는 이유
0
935
2
path.join관련질문
0
283
2
2-9. 웹팩 데브 서버와 핫 리로딩 설치과정 시 에러
0
376
1
next.js 에서 이와 비슷한 예제를 돌리고있는데 react랑 달라서 질문 드립니
1
494
4