Frontend/React.js

React의 기초

응애개발자 애기 2022. 3. 29. 17:27
728x90
반응형

index.html

<body>
	<div id="root"></div>
</body>

html파일

 

 

<script>
	const root = document.getElementById("rood");
    const span = React.createElement(
    	"span", //만들고자 하는 html element를 기입
        {id: "sexy-span", style:{ color: "red" } }, //id나 style 같은 요소를 삽입
        "Hello I'm a span" //html요소 안에 들어갈 text를 기입
    );
	
    ReactDOM.render(span, root); // root 안에 span이라는 요소를 렌더링 한다. 

</script>

script 부분

 

이전에는 html요소를 먼저 만들고 js에서 그것을 조작했다면, 

react에서는 js를 통해 html요소를 만들게 된다.

이로써 얻을 수 있는 이점은 사용자들에게 보여질 내용을 컨트롤 할 수 있다는 것이당 ^.^

 

 

 

 

 

 

 

 

 

 

라우팅

라우팅이란?

React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다. - 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종유의 라우터 컴포넌트를 제공한다.

https://goddaehee.tistory.com/305

 

[React] 6. React Router (리액트 라우터) 사용하기

6. [React] 6. React Router (리액트 라우터) 사용하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에서 페이지 이동 처리 하는 방법 ] 입니다. : ) 우리가 흔히 말하는 "페이지 이동"이라..

goddaehee.tistory.com

 

 

728x90