React 과제 공부

---

- input type="date"

input 태그의 date 속성은 달력 형태로 날짜를 선택할 수 있는 기능을 제공한다.

<input type="date" value="2018-07-22" min="2018-01-01" max="2018-12-31" />

value : 초기값
min : 선택 가능한 최소 달력
min : 선택 가능한 최대 달력

---

- toLocaleDateString()

toLocaleDateString() 메서드는 이 날짜의 날짜 부분을 현지 표준 시간대로 언어에 맞게 표현한 문자열을 반환한다.

- year : 연도의 표현 방식 ("numeric", "2-digit")
- month : 월의 표현 방식 ("numeric", "2-digit", "long", "short", "narrow")
- day : 일의 표현 방식 ("numeric", "2-digit")
- weekday : 요일의 표현 방식 ("long", "short", "narrow")

날짜 포맷팅

const event = new Date('2024-01-01').toLocaleDateString('ko-KR', {
  year: 'numeric', // 년도
  month: 'long', // 월
  day: 'numeric', // 일
  weekday : 'long' // 요일 
})

---

- select, option

옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)를 정의할 때 사용하고, "select" 요소 내부의 "option" 요소는 드롭다운 리스트에서 사용되는 각각의 옵션을 설정한다. "selected" 속성이 명시된 옵션은 드롭다운 리스트에 가장 먼저 표시된다.

<select>
  <option value="asc" selected>오름차순</option>
  <option value="desc">내림차순</option>
</select>

---

- array.sort()

배열의 요소를 정렬한 후에 그 배열을 반환하는 함수

const fruits = ['banana', 'cherry', 'apple'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'cherry']

숫자를 정렬할 경우 sort 만 사용 시 string 타입으로 인식하여 정렬되므로 비교함수를 sort() 메서드에 전달해야함

const numbers = [10, 5, 100, 1];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 10, 100]

- 객체정렬

const items = [
  { name: 'Banana', price: 1 },
  { name: 'Cherry', price: 3 },
  { name: 'Apple', price: 2 },
];
items.sort((a, b) => a.price - b.price); // price를 기준으로 정렬
console.log(items); 
// [ 
// { name: 'Banana', price: 1 },  
// { name: 'Apple', price: 2 },  
// { name: 'Cherry', price: 3 } 
// ]

---