React 공식 발표에 의하면..
아래 두 코드는 React 18.0.0 (March 29, 2022) 에서 새로 도입된 ReactDOM.createRoot를 사용하여 앱을 렌더링하는 방식에서 약간의 차이를 보인다. 두 코드의 주요 차이점은 document.getElementById("root")의 반환값에 대한 타입 어설션(type assertion) 방식에 있다.
Type Assertion (as)
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
JavaScript
복사
•
여기서 as HTMLElement는 TypeScript의 타입 어설션을 사용하고 있다. 이는 document.getElementById("root")가 null이 아니며, HTMLElement 타입임을 명시적으로 선언하는 방식이다.
•
이 방식은 개발자가 해당 요소가 확실히 존재하며 HTMLElement 타입임을 보증할 때 사용한다.
Non-null assertion (!)
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
JavaScript
복사
•
!는 TypeScript의 non-null assertion operator이다. 이것은 document.getElementById('root')의 결과가 null이 아님을 강제로 선언하는 방식이다.
•
이 연산자를 사용하면 해당 요소가 반드시 존재함을 보증하지만, 만약 실제로 null이면 런타임 오류가 발생한다. 따라서 이 방식은 개발자가 해당 요소가 페이지 로딩 시 항상 존재할 것이라는 것을 확신할 때 사용된다.
그래서 차이는..
두 코드 모두 document.getElementById("root")의 반환값이 null이 아니라는 것을 가정하고 있지만, 타입 어설션을 사용하는 방식에 있어서 약간의 차이가 있다.
첫 번째 방식은 반환값이 HTMLElement임을 보다 명시적으로 선언하는 반면, 두 번째 방식은 반환값의 존재 여부만을 확인한다. 실제로는 두 방식 모두 유사한 결과를 나타내며, 선택은 개발자의 스타일과 프로젝트의 타입 체킹 정책에 따라 달라질 수 있다.
어쨌든 두 방법 모두 React 18의 새로운 기능인 ReactDOM.createRoot를 사용하고 있으며, 이는 React 18에서 도입된 최신 방식이다.
무엇이 더 좋은 방식인가
React 18에서의 ReactDOM.createRoot 사용 자체가 최신 방식이며, 여기서의 TypeScript 타입 어설션 방식은 최신성보다는 상황에 따른 개발자의 선택에 관한 것이다. React나 TypeScript의 버전에 따라 "더 최신"이라고 할 수 있는 것은 아니며, 개발자가 어떤 방식을 더 선호하거나 프로젝트의 필요에 맞는 방식을 선택하면 된다.
개발 환경에서 TypeScript를 사용한다면, 각 상황에 맞게 ! 또는 as를 적절히 사용하는 것이 중요하다. !는 조금 더 간결하지만, 실제로 해당 요소가 없을 경우 런타임 오류를 발생시킬 수 있다. as는 타입을 보다 명확하게 지정하지만, 코드가 약간 더 길어질 수 있다.
결론
as를 쓴다고 해서 딱히 코드가 엄청 길어지는 것도 아니기에, 타입을 명확하게 지정하는 as를 쓰겠다. !는 해당 요소가 없으면 런타임 오류가 발생하므로!