1장에서는 useState를 순수JS로 구현해보았는데 2장에서는 나아가 React의 렌더링이 되는 과정을 React라는 모듈을 직접 만들고 조작해보는 과정이다.
먼저 React라는 모듈을 생성하고 만들어 놓은 useState라는 hooks를 넣자.
이제 React의 render()를 구현하기 위해 Component라는 함수를 만들게된다.
비디오에서는 Compoent라는 함수를 먼저 만들고 React에게 Component를 렌더링하는 방법을 가르쳐야한다고 말한다 !
때문에 React내에 render라는 함수를 만들고 render함수는 Component를 매개변수로 받아 호출만 시켜준다면 렌더링을 발생시킬 수 있다고 한다.
여기서 Component안에 render와 click은 console에서 진행하기때문에 dom이 아닌 console의 모습인듯하다.
후에 useEffect를 진행할때는 dom을 조작하는 모습까지 보여주게된다.
우선 다시 코드를 보자면 추가된 코드를 제외하고 전과 달라진 모습은
_val를 useState밖으로 빼주고 선언만 해줬는데 이는,
const state = _val || initVal;
부분에서 state값에 _val값이 존재한다면 _val값을 , 존재하지 않는다면 initVal값을 넣으니 _val가 없는상황 즉, 최초에만 initVal이 state값에 들어가게끔 설계가 된 모습이다.
비디오는 state값이 둘 이상이 된다면 어떻게될까 ? 라는 의문으로 이어나간다.
초기state값을 "apple"로 설정힌 text, setText 를 구조분해할당으로 추가하고 setText하는 함수인 type또한 정의해서 return해줬지만
우리의 생각과는 다르게 click을 해도 setText가 되고 type('pear)로 바꿔도 count가 setCount되는 등 뒤죽박죽의 결과가 나오게된다.
원인은 같은 변수 즉, _val 하나만으로 모든 상태값을 setState될때마다 저장하기 때문이라고 말하는데
그러면서 hooks의 mental image를 자라게 할 필요성이 있다고 얘기한다.
mental이 다른 뜻이 있나 싶어
암기로 하는, 즉
기억하는 이미지로 확장할 필요 -> 값이 변경될 때 마다 저장시켜야하는 배열이 필요하다.
라는 결론으로 도달했다.
해서 _val를 hooks라는 배열로 바꾸고 idx라는 인덱스 값을 넣고 값이 저장될 때 마다 idx++시켜 hooks[idx]에 state가 저장되는 공간이 겹치지 않게 해주었다 !
하지만 App컴포넌트가 렌더될때마다 useState함수를 호출하게 되고, 그때마다 index를 증가시키기 때문에 처음에만 의도대로 변수 할당이 이루어지고 두번째 부터는 제대로된 결과를 받을 수 없게된다.
나는 조금 어렵게 느껴져서 직접 idx값을 render해봤다 !
(useState를 호출하게될 때 마다 idx가 증가하는 모습)
따라서 render할때마다 index를 다시 초기값으로 돌려줘야한다!
하지만 render된 후 증가하는 index값에 영향을 받아
의도했던 배열의 첫번째, 두번째값에 저장되는 것이 아니라 증가된 index에 저장이 되버린다.
쉽게 말해서 .. 저장해놓은 hooks[idx]부분을 setState로 변경하려고 하는데
변수 idx를 private 변수로 관리하지 못했기 때문에 idx++되버려
변경해야하는 값을
이렇게 들고와도 우리의 의도와는 다른 증가된 idx값으로 hooks[idx] 부분에서 기존배열의 값을 변경하지 못하는 것이다!
위와같이 다시 클로저 개념을 이용해서 setState안의 index값이 useState에 의해 변하지 않도록 freeze시켜준다면
이제 우리가 원하던 state를 setState하는,,
다중의 state값을 관리할 수 있는 순수JS기반
React모듈의 useState가 완성된것이다 !
3부에서는 useEffect !
여담으로 ,,
여러 포스팅을 읽으면서 공부해본 결과
이곳의 댓글을 보고 _val값을 setState할 때 null이나 0, 즉 falsy값이 들어오게 된다면 의도와는 다르게 initVal가 초기화가 되는 모습을 발견하신 분이 계신다.
이곳을 포함한 여기저기 문서를 찾아봤지만 아직.. 해석이 가능한 단계가 아니라
다음에 기회가 된다면 어떤 구조로 되있는지 파헤치고싶다!!
