diff --git a/pipisebastian/4_AddingInteractivity2.md b/pipisebastian/4_AddingInteractivity2.md new file mode 100644 index 0000000..5a16f8c --- /dev/null +++ b/pipisebastian/4_AddingInteractivity2.md @@ -0,0 +1,147 @@ +# 4주차 Adding Interactivity 2 + +## 1-1. ****State as a Snapshot**** + +- state는 Snabshot처럼 + - set state를 해도, state가 바로 변경되는게 아닌, rerender가 trigger된다! +- rendering이란 react가 컴포넌트, 즉 함수를 호출하는 것. 이 함수는 ****호출되는 시점의 UI (snabShot) +- react는 이 snabShot과 일치하도록 업데이트! + +💡 **발생하는 문제는?** + +```jsx + +``` + +- `setNumber(number + 1)` 다음 렌더링에서 1로 변경해라!(현재는 0) +- `setNumber(number + 1)` 다음 렌더링에서 1로 변경해라!(현재는 0) +- `setNumber(number + 1)` 다음 렌더링에서 1로 변경해라!(현재는 0) + +💡 **시간 경과에 따른 state** + +```jsx + +``` + +- number(UI)가 0이며 alert(0) 한 다음 +- number(UI)는 5가 될 것임. + +```jsx + // + 3 + ``` + + 1. React는 이벤트 핸들러의 모든코드가 실행된 후, queue에 해당 state setter 3개를 넣는다. + 2. `setNumber(n => n+1)` 해당 함수를 queue에 추가 + 3. `setNumber(n => n+1)` 해당 함수를 queue에 추가 + 4. `setNumber(n => n+1)` 해당 함수를 queue에 추가 + 5. 다음 렌더링에서 `useState`를 call한다 //`const [number, setNumber] = useState(0);` + 6. React는 queue를 통과한다. + 1. 1번째 updater function에 n(0)을 전달한다. + 2. 1번째 updater function의 반환값을 가져온뒤, 2번째 updater function의 n으로 전달한다. + 3. 반복 + 7. `useState` 에서 최종 state를 반환한다. ⇒ 적용이 된다! +- **How**? + - setState(x)가 실제로는 setState(n => x)처럼 작동 + + ```jsx + // + 6 + ``` + + 1. React는 이벤트 핸들러의 모든코드가 실행되고, state setter를 찾아서 queue에 넣어요~ + 2. `setNumber(n => number + 5)` queue에 **state를 5로 replace** 추가(updater function이 아님) + 3. `setNumber(n => number + 5)` queue에 **state를 5로 replace** 추가(이전 상태값은 여전히 0) + 4. `setNumber(n => n+1)` 해당 함수를 queue에 추가 + 5. 다음 렌더링에서 `useState`를 call한다(렌더링과정에서 queue처리) + 6. React는 queue를 통과한다. + 1. 최종 결과는 +6 + 7. `useState` 에서 최종 state를 반환한다. ⇒ 적용이 된다! + +- **네이밍 규칙** + - `setEnabled(prevEnabled => !prevEnabled)` 로 prefix 사용 + - `setEnabled(enabled => !enabled)` 로 state 변수이름 사용 + + +➡️ **An updater function** (e.g. `n => n + 1`) gets added to the queue. + +➡️ **Any other value** (e.g. number `5`) adds “replace with `5`” to the queue, ignoring what’s already queued. + +## 과제 - queue를 직접 구현해보자! + +Base state: **0** + +Queue: **[5, n => n+1, n⇒ n+1]** + +Expected result: 7 + +```jsx +export function getFinalState(baseState, queue) { + let finalState = baseState; + + //구현해야할 부분 + for (let update of queue) { + if (typeof update === 'function') { + finalState = update(finalState); // 함수 동작 + } else { + finalState = update; //값 바로 넣어줌 + } + } + //구현해야할 부분 + + return finalState; +} +```