[TIL] 0130

useForm훅을 쓸 경우 storybook에 어떻게 작성할까

→ onsubmit과 initialvalue를 페이지 단에서 props으로 받는다

위의 내용을 SeriesForm에 적용

구조
Write/EditSeriesForm(컴포넌트) > seriesForm(컴포넌트) > useForm(훅)

문제점

• useForm훅의 props인 onSubmit함수는 훅 내부에서 useForm의 values(상태)를 파라미터로 받아 서버에 전송하는 로직이다.
• useForm의 handleChange를 input의 name과 value로만 받아야하다는 고정 관념 때문에
  그렇게 받아질 수 없는 값은 seriesForm에 따로 상태를 만들었다
• 이랬을 경우 문제점은 useForm의 onSubmit로직을 최상위 page컴포넌트에서 작성해 내려줄 수가 없었다
  useForm까지 onSubmit함수를 전달해서 useForm의 상태인 values를 parameter로 받아서 로직을 처리해야하는데, seriesForm에 따로 상태를 만들었을 경우 values에 해당 값이 없기 때문이다
• 이를 해결하기 위해서는 seriesForm에 따로 만든 상태를 useForm의 values에 포함시켜야했다
  → useForm에서 prameter로 값을 받는 핸들러 함수를 추가해주어 target내부의 값(name, value)을 받지 못하는 값들도 useForm의 state에 저장될 수 있도록 했다

  const handleChangeArr = (name, value) => { // prameter로 값을 받는 함수 추가
    setValues({ ...values, [name]: value });
  };

  const handleChange = e => { // 기존의 click target내부의 값을 받는 핸들러함수
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };

깨달은 점

구조가 Component - Component - hook으로 되어있을 때 props이 내려지는 구조와 과정을 잘 이해하지 못했던 것 같다. (특히 핸들러이벤트를 내려줄 때)

• props으로 받는 handler함수는 외부의 로직을 가져와서 하위 컴포넌트에서 실행하는 것
• 상위 컴포넌트가 하위 컴포넌트의 상태를 직접 이용할 수 없기 때문
• 상위 컴포넌트가 하위 컴포넌트에게 명령하는 것(?)
• 바꾸고 싶은 상태가 속해있는 컴포넌트(또는 훅)에서 onChange함수를 실행시킴

외부 영향을 받는 컴포넌트와 순수한 컴포넌트의 범위와 기준을 정해야한다

• Presentational/Container 컴포넌트 : 컴포넌트 재사용 관점
  • Container: api호출이나 전역 상태 관리 로직이 실행되는, sideEffect가 발생할 수 있는 컴포넌트
    • 재사용 불가능
    • page나 wrapped컴포넌트가 적합
  • Presentational: 데이터나 이벤트 핸들러함수를 props으로 받아 처리하는, sideEffect가 발생하지 않는 컴포넌트
    • 재사용 가능
    • 스토리북에 작성하기 좋음
• React Hook: 로직 재사용 관점

참고 자료