기술면접 대비 상태관리 TIL

2023.08.21

오늘의 회고

디테일페이지 작업 중... 기술면접 대비 공부도 하고 바쁘다.

상태관리

질문 - 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?

내 답변 - 컴포넌트가 데이터를 필요로 할 때 props를 내려준다. 하지만 많은 컴포넌트들이 같은 데이터를 필요로 하면 Prop Drilling이 많아지는
문제가 생긴다. 이를 방지하기 위해서 상태관리가 필요하다. 나는 주로 상태관리 라이브러리인 Redux를 사용한다.

antd Cascader onChange error

앤트디자인에서 Cascader를 가져와 사용하려 했다. 분명 앤트디자인에서 주어진 onChange 코드를 가져왔는데 오류가 생겼다.

문제

const onChange = (value: string[]) => {
    setLocation(value);
  };

return <Cascader style={{ width: 140 }} options={options} onChange={onChange} placeholder="국가 선택" />;

'(value: string[]) => void' 형식은 'OnSingleChange<Option> | OnMultipleChange<Option> | undefined' 형식에 할당할 수 없습니다.

문제해결

const onChange = (value: string[]) => {
    setLocation(value);
  };

return <Cascader style={{ width: 140 }} options={options} onChange={(e) => onChange([String(e)])} placeholder="국가 선택" />;  

event를 string 배열로 감싸주었다. 그 결과 onChange의 오류는 사라졌지만 value 값이 ['아시아, 대한민국'] 으로 나온다. split으로 나눠주자. ['아시아', '대한민국']

const valueSplit = value[0].split(',');
setLocation(valueSplit);