📌 TIL 001 : React

✏️ React TIL 기록을 시작하며...

나는 리액트를 프론트엔드 국비과정을 통해 공부했지만 커리큘럼이 끝나기 직전에 정말 짧게 배우고 넘어갔던지라 심도있는 학습은 불가능했더랬다... 강의가 끝나고 리액트 공부도 미뤄두고 얼레벌레 신입 퍼블리셔로 취뽀해서 먹고사는 지금, 회사를 다니면 다닐수록 리액트 기술자에 대한 수요는 늘고있고 기존의 사이트를 리액트화 시키는 곳이 많다는 걸 느끼고 있다.

그리고...

몸 담고 있는 곳에서도, 개발단에서 리액트를 사용하기 시작했고, 퍼블리싱단에서도 원활한 개발을 위해 리액트화를 해나가야하는 시점이 오고야 말았다.

이젠 정말 더이상 미룰 수 없어! 리액트로 퍼블리싱을 해야만 한다!
그래서 시작한다. 오늘부터 열심히 TIL 기록하기

👩🏻‍💻 리액트 시작하기

시작에 앞서... npm으로 리액트 프로젝트를 설치하는 방법도 있지만, 강의 내용을 토대로 unpkg 링크를 HTML에 호출하여 코딩하는 방식으로 진행하였다.

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<body></body> 내에서 다음과 같이 호출

DOM에 내용을 그려주기 위한 빈 div 태그를 만들어준다.

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

📓 Javascript 문법

리액트 용법을 사용하기 전에 먼저 일반적인 Vanilla Js 방식으로 div 태그에 Hello, World! 라는 문구를 지닌 h1 태그를 넣어보도록 하자.

const rootElement = document.querySelector("#root");
const element = document.createElement("h1");
element.textContent = "Hello, World!";
rootElement.appendChild(element);

여러 가지 방법이 있겠지만, 강의 내용을 토대로 작성해보았다.
위의 스크립트를 풀어서 해석해보자면,

#root 라는 id를 가진 div 태그를 rootElement 라는 변수명으로 선언해주고, element라는 변수명으로 h1 태그를 생성해준다.
h1태그인 element에 텍스트 Hello, World! 를 넣어주고, 그 h1(element에) 태그를 div#root(rootElement)에 넣어준다.

이런 내용이 된다.

이제 DOM 구조를 살펴보면 아래처럼 변한 걸 확인할 수 있다.

<div id="root">
  <h1>Hello, World!</h1>
</div>

Author And Source

이 문제에 관하여(📌 TIL 001 : React), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seonhu93/TIL-Fast-Campus-React-01

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다