스파르타아아아아
root (index.html의 <div id="root">)
└── main.jsx (ReactDOM.createRoot로 App을 감싸는 파일)
└── App.jsx (애플리케이션의 최상위 컴포넌트)
└── TodoProvider (Context Provider)
└── TodoList (실제 UI 컴포넌트)
컴포넌트 라이프사이클- create 마운트 언마운트(클린업함수)
놓치지 말자 : 심화 과정!!
axios - 6, 7강
tanstacck query - 9, 10, 11, 12강
zustand - 15강
1.context API 로 header , footer 감싸주는거 공부하고 8회차부터거든! / 1시간30분부분 인 끝부분 배포후 브랜치만들어서 하는부분부터 봐보기
2. constext API 단점을 보완해주는 Redux , RTK을 공부하고
3. useEffect 심화전단계 원장님 강의듣기 mount,unmount에대해
4. supabase를 공부
await 는 promise 에만 사용가능하다!
비동기로 외부데이터가져홀때 쓰는훅
useEffect !!
get(R가져오다가져와서읽다,fetch 가져오다) post(C전송하다) put(밀어넣다U완전덮어씌우는것 일부분만 업데이트는 PATCH이다) delete(D) = CURD // PATCH 덧대다(때우다) -> U 일부분 업데이트이다.
RESTful API = CRUD
리렌더링을 setState가아니라 서버에서 read를 해서 다시 await로 read를 다시 재선언으로 리렌더링 해준다!
TanStack Query (텐스텍쿼리) - 서버상태를 관리(@@아래설명있음)하기 위한 라이브러리로, 데이터를 패칭하고 캐싱, 동기화, 무효화 등의 기능을 제공한다.
주요기능
캐싱-> 서버가 클라이언트의 요청 경험에 의한 자주 요구하는 요청사항에한 데이터를 메모리에 저장해두는 ?그런것?
-> 1.데이터 캐싱: 동일한 데이터를 여러번 요청하지않도록 캐싱하여 성능을 향상시킨다.
2.자동리페칭: 데이터가 변경되었을때 자동으로 리페칭하여 최신상태를 유지한다.
3.쿼리무효화: 특정 이벤트가 발생했을때 쿼리를 무효화하고 데이터를 다시 가져올수 있다.(더이상 유효하지않아!)
@@서버상태관리-> 외부로부터 데이터를 가져와 애를 어떻게 관리하고 갱신할꺼냐 하는 의미이다.
1.get R // useQuery 훅 -> query(질의, 물어보는)
2.modify CUD // useMutation 훅 돌연변이(변경이일어났다)
3. refresh // invalidate Queries 검증화 하지 않는다,유효화하지않는다=오래된(stale).무효화한다 [ 반대인 validate의뜻은 검증-유효화하다.]
get한걸 refresh 할때 -> 우리가져왔던 결과물이 변화햇을때, 오래된데이터고 유효화지않으니 다시가져와라는 refresh처리하는것이다. ( 1-10강의 -코드치는강의10분부터시작)
Tanstack query - vscode에 사용법 강의12분대 1-10강의
main jsx 에다가 패키지설치하고
const queryClient = new QueryClient( ) ;
root 안에 app을 <QueryClientProvider client={queryClient} > 로 감싸고
컴포넌트에서 사용할때 useQueryClient 를 이용해 사용한다
json.server를 패키지설치해 실행시킨다
App 에서
const {data, isPending, isError} = useQuery( { // 2가지넣어줘야함
queryKey: [ "todos" ] , // 1. 배열형태로 쿼리키를 넣어줘야함 쿼리키의이름으로캐싱을해서 여러컴포넌트에서 (get CRUD중 R)불러와도 db까지 안가고 캐싱된데이터를사용가능하다
queryFn : fetchTodos, // 2. 비동기함수를 하나 넣어줘야함
} )
const addTodo = async ( newTodo) => {
await axios.post("http://localhost:4000/todos", newTodo ) ; } ;
const mutation = useMutation ( { // mutation 에는 키로 mutate( ) 를가지고있다 객체구조분해할당 가능
mutationFn: addTodo,
} )
refresh 를 통해 ui에 렌더링 해주는방법은
const queryClient = useQueryClient( );
const {mutate} = useMutation ( {
mutationFn: addTodo,
onSuccess: ( ) => {
queryClient.invalidateQueries( [ "todos" ] ); //쿼리키인자로들어옴
} ,
} );
npx json-server db.json