+1 -1 구현을 useState로 상태관리한다는 걸 공부했어.

코드는 이러해




number을 state 초기값을 0으로 세팅하고 setNumber로 이걸 +1 -1하면서 숫자를 바꾸는거야.... 암튼 그런건데...

버튼이 클릭될때마다 함수가 호출해서 재랜더링 하는데, 그러려면 이전 넘버값을 알아야 그 값에서 +1을 하거나 -1을 해줄 수 있을거 아냐?

그걸 useState로 어떻게 구현했는가?에 대해 궁금하드라구....


나는 리액트에서 당연히 그걸 클로저 개념으로 상태를 저장하고 있을줄 알았어. 아래 코드처럼 말이야...



암튼 이렇게 나름의 추론을 하고 내 뇌피셜이 맞는지 검증하기 위해 한번 구글에 찾아봤어

그런데 리액트에서 useState는 함수 바깥에 1) state와 2) state를 수정하는 set함수(=setter)를 각각의 배열에 저장하는 식으로 구현을 했드라구?


예컨대 성과 이름 useState들이 있는데, 이거를 js코드로 쓰면..




이렇게 전역에 state와 setter배열이 있는거야.

저

1. const [firstName, setFirstName] = useState("Rudi"); // cursor: 0

2. const [lastName, setLastName] = useState("Yardley"); // cursor: 1

두 useState훅을 실행하면


state = [Rudi, Yardley]
setter = [setFirstName, setLastName]
이렇게 배열에 들어가고..

버튼을 click하면,
성을 수정하면 state[0] = "수정된 성"
이름을 수정하면 state[1] = "수정된 이름"
이렇게 배열의 인덱스로 state를 변경해주는거야...

근데 일단 나는 저걸

https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e


이 외국문서에서 봤는데, 훔..... 막상 구글에 한글문서들 보면 내가 원래 생각한 방식대로 클로저로 useState를 구현한다고 막 글이 있기도 하고...
암튼 좀 더 찾아봐야 할거같아...
지금 내가 추론한거로는, setter함수에서 각 state를 클로저로 초기값 세팅 + 값 수정을 하는거 같은데, 일단 이건 내 뇌피셜이니까..
좀 더 양키들이 작성한 다른 문서들을 보면서 나의 뇌피셜이 맞는지 확인해야겟어...

암튼 useState는 배열일 뿐이다! 라는 시각이 진자루 신기햇다. 뭔가 좀 시각이 늘어난거 같구.... 암튼 그래......


저 위의 문서는 이번에 한번 번역해보려구! 암튼 진자루 좋은 글이었다...
다들 시간 있으면 한번 읽어보는거 추천해! 그 이유는? 저 글에는 내가 개똥같이 말한 거를 그림으로 잘 설명해주거든...




그리고 사족이지만 오늘 마라탕 먹었는데 ㅈㄴ 마라소스 땜에 속이 안좋다

그래두 진자루 맛잇는거 같아 ^~~~^


나는 숙주 + 청경채를 진자루 좋아해서 숙주 + 청경채만 5000원어치 넣어 먹엇어!!!!!! 당면은 별로 안 좋아하구 면 대신 숙주를 넣어 먹는 편이야 ^~~^ 그리구 건두부도 진자루 맛잇다 ^~~~^ 근데 먹으면 속이 나빠져서 ... ;ㅅ; 이제 한 달 후에 먹으려구..