React : 컴포넌트에 전달할 props & 속성값을 객체안에 넣어서 활용하기.

 

달력 라이브러리를 활용하는데, 조건에 따라 다른 값이 컴포넌트에 전달되어야 했다.

 

편도냐 왕복이냐 조건에 따라서 달력에서는 편도일 경우 -> 출발일 날짜만 선택할 수 있게 하거나 /  왕복일 경우 -> 출발일, 도착일 두 날짜를 선택할 수 있게 해야 했다.

 

기본적으로

<DatePicker placeholder={onewayOrRound ? "가는 날" : "가는 날 - 오는 날"} />

이런식으로 전달해주는 값 안에서 삼항연산자를 활용해서 구현했었다.

그런데 이번 경우에는 워낙에 조건에 따라 전달해 주어야 하는 값이 많았다.

예를들어 편도냐 왕복이냐에 따라 다르게 들어가야 하는 속성 값이 10개라면, 그 10개의 속성에 대해 일일히 조건을 주어야 하는 것이다. 

 

props 하나 마다 일일이 onewayOrRound? 를 물어가며 값을 정해주는게 비효율적이라는 생각이 들어서 객체 안에 담아서 한번에 조건을 주면 좋겠다는 생각을 했다. 

 

스프레드 연산자를 활용해서 구현이 가능했다.

const onewayOrRound = {...(patternChange
      ? {
          placeholderText: '가는날 입력',
          selected: onewayDate,
          onChange: function (update) {
            setOnewayDate(update);
          },
        }
      : {
          placeholderText: '가는날 입력  -  오는날 입력',
          selectsRange: true,
          startDate,
          endDate,
          onChange: function (update) {
            setDateRange(update);
          },
        }),}

변수안에 조건에 따라 다른 객체값이 들어가게 만들고,

그 변수를 컴포넌트 속성값으로 넣어주면 된다. 넣어줄 때에도 스프레드 연산자가 필요하다.

 

    <DatePicker {...oneWayOrRound} />

 

안에서 바로 사용 할 수 도 있다.

 

 <DatePicker
      { ...( onewayOrRound ? { placeholder: '가는 날' } : {placeholder : "가는 날 - 오는 날"} ) }
      />

 

 

 

+ 객체 안에 함수 넣기. 

1. onClick: function update() {}
2. onClick: function() {}
3. onClick() {}