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#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
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 메소드에서 유래한거구나
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#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#moving-all-wiring-into-a-single-file
context를 사용하기 위한 use 함수들도 내보낼 수 있습니다.
이거보고 설마.. 했는데
export function useRouter() {
return React.useContext(RouterContext)
}
'Javascript와 아이들 > React' 카테고리의 다른 글
[스터디] Managing State - 1 (0) | 2023.06.11 |
---|---|
[스터디] Describing the UI - 1 (0) | 2023.05.15 |
리액트 컴포넌트가 리렌더링 되는 경우 3 (0) | 2022.09.06 |
[react] create-react-app & 타입스크립트 & tailwind css 로 프로젝트 셋팅하기 (0) | 2022.05.02 |
[react] You are running `create-react-app`... 에러 해결하기 (0) | 2022.04.25 |