[React, 냥짤메이커] html 안에 React를 넣어보자!
사실 2일차가 아닌건 너도 알고 나도 아는 사실이다.
정말.. 이건 공문 읽으면서 + 자바스크립트 인포 보면서 하려 했지만..
내가 어지간해선 눈물이 안나는데..
자꾸 자버린다 ㅎㅎ 그래서 거금 이만 이처넌 내고 인프런 강의를 들었다.. 한바퀴 돌아서 완성은 했지만 뭔가 김종민 빙의해서 아방수마냥 만들어버렸기에, 제대로 짚고 기록하면서 다시한번 2트 해보자. 2트해서 안되면 3트, 안되면.. 울어 걍
강의는 html에서 script를 이용해 JS를 삽입하고, JSX를 쓰는법도 배운다.
html에 React 넣기
React 공식문서 초반에서 읽었는데!! 하고 반가웠다 물론 읽었다했지 안다곤 안했다
HTML에게 React라는 언어를 쓴다고 알려주는 작업이라고 생각한다. 알려주는 방식은 우리가 작성할 <script> 전에 추가하면 된다.
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
들어가보면 리액트 코드가 뉴비 기죽이듯이 줠라 많이 써있다.
그냥.. 리액트랑 리액트DOM 코드라구그리고난 뒤, JSX 언어를 html도 알아들을 수 있도록 만들어주는 통역사가 babel이 필요하다.위에 추가한 script 아래에 써주자.
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>이제 난 리액트 지존이다 값에다 막 태그 써버릴거다.
화면에 그리기
우효~ 내 죽이는 화면을 맛봐라!
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script="text/babel">
const yaong = (
<li>
애옹?
</li>
)
</script>된거 아니냐? 왜 또 오류냐?
사실은 어따 그릴건지 할당을 안해서 헤헷 html의 어디 구역에 그릴건지도 잘 말해주자
<body>
<div id="app"> // 여기에 그릴거라고 id="app" 이름표 달고 자리 만들기
</div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script="text/babel"> // JSX로 통역해줘
const yaong = (
<li>
애옹?
</li>
);
const here = document.querySelector("#app"); // body 내부에 있는 자리 선정
ReactDOM.render(yaong, here); // here에 yaong 그려줘
</script>
</body>울지마 울지마 코드가 길어졌다고 울지마
그저 html element인 body 내부에 자리를 만들고, '여기 그릴거에요' 알려줘야한다.
그래서 div로 자리를 만들고, div가 여기있다고 id라는 이름표를 달아줬다.
script 내부에서 render를 할 때, id 이름표로 구역을 정해주고, render 할 때 위치가 여기라고 알려준다 결론적으로 id="app" 구역에 yaong을 넘겨줘서 render로 그린거다!!
이렇게.. 하나부터 열까지 똥기저귀 다 갈아줘야하는데 그나마 간단해진거라니.. 전 이만 가볼게요
어쨌든 이제 처음으로 화면을 그렸다!
Author And Source
이 문제에 관하여([React, 냥짤메이커] html 안에 React를 넣어보자!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@saewoo1/React-2일차-zk2unclt저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
