React7 [React_강의] 3. 순수 HTML 파일에 리액트 적용 1) head 부분의 script 태그에 리액트 라이브러리 넣어주기 -7,8 라인 2) body의 div id를 root로 맞춰주기 (루트엘리먼트) - 12라인 3) body의 script 태그에 ReactDom.render를 통해 엘리먼트 표시하기 - 14라인 - document.getElementById("root"): id가 root인곳 참조 - ReactDOM.render :리액트 프로젝트의 root에 한번 사용 : 그리고 각각의 엘리먼트를 만들고자 하면 React.createElement를 통해서 엘리먼트를 만들어 표시함 - React.createElement : 매개변수 순서: 1 태그, 2 속성(css라던가), 3 요소 ========================================.. 2022. 8. 21. [React_강의] 2. 리액트 프로젝트 구조 node_modules: 노드에서 기본적으로 사용하는 폴더 public(하나의 단일 페이지로부터 실행( 리액트는 싱글페이지 애플리케이션이니까 ) index.html: 웹사이트에 올려지는 파일 ui 관련된 모든 요소들을 root 엘리먼트에서 실행한다. 요약: 웹 페이지에 실제로 표시되는 영역 src index.js: 리액트의 루트영역 html에 root 영역을 찾아서 // document.getElementById('root'); 그곳에 리액트 컴포넌트를 출력함 // 요약: 실제 리액트 프로젝트, 자바스크립트가 실행되는곳 App.js: 리액트의 모든 컴포넌트들을 출력시켜주는 것 많은 기능들이 여기서 표시가 된다 // displayName = App.name; 페이지 이동 가능한 라우팅 기능을 해준다. //.. 2022. 8. 21. [React_강의] 1. 개념 및 환경 구축 - Angular, Blazor와 같은 프레임워크가 아닌 jQuery와 같은 자바스크립트 라이브러리 - MVC와 같은 디자인 패턴 아님 - 싱글 페이지 애플리케이션(SPA)을 만들어내는 자바스크립트 라이브러리 - 인터렉티브한 UI를 작성하는 자바스크립트 라이브러리 컴포넌트 기반 독립된 UI를 만드는 모든 구성요소를 컴포넌트라고 함 (하나의 페이지도 컴포넌트가 될수 있고 일부분도 컴포넌트가 될 수 있음) 가상DOM 전체페이지를 다시 그리는게 아니라 바뀌는 부분만 업데이트 => 빠르다는 장점 페이스북에서 관리하는 오픈소스 JSX(JS +HTML) 자바스크립트 안에 html의 요소를 사용할 수 있음 => UI 표현 public > index.html: 실제 웹 페이지에 표시되는 영역 실제 리엑트 자바스크립트 .. 2022. 7. 30. 이전 1 2 다음
