[스터디] Managing State - 2

Preserving and Resetting State

https://react.dev/learn/preserving-and-resetting-state

https://react.dev/learn/preserving-and-resetting-state#the-ui-tree

https://react.dev/learn/preserving-and-resetting-state#state-is-tied-to-a-position-in-the-tree

 

pitfall 부분

 

To React, these two counters have the same “address”: the first child of the first child of the root. This is how React matches them up between the previous and next renders, regardless of how you structure your logic.

 

 

 

 

https://react.dev/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state

 

https://react.dev/learn/preserving-and-resetting-state#resetting-state-at-the-same-position

 

https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key

 

 

https://react.dev/learn/preserving-and-resetting-state#preserving-state-for-removed-components

리액트에서 keepAlive 찾았던 기억..

vue의 keepAlive

https://vuejs.org/guide/built-ins/keep-alive.html#basic-usage

keepAlive로 감싸면 비활성화 시켰다가 활성화시킴..

 

 

 

 

 

 

Extracting State Logic into a Reducer

https://react.dev/learn/extracting-state-logic-into-a-reducer#step-1-move-from-setting-state-to-dispatching-actions

Instead of telling React “what to do” by setting state, you specify “what the user just did” by dispatching “actions” from your event handlers. 

이전 챕터의 그림이 생각남. 하나하나 지시하고 컨트롤하는것보다 '목적지'를 정하면 리액트가 알아서 가준다.. 했던 그림

개발자가 로직 짤 때 하나하나 컨트롤 하려는 것보다 , 유저가 '저장'을 눌렀다. 유저가 '수정'을 눌렀다. 처럼 일어날 액션 위주로 생각하는게 좋은걸까?

어차피 결국 유저가 프로덕트를 사용하게 되기 때문에 그럴지도..

 

 

https://react.dev/learn/extracting-state-logic-into-a-reducer#step-2-write-a-reducer-function

https://ko.react.dev/learn/extracting-state-logic-into-a-reducer#why-are-reducers-called-this-way

왜 reducer라고 부르게 되었을까요? 

세심해...

나도 이게 궁금햇음 뭘 줄인다는거야 싶었는데 reduce 메소드에서 유래한거구나 

 

 

https://ko.react.dev/learn/extracting-state-logic-into-a-reducer#step-3-use-the-reducer-from-your-component

Component logic can be easier to read when you separate concerns like this.

항상 염두해야 하겟어요'

 

 

 

https://react.dev/learn/extracting-state-logic-into-a-reducer#comparing-usestate-and-usereducer

 

Testing: A reducer is a pure function that doesn’t depend on your component. This means that you can export and test it separately in isolation.

 

회사에서 들어봄..테스트는 하시는지들..

 

 

 

 

 

 

 

 

Passing Data Deeply with Context

https://react.dev/learn/passing-data-deeply-with-context

 

vue에도 있음 provide, inject 

import { provide } from 'vue'

provide(/* key */ 'message', /* value */ 'hello!')

import { inject } from 'vue'

const message = inject('message')

 

 

 

https://ko.react.dev/learn/passing-data-deeply-with-context#step-1-create-the-context

https://ko.react.dev/learn/passing-data-deeply-with-context#step-2-use-the-context

https://ko.react.dev/learn/passing-data-deeply-with-context#step-3-provide-the-context

https://ko.react.dev/learn/passing-data-deeply-with-context#using-and-providing-context-from-the-same-component

 

 

https://ko.react.dev/learn/passing-data-deeply-with-context#context-passes-through-intermediate-components

https://ko.react.dev/learn/passing-data-deeply-with-context#before-you-use-context

https://ko.react.dev/learn/passing-data-deeply-with-context#use-cases-for-context

Current account: Many components might need to know the currently logged in user.

현재 next auth 라이브러리에서도 sessionProvider로 앱 최상단을 감싸준다

내부를 보니 SessionContext.provider 사용하고 있었음

 

 

If you pass a different value on the next render, React will update all the components reading it below!

부작용도 있을듯.. 원하지 않는 컴포넌트도 죄다 업데이트../?

 

 

Scaling Up with Reducer and Context

 

https://ko.react.dev/learn/scaling-up-with-reducer-and-context#combining-a-reducer-with-context

https://ko.react.dev/learn/scaling-up-with-reducer-and-context#step-1-create-the-context

https://ko.react.dev/learn/scaling-up-with-reducer-and-context#step-2-put-state-and-dispatch-into-context

https://ko.react.dev/learn/scaling-up-with-reducer-and-context#step-3-use-context-anywhere-in-the-tree

https://ko.react.dev/learn/scaling-up-with-reducer-and-context#moving-all-wiring-into-a-single-file

context를 사용하기 위한 use 함수들도 내보낼 수 있습니다.

 

이거보고 설마.. 했는데

https://github.com/vercel/next.js/blob/875b205b57a4bb3e3016279268e334fee5692c29/packages/next/client/router.ts#L125

export function useRouter() {
  return React.useContext(RouterContext)
}