[03/20] 상태관리

[bada308]

[우아한타스] 10장. 상태 관리

게으른 초기화

useState(new Store()) vs useState(() ⇒ new Store())

• https://legacy.reactjs.org/docs/hooks-reference.html#lazy-initial-state
• 초기 렌더링에만 사용되고 이후 렌더링에서는 무시된다.

파생된 값은 상태가 아니다

• react-query에서 useQuery에 대한 onSuccess, onError, onSettled 콜백 제거

Breaking React Query's API on purpose

BAD

export function useTodos() {
  const [todoCount, setTodoCount] = React.useState(0);
  const { data: todos } = useQuery({
    queryKey: ["todos", "list"],
    queryFn: fetchTodos,
    //😭 please don't
    onSuccess: (data) => {
      setTodoCount(data.length);
    },
  });

  return { todos, todoCount };
}

GOOD

export function useTodos() {
  const { data: todos } = useQuery({
    queryKey: ['todos', 'list'],
    queryFn: fetchTodos,
  })

  const todoCount = todos?.length ?? 0

  return { todos, todoCount }
}

만약 상태가 서버에서 받은 값에 의존할 수 밖에 없다면 (ex. 수정 form)

export const EditForm = () => {
  const [title, setTitle] = useState();
  const { data: formData } = useQuery({
    queryKey: ["data", "form"],
    queryFn: fetchData,
  });

  // title 동기화

  const handleChange = (e) => {
    setTitle(e.target.value);
  };

  return (
    <form>
      <input value={title} onChange={handleChange} />
    </form>
  );
};

1. 어떻게 동기화 하는 게 좋은 방법일까?
2. title은 서버 상태에서 파생된 값이므로, 이는 SSOT를 위반하는 것일까?

[2yunseong]

1. 어떻게 동기화 하는 게 좋은 방법일까?

• 위에 코드에서는 수정 컴포넌트와 (write) 읽기 컴포넌트(read-only)를 분리