이 글을 쓰게 된 이유
- JS 기초를 배울때 ES6에서부터 추가 된 새로운 type 'symbol'이란 것을 보았지만 정확히 이 타입이 어떤 값을 나타내는지 정확히 알지 못했다. 그리고 React로 개발을 하다보면 가끔 Symbol과 관련 된 에러가 많이 발생하여 구글링으로 어영부영 해결은 했지만 정확한 에러의 원인을 알지 못해 공부하게 되었다.
Symbol
- JS의 원시(Primitive) 타입으로 ES6에서 새롭게 추가되었다.
🖐️ 원시(Primitive) 타입은 객체도 아니고 메서드도 아닌 타입을 의미한다.- Symbol은 객체 속성(object property)을 만들 수 있는 원시 타입이다.
Symbol 예시
let symbolProperty = Symbol("key");
let obj = {};
obj[symbolProperty] = "value"
console.log(obj); // {Symbol(key) : "value"}
console.log(obj[symbolProperty]); // "value"
console.log(typeof symbolProperty); // "symbol"Symbol 특징
- Symbol은 생성할 때마다 독립적인 값이 되기 때문에 같은 string type으로 정의해도 같은 값이 아니다.
let symbolProperty1 = Symbol("key"); // Symbol(key)
let symbolProperty2 = Symbol("key"); // Symbol(key)
let obj = {};
obj[symbolProperty1] = "value";
obj[symbolProperty2] = "value";
console.log(obj); // {Symbol(key) : "value1", Symbol(key) : "value2"}
console.log(symbolProperty1 === symbolProperty2); //false
//type은 같지만 독립적인 symbol이므로 key값이 같아보여도 다른 객체이다. (사실 어떠한 구조로 비교하는건지 개인적으로 의문이 든다....😭)- Symbol을 생성 했을 때 value (value of) 는 원시형 값이 아니기 때문에 toString() 등으로 문자 등과 합칠 수 없다.
"text" + Symbol("string"); // Error
// Uncaught SyntaxError: Invaild or unexpected token
### Symbol 생성 방법
```js
Symbol(key)
Symbol.for(key) // Symbol과 달리 전역으로 존재하는 global symbol table 참조
Symbol.iterator // 에러를 만날 때 가장 많이 만나는 에러명이 아닌가 싶다..Symbol의 private한 성질
- Symbol은 열거형 속성이 아니기 때문에 for in이나 Object.keys를 사용할 수 없다.
- 찾기 위해서는 Object.getOwnPropertySymbols로 찾아야한다. 또한 JSON.stringfy()도 무시한다.
let obj = {
[Symbol("a")]: 10,
[Symbol("b")]: 20,
};
Object.getOwnPropertySymbols(obj); //[Symbol(a), Symbol(b)]
Object.keys(obj); // []
for(let i in obj) {
console.log(i) // 반환값 없음
};
JSON.stringfy(obj); // "{}"React에서의 Symbol
- JSX 문법으로 태그를 생성할 때는 실제로는 함수가 호출된다.
<marquee bgcolor='yellow'>hi</marquee>
React.createElement(
/* type */ "marquee"
/* props */ "yellow"
/* children */ "hi"
);그리고 위 함수는 다음과 같은 객체를 반환한다.
{
type: "marquee"
props: {
bgcolor: "yellow",
children: "hi",
}
key: null,
ref: null,
$$typeof: Symbol.for("react.element"),- $$typeof는 글로벌한 심볼테이블로 react상에서 관리가 되는 값이다.
- 리액트를 만든 팀에서는 XSS를 컴포넌트별로 어떻게 효과적으로 막냐는 문제가 있었다고 한다.
- 이런 경우를 막기 위해 $$typeof로 심볼값을 모든 jsx 객체에 설정하도록 하게 만들었다.
🖐️ XSS란?
Cross-site Scripting 약자는 CSS지만 이미 흔히 쓰는 Cascading Style Sheets(CSS)가 있기 때문에 XSS라고 칭하였고 이는 스크립트를 악의적으로 삽입해 사용자에게 공격하는 해킹 기법이다. 다음에 자세히 다룰 예정.
하잇