점 표기법(정적속성) vs 대괄호 표기법(동적속성)
❗️상황
공부를 하면서 문득 이렇게 작성한 코드를 보고 점 표기법으로 작성을 안하는 이유가 뭐지 하고 의문이 들었다.
export default function App() {
const [order, setOrder] = useState("createdAt");
const sortedItems = items.sort((a, b) => b[order] - a[order]);
/.../
}
❗️공부하고 깨달은 점
점 표기법으로 접근하려면 속성 이름이 고정된 경우에만 사용할 수 있습니다.
예를 들어, b.order와 같이 접근하는 경우에는 order가 객체의 정적 속성이어야 합니다.
그런데 지금 코드는 order값이 상태 값으로 동적으로 설정되어 있으므로 대괄호 표기법(b[order])을 사용해야 합니다.
❗️결론
점 표기법과 대괄호 표기법의 차이점
- 점 표기법 (.): 정적으로 정의된 속성에 접근합니다.
- 대괄호 표기법 ([]): 동적 속성에 접근합니다. 속성 이름이 변수로 지정될 수 있습니다.
🔥마무리
상태 값처럼 동적으로 변하는 값은 대괄호 표기법을 사용해야 한다는 점을 알아서 유익한 공부 였다!
오늘도 화이팅!!