react-dom2 [React]React-dom 과 render 리액트 18기준 레거시가 된 render 함수의 구조를 간단히 들여다 보자 render함수는 react-dom 패키지의 ReactDomLegacy로 분류 되어 있다. export function render( element: React$Element, container: Container, callback: ?Function, ) { if (__DEV__) { console.error( 'ReactDOM.render is no longer supported in React 18. Use createRoot ' + 'instead. Until you switch to the new API, your app will behave as ' + "if it's running React 17. Learn " + .. 2022. 7. 17. [React] React-dom에서의 innerHTML 리액트의 경우 리액트(jsx,정의 등)와 렌더러(웹의 경우 보통 react-dom)를 사용해서 어플리케이션의 UI를 렌더링한다. 렌더러의 경우 그 내용이나 구조등이 복잡한 편이라 정리해서 쪼개서 글을 쓰자니 너무 양이 많아지는 문제점이 있다. 그래서 소스코드 일부를 작게작게 쪼개서 정리하는 포스팅을 추가적으로 하기로 했다. 리액트의 경우 v-dom을 만들어서 DOM 자체를 리액트에서 관리하다보니 XSS 공격등 상대적으로 프론트엔드 영역에서의 보안이 안정적이다. 내부 dom을 직접 모두 관리하고 innerHTML등의 기존 js API를 최대한 사용하지 않아서 그런데 문제는 개발을 하다보면 innerHTML등의 API가 필요한 상황이 존재한다는 것이다. HTML 태그가 포함된 문자열을 DOM으로 추가하는 경.. 2022. 5. 31. 이전 1 다음