search

JNU-econovation / hotsix-study

에코노베이션 타입스크립트 스터디
5 stars 7 forks source link

[03/20] 상태관리 #99

Open bada308 opened 7 months ago

bada308 commented 7 months ago

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

게으른 초기화

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

파생된 값은 상태가 아니다

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 commented 7 months ago

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