리액트(react) - JSX(JavaScript XML) 란 .feat(symbol)

 

jsx 이미지

 

 

728x90

반응형

 

 

 

※콘솔로 jsx 찍어보고 궁금증이 생겨서 정리하기

---

 

 

JSX 란

• JSX는 별도의 언어가 아니라 개발자가 JavaScript 파일에 HTML과 유사한 코드를 작성할 수 있도록 하는 구문 확장이다.
• UI 구성 요소를 설명하는 더 읽기 쉽고 표현적인 방법을 제공하므로 코드를 더 쉽게 이해하고 유지 관리할 수 있다.
• JSX 코드는 HTML처럼 보이지만 실제로는 Babel과 같은 도구에 의해 일반 JavaScript로 변환되는 구문이다.
• 결과 코드는 UI 구성 요소를 만들고 조작하는 JavaScript 함수 호출 집합이다.
• JSX 코드는 HTML과 유사한 태그와 JavaScript 표현식을 모두 포함할 수 있으므로 개발자가 동적 데이터를 UI 구성 요소에 쉽게 포함할 수 있다.

 

---

 

 

콘솔을 찍어보고 생긴 궁금증

 

배열에 JSX 데이터를 push 해서 console.log() 를 찍어보면 배열에 데이터가 symbol 로 나오는데 대한 이유는?

 

 

React에서 JSX 데이터를 배열에 push하고 console.log()으로 출력하면, 배열의 데이터가 심볼(Symbol) 형태로 출력된다. 이는 JSX 데이터가 객체(Object) 형태이기 때문이다.

 

React에서 JSX 데이터는 Virtual DOM으로 변환되는데, 이 과정에서 JSX 데이터는 객체 형태로 변환된다.

이렇게 변환된 JSX 객체는 내부적으로 Symbol을 사용하여 구현된다.

따라서 JSX 데이터가 배열에 push되면, 배열에 들어간 JSX 데이터는 Symbol 형태로 출력된다.

 

그러나, Symbol은 객체의 고유한 식별자로써, JSX 데이터를 비롯한 다른 객체와 구분할 수 있는 유일한 값이다.

이는 React에서 컴포넌트의 상태(state)를 관리하거나, 프로퍼티(props)를 전달하는 등의 작업에서 중요한 역할을 한다.

따라서, JSX 데이터를 배열에 push하고 출력할 때 Symbol 형태로 출력되는 것은 정상적인 동작이다 만약 JSX 데이터를 출력할 때 Symbol이 아닌 다른 형태로 출력하고 싶다면, Symbol을 문자열로 변환하여 출력하거나, JSX 데이터를 JSON 형태로 변환하여 출력할 수 있다.

 

 

 

---

 

 

 

JSX 가 배열에 들어가고 출력될 때 JSX 객체가 symbol 을 사용해서 구현된다면 고유의 값을 가지고 있는 건데 왜 배열로 렌더링 할 때 key 가 필요할까. 

 

 

React에서 JSX 요소의 배열을 렌더링 할 때 각 요소에는 고유한 "키" 가이 있어야 한다.

요소가 추가, 제거 또는 재정렬될 때와 같이 배열이 변경될 때 React가 키를 사용하여 UI를 효율적으로 업데이트하기 때문.

JSX 객체는 고유한 값인 symbol을 사용하여 구현되지만 키는 symbol와 다른 용도로 사용되기 때문에 여전히 키가 필요하다.

 키는 React가 변경된 요소를 식별하는 데 도움이 되므로 업데이트가 필요한 UI 부분만 효율적으로 업데이트할 수 있다.

키가 없으면 React는 새 배열의 각 요소를 이전 배열의 각 요소와 비교하여 어떤 것이 변경되었는지 확인하는데 이는 배열의 크기가 클 경우 매우 느리고 비효율적인 프로세스일 수 있다.

키를 사용하면 React에서 어떤 요소가 변경되었는지 빠르게 식별하고 해당 요소만 업데이트할 수 있다.

요약하면 키는 React에서 JSX 요소의 배열이 변경될 때 UI를 효율적으로 업데이트하는 데 사용되는 반면 symbol는 React에서 내부적으로 JSX 개체를 구현하는 데 사용된다.

 

 

 

---