React Query는 React 앱의 서버 상태를 관리하는 라이브러리. 데이터관리 Client State- 웹 브라우저 세션과 관련된 모든 정보를 의미 (서버에서 일어나는 일과 아무 관련이 없음)- 단순 사용자의 상태를 추적ex) 언어 선택, 다크 모드&라이트 모드 Server State- 서버에 저장되는 정보. 클라이언트에 표시하는 데 필요한 데이터ex) 데이터베이스에 저장하는 블로그 게시물 데이터 React query는 클라이언트단에서 서버 데이터 캐시를 관리 React 코드에 서버 데이터가 필요할 때 fetch나 axios를 사용해 서버로 바로 이동하지 않고 react qeury 캐시를 요청 데이터를 관리하는 것은 react query이지만 서버의 새 데이터로 캐시를 업데이트하는 시기를 설정하는..
React에서 props는 읽기 전용(read-only)이다! 따라서 직접 수정할 수 없는데 이를 직접적으로 변경하려고 했기 때문에 발생했던 에러! React는 단방향으로 데이터가 흐른다. 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하고 자식 컴포넌트에서는 해당 데이터를 사용하거나 렌더링 해준다! 만약 자식 컴포넌트에서 props를 변경하기 원한다면 해당 객체를 수정할 수 있는 state를 사용해서 setState로 state를 변경해주어야 한다.
React에서 state 지연 초기화란? useState에 초기값을 전달할 때 해당 값을 항상 생성되지만 react는 첫 번째 렌더에만 그 값을 사용한다. 문자열을 초기값으로 전달할 때 등과 같은 경우에는 문제가되지 않지만 state를 복잡한 값으로 초기화할 필요가 있다. 그런 상황에서 useState의 초기값 자리에 함수를 전달할 수 있따. 그러면 react는 컴포넌트가 마운트 됐을 때만 함수를 호출한다!! 투두리스트를 작성할 때 아래와 같이 연산을 통한 state 초기 값을 주었다. const [todoList, setTodoList] = useState( JSON.parse(localStorage.getItem("todolist") ?? "[]"), ); 지금은 그렇게 엄청 복잡한 연산은 아니지만 ..
보통 컴포넌트를 만들 때 아무 생각 없이 렌더링하는 부분과 데이터를 받아오는 함수를 같이 두었다. 하지만 이 둘을 분리시켜 주면서 코드의 흐름을 더 빠르게 파악할 수 있고, 로직상 분리를 통해 역할 분담을 더 깰-꼼하게 할 수 있다는 것! 많은 코드가 아니라 그리 복잡해 보이지 않지만 데이터를 더 많이 가져올수록 코드는 더 길어지게된다. import React, { useState, useEffect } from "react"; import TodayDate from "./TodayDate/TodayDate"; import InputBox from "./InputBox/InputBox"; import Content from "./Content/Content"; import { ITodo..
