728x90 SeSAC 클라우드 기반 JAVA 풀스택 웹개발/4. React2 [SeSAC] JSX JavaScript 코드와 XML(HTML)이 혼용될 수 있는 파일 확장자이다JS 기반 문법에 HTML을 작성할 수 있다.JS를 사용해도 되지만 JS코드에서 HTML을 작성하는 과정의 번거로움을 덜어주는 역할을 한다.HTML을 함수에 담아 재사용 할 수 있기 때문이다Component컴포넌트란 재사용 가능한 UI 요소를 의미한다.렌더링이 가능한 요소를 반환하는 함수에 구성된다.다시 말하면 JSX 요소를 반환하는 함수를 리액트에서는 컴포넌트라고 한다.HTML에서 사용했던 태그처럼 사용이 가능하여 UI 요소를 다룰 때 유용하다.규칙하나의 루트 엘리먼트로 반환function App() { return ( 제목 // 에러 발생 내용 );}export default App;단 하나의 엘리먼트로 감.. 2024. 11. 6. [SeSAC] React 시작하기 JS를 사용하며 필요할 때마다 요소(Element)를 생성한 경험이 있을 것이다.const liTag = document.createElement("li");const divTag = document.createElement("div");liTag.append(divTag);DOM조작을 통해 트리에 정보를 업데이트 시켜 화면에 나타나게 한다.이러한 작업이 반복되고 더욱 복잡하다면 reflow가 발생해 큰 비용과 성능에 문제가 발생한다.reflow: 요소의 너비, 높이, 위치 등이 변경되어 렌더트리 재생성Virtual DOMJS Object로 만들어진 DOM두개의 가상돔 객체를 가진다.렌더링 이전 화면 구조렌더링 이후에 보이게 될 화면 구조어떤 이벤트로 인해 DOM조작이 필요하여 내용이 변한다면가상돔에 먼.. 2024. 11. 4. 이전 1 다음