[Next.js] 컴포넌트에 props로 useState값 넘기기

컴포넌트를 재사용하기 위해 분리시켜 props를 넘겨 제어할 때 useState를 props 넘겨줘야 하는 상황이 온다.

 * useState는 state의 초기값을 정할 수 있고, return 값으로 state, setState를 돌려주는 hook이다.

 

예를 들어 아래와 간은 DatePicker UI를 컴포넌트방식으로 만든다고 하자.

DatePicker UI

 

예제 코드는 다음과 같다.

1. 이번달의 첫 날과 마지막 날을 선언해주고 각각의 DatePicker로 전달할 useState값 또한 초기화 한다.

const firstFormat = dayjs().startOf("month").toDate();
const lastFormat = dayjs().endOf("month").toDate();
  
const [selectedDate1, setSelectedDate1] = useState<Date>(firstFormat);
const [selectedDate2, setSelectedDate2] = useState<Date>(lastFormat);

DatePicker에 이번달 첫날과 마지막 날을 초기값으로 선언해주고 각각의 useState 또한 초기화해준다.

 

 

2. 위에서 초기화해준 useState값을 이용하여 넘겨줄 Props값을 선언해준다.

  const datePickerProps1 = {
    selectedDate: selectedDate1,
    setSelectedDate: setSelectedDate1,
  };

  const datePickerProps2 = {
    selectedDate: selectedDate2,
    setSelectedDate: setSelectedDate2,
  };

위 코드와 마찬가지로 각각의 컴포넌트에 넘겨줄 Props값을 각각 선언해준다.

 

 

3. 컴포넌트로 해당 Props를 전달해주면 된다.

  return (
  <>
    ...

    <DatePickerCom {...datePickerProps1} />

    ...

    <DatePickerCom {...datePickerProps2} />

    ...
  </>
  );
};

실제 DatePicker 컴포넌트에서는 Props.selectedDate, Props.setSelectedDate로 접근할 수 있다.