작성
·
157
0
hooks = []
component()
let hooksForThisComponent = hooks;
hooks = null;
..
강의에 나온 수도코드로 알아보는 훅 예제입니다.
저 흐름이 조금 이해가 안되는 부분이 있어서 질문드립니다.
제가 이해한 바로는 훅의 동작방식은 아래와 같습니다.
일단 useHook()을 사용하면, hooks 배열에 순서대로 차곡차곡 쌓입니다.
순서대로 쌓이기 때문에, 훅을 사용한 시점에서 hooks 배열에서의 인덱스 포지션 정보 또한 얻을 수 있을것입니다. 만약 컴포넌트가 setState()등으로 변경을 요청하면, 전역변수 hooks에 저장되어있는 포지션을 기준으로 그 훅 데이터에 접근할 수 있고, 상태를 성공적으로 변경할 수 있는것으로 알고 있습니다.
1) 근데 process_a_component_rendering()이라는 함수를 보면 hooks라는 전역배열을 항상 새로운 배열로 초기화시키는데요. 왜 이런 과정을 거치는걸까요? 그럼 기존까지 쌓아왔던 순서정보는 다른 렌더링 요청이 들어오면 날라가는거 아닌가요?
hooksForThisComponent라는 변수의 쓰임이 중요한것같은데, 어떤 의미로 사용된거일까요? 따로 각 등록한 hooks등을 복제하여 함수컴포넌트의 context별로 저장하기위한 변수들인건가요?
답변 1
0
안녕하세요
hooks 변수는 하나의 컴포넌트가 사용하는 모든 훅 정보를 모으기 위한 임시 변수입니다
그렇게 모아진 훅 정보를 hooksForThisComponent 변수에 담아서 리액트가 적절하게(?) 활용하게 됩니다
답변이 됐을지 모르겠네요
수도 코드라서 각 변수에 대해 너무 큰 의미를 두지는 않으시는 게 좋을 것 같아요