1. Input

• [잘못된 예]

  const onChangeEmail = useCallback(()=>{
  	dispatch(userSlice.action.setEmail(e.target.value))
  },[dispatch]);
  
  <input type="email" value={email} onChange={onChangeEmail}/>
  

  • input값까지 redux를 거쳐 CRUD 글자 하나 칠 때마다 action이 실행되기 때문에 코드가 필요 이상의 re-rendering이 된다. (user를 사용하는 모든 컴포넌트가 리렌더링 되기 때문에 문제가 생긴다)
    • onBlur={} 나 submit할 때만 redux를 거치도록 하도록 수정하는 것이 낫다.

• [코딩 습관]

  const {email, password} = useSelector((state) => state.user);
  

  const email= useSelector((state) => state.user.email);
  const password = useSelector((state) => state.user.password);
  

  • email과 password를 함께 가져오면, email만 수정해도 컴포넌트를 전부 re-rendering을 하게 된다. 따라서 객체로 받아오지 않고, 원시값으로 받아오는 것이 좋은 습관이다. 그러나 받아올 게 너무 많다면 어느정도 타협해서 객체로 받아와도 된다.

2. 비동기

• 비동기 서버요청을 보내고 싶은 게 이 컴포넌트 하나에서만 실행되고, 다른 컴포넌트에 아예 영향을 끼치지 않는다면, 리덕스로 보내지 마라. 다른 컴포넌트와 관계가 있을 때만 리덕스로 CRUD하기!

  const onClick = useCallback(()=>{
  	dispatch(logIn({
  		id:"taehee",
  		password:"비밀번호",
  	}));
  	axios.post("/login");
  }, []);