[TIL] 0119

MonthSub 리팩토링

UseCheckBox 로직 구현

1. 전체 항목 요소와 개별 항목 요소들을 분리해서 만들고 이벤트 핸들러 함수도 각각 만들어야한다.
2. checked의 초기값도 상태를 기준으로 설정해야한다. (여기에서 많이 헤맸음)
   • checked도 어찌됐든 스타일을 결정하는 속성이기 때문.
   • 상태가 기준이 아닌 그냥 초기값을 false로 설정할 시 활성화가 안됐음.
   • 개별 항목 요소의checked 기준은 상태(배열)안에 그 요소의 값이 포함되어있는지,
     전체 항목 요소의 checked 기준은 모든 항목의 갯수와 체크된 항목의 갯수가 같은지로 설정해야한다.

// 오류 났던 코드 - checked의 초기 값을 상태에 따른 ture or false가 아닌 null로 설정했기 때문
return (
    <div>
      <label label htmlFor="all">
        <input
          type="checkbox"
          id="all"
          onChange={handleCheckedAll}
          checked={checkedList.length === valueList.length ? true : null}
        />
        all
      </label>
      {dataList.map(({ id, value }) => (
        <label key={id} htmlFor={value}>
          <input
            key={id}
            id={value}
            type="checkbox"
            value={value}
            onChange={handelCheckedElement}
            checked={ // check된 값들 중 해당 요소의 값이 포함된지만 확인하면 되는 지 몰랐다
              checkedList.length === valueList.length
                ? false
                : checkedList[0] === value
                ? true
                : null
            }
          />
          {value}
        </label>
      ))}
    </div>

// 최종 수정 코드
return (
    <div>
      <label htmlFor="all">
        <input
          type="checkbox"
          id="all"
          onChange={handleCheckedAll}
          checked={checkedList.length === valueList.length}
        />
        all
      </label>
      {valueList.map(({ id, value }) => (
        <label key={id} htmlFor={value}>
          <input
            key={id}
            id={value}
            type="checkbox"
            value={value}
            onChange={handelCheckedElement}
            checked={
              checkedList.length === valueList.length
                ? false // 전체 항목이 체크 되어있을 땐 나머지의 체크를 풀어주었다
                : checkedList.includes(value)
            }
          />
          {value}
        </label>
      ))}
    </div>
  );

3. 부모 컴포넌트에게 상태를 전달해줘야하는데 상태가 변화할 때마다 전해줘야해서 useEffect 안에 onChange(state)함수를 실행하고 전해줄 state를 의존성으로 걸어주었다.

컴포넌트 상태 초기값 설정

• 상위 컴포넌트에서 props으로 데이터를 전달받는다면 자식 컴포넌트에서 그 데이터로 state초기화를 해야한다

const SeriesForm = ({ edit, param, seriesData, ...props }) => {
  const history = useHistory();
  const [dayValues, setDayValues] = useState(seriesData.uploadDate || []);
  const { values, handleChange, handleSubmit, handleImageUpload } = useForm({
    initialValues: {
      thumbnailFile: seriesData.thumbnailFile || '',
      category: seriesData.category || '',
      title: seriesData.title || '',
      introduceText: seriesData.introduceText || '',
      introduceSentence: seriesData.introduceSentence || '',
      subscribeStartDate: seriesData.subscribeStartDate || '',
      subscribeEndDate: seriesData.subscribeEndDate || '',
      seriesStartDate: seriesData.seriesStartDate || '',
      seriesEndDate: seriesData.seriesEndDate || '',
      uploadTime: seriesData.uploadTime || '',
      articleCount: seriesData.articleCount || '',
      price: seriesData.price || '',
      thumbnailUrl: seriesData.thumbnailUrl || '',
    },

---

알고리즘 문제 풀이

2차원 배열 구조를 가지고 dp알고리즘을 이용하는 문제를 풀었다. 아이디어는 떠올려냈는데
코드로 구현하지 못했다.. 2차원 배열의 for문을 돌 때 arr[i][j]에서 i또는 j값이 마이너스 일 때의 예외처리를 해야하는데 자꾸 실패했다 ㅜㅜ 꽤 오랜 시간을 썼는데도 해결하지 못해서
내일 다시 차근히 풀어보려한다..