CSS 모듈로 가져온 속성값 - 대괄호 표기법

10-05 css_module의 index.js에서

Q1.

<h3>다중 클래스 적용(1) - 역따옴표 사용</h3>
<div className={`${myStyles['my-size']} ${myStyles['my-bg']}`} />

<h3>다중 클래스 적용(2) - 배열로 구성한 후 join 함수로 결합</h3>
<div className={[myStyles['my-size'], myStyles['my-bg']].join(' ')} />

 

이 구문에서,
myStyles['my-size']
이렇게 접근하는건 어째서야?

 

 

 

A1.

네, myStyles는 CSS 모듈을 통해 가져온 클래스 이름들을 포함한 객체입니다. 'my-size'와 같이 클래스 이름에 하이픈(-)이 포함되어 있으면 점 표기법(myStyles.my-size)을 사용할 수 없으므로, 대괄호 표기법인 myStyles['my-size']를 사용하여 접근합니다.

 

 

 

Q2.

저게 Json 객체에 접근하는 방식인가?

 

 

 

A2.

네, myStyles['my-size']는 JavaScript 객체의 속성에 대괄호 표기법으로 접근하는 방식이며, 이는 JSON 객체에 접근하는 방법과 유사합니다. 속성 이름에 하이픈(-)이 포함되어 있어서 점 표기법을 사용할 수 없으므로 대괄호 표기법을 사용합니다.

 

 

 

Q3.

점 표기법 또는 대괄호 표기법은, JSON 뿐만 아니라, 객체내부의 데이터에 접근하는 방식인거야?

 

 

 

A3.

네, 정확합니다. 점 표기법(.)과 대괄호 표기법([])은 JavaScript의 모든 객체(JSON 포함)에서 속성에 접근하는 방법입니다.

예를 들어:

// 두 방식 모두 같은 결과
object.property    // 점 표기법
object['property'] // 대괄호 표기법

// 특히 대괄호 표기법은 다음과 같은 경우에 필요합니다:
// 1. 속성 이름에 특수문자가 있을 때 (예: 하이픈)
// 2. 속성 이름이 변수일 때
// 3. 속성 이름이 숫자로 시작할 때

 

 

 

 

 

Q4.

그러면 왜 속성에 - 가 포함되어 있으면 점 표기법을 쓸 수 없는거야?

 

 

 

A4.

JavaScript에서 하이픈(-)은 뺄셈 연산자로 인식되기 때문입니다.

예를 들어:

myStyles.my-size

이렇게 작성하면 JavaScript는 이것을 다음과 같이 해석합니다:

myStyles.my - size

즉, myStyles.my에서 size를 빼는 수학 연산으로 해석하게 됩니다. 이런 문법적 충돌을 피하기 위해 하이픈이 포함된 속성 이름은 반드시 대괄호 표기법을 사용해야 합니다.

myStyles['my-size'] // 올바른 방법

 

 

 

Q5.

그렇다면, - 대신 _ 로 쓰면, 점 표기법으로 접근할 수 있게 되는건가?

 

 

 

A5.

네, 맞습니다. 언더스코어(_)를 사용하면 점 표기법으로 접근할 수 있습니다.

예를 들어:

// 하이픈 사용 - 대괄호 표기법 필요
myStyles['my-size']

// 언더스코어 사용 - 점 표기법 가능
myStyles.my_size

이는 언더스코어 "_"가 JavaScript의 유효한 변수/속성 이름 문자로 인정되기 때문입니다.