[원티드 프리온보딩 FE 챌린지 10월] 1-1 useState 톺아보기

*혼자 강의 들으면서 적은 내용들이기 때문에 정확 X, 깔끔하게 정리 X

 

2024년 10월 7일~

 

주제: 리액트 오픈소스 펼쳐보기

신기했던 점: 깃헙에 있는 리액트 소스코드 가져와서 안을 뜯어보는게 처음이라 흥미를 갖고 수업을 들을 수 있었다

 

useState란

상태 관리하기 위해 

 

useState은 어떤 구조로 이루어져 있는가?

fiber 알고리즘 적용 - 이전 상태값과 현재 상태값 저장되는 노드 (리액트 virtual dom에 사용하기 위해)

업데이트됐다 => fiber에 1, 업데이트 없음 => fiber에 0이 저장

 

 

useState 쓰면서 궁금했던게 const는 수정 불가인데 리액트 훅들은 const을 이용한다. 근데 객체나 배열은 참조값이기 때문에 속성 자체를 바꾸는건 괜찮다(메모리는 그대로 이기 때문)

 

 

js는 v8 이라는 엔진사용 -> v8은 c++로 작동 -> 즉 우리는 c++사용하고 있다(?)

 

 

setState(state + 1); // 1

setState(state + 1); // 1

여기서 prev은 baseState

setState((prev) => prev + 1); // 2

 

const [state, setState] = useState(() => 0) // 이게 lazy initialization

 

basicStateReducer -> setState함수인지 아닌지에 따라 값 업데이트

 

후기: 상태 관리 즉 useState은 안에 생각보다 복잡함....안에 뭐가 많고 뭐가 많이 돌아간다. 리액트 코드를 처음으로 들여다봐서 그런지 조금 신기했다 그렇지만 어렵다...