2024. 06. 18 (화) 8주차 - Daily Coding - Day02

 

 

 

 

52강

state, props의 한계

Step.1
Step.2
Step.3
Step.4

 

 

 

리액트 context api를 제공하며 번역 상태 관리를 할 수 있다

=> 위 4단계 없이 바로 정보를 전달 해줄 수 있음

 

공식 문서

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

 

 

Auth context 만드는 방법

1. src 폴더 내 context 폴더를 생성한다.

2. context 폴더 내 AuthContext.js 파일을 생성한다

3 해당 js 폴더 내 아래 초기 구문을 입력한다

     import React from 'react'; 

     const AuthContext = React.createContext({

     })

    export default AuthContext;

 

4. AuthContext.js 파일을 최상단인 App.js에 넣어준다

<AuthContext.Provider

     value= "" >

 

 

 

53강

사이드 이펙트 Part 5.

- 커스텀 context 컴포넌트 만들기

 

실습 파일은 (51강 강의부터 연동 된다)

무조건 주말에 재실습!!

 

Context의 한계

1. 잦은 변화가 일어나느 상태를 다루기에는 적합하지 않다

2. 모든 컴포넌트 간 통신을 다 Context에서 다룰경우 너무 무거워지는 경향이 있다

 

Context에 상태와 로직을 모두 관리하면 컴포넌트에서는 뷰만 신경을 쓸 수 있다

 

 

 

54강

사이드 이펙트 Part 6.

- forwardRef

- useImaperativeHandle

 

실습파일 링크 (무조건 주말에 재실습!!)

https://github.com/dev-owen/react-fundamental/tree/practice/4-9

GitHub - dev-owen/react-fundamental: 슈퍼러닝 react 실습 repository

 

forwardRef

- 부모 컴포넌트에서 자식 컴포넌트에 전달 해줄 때 사용한다

 

useImperativeHandle

- ref를 부사용하는 경우 자식 컴포넌트의 상태 변경을 부모 컴포넌트에서 할때 사용한다

 

 

forwardRef는 상위 컴포넌트에서 전달받은 ref를 하위 컴포넌트로 전달하여

자식 컴포넌트에서 ref를 다루기 위해 useImperativeHandle 훅을 사용한다

 

 

🧐회고

이야 이거 무슨 말인지 정말 모르겠다 큰일났다 어떻하냐 하하ㅏㅏ..

그냥 웃음만 나오는구나...