본문 바로가기

FrameWork/React

[React] 속성 이름을 동적으로 설정 ( 표현식, 변수의 문자열 또는 결과 값 )

  • 속성 이름을 동적으로 설정해야 할때,
  • 대괄호 를 사용하여 속성 이름을 설정할 수 있다.
  • 이 기능은 계산된 속성 이름(computed property name) 이라는 ES6의 기능이다.
  • 이를 통해 변수나 표현식의 결과를 속성 이름으로 사용할 수 있다.
const todayDate = new Date().toISOString().split('T')[0];
const [selectedDate, setSelectedDate] = useState('');

<Calendar
  style={styles.calenderWrap}
  markedDates={{
    '2023-12-16': { selected: true, marked: true, color: '#50cebb' },
    [todayDate]: { marked: true }, // 오늘날짜 넣기
    [selectedDate]: {
      selected: true,
    }, // 선택된 날짜 넣기
  }}
/>