React JS 기초

출처  하기싫은 짤 검색했더니 제일먼저 나온 짤...

미루고 미루고 미루다 드디어 마음잡고 다시 공부를 시작해보았는데...

내가 강의를 끝까지 듣고 정리할 수 있을지 모르겠지만 일단 시작이 반이라니까~

반은 한거 아닐까 ㅎㅎ

 

---

 

 

해당 정리는 노마드코더의 https://nomadcoders.co/react-for-beginners 강의를 직접 수강후 정리하였습니다

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

 

✨ ReactJS를 사용하는 이유

1. 상위 1만개의 웹사이트 중 45%가량은  React를 사용
   (에어비앤비, 인스타그램, 페이스북, 넷플릭스)
2. 페이스북이  ReactJS를 만들었고, reactJS에 막대한 투자를 하고있음
   금방 폐기되지 않을 가능성 높음.
   
3. 큰 커뮤니티를 가지고 있음. Javscript와 가장 가까운 언어
   (기술을 배울때는 그 기술에 대한 생태계가 존재하는 것이 좋음)
   

 

✔️ 필요선행 지식 [바닐라 JS로 크롬앱 만들기(html, css, javascript)]

https://nomadcoders.co/javascript-for-beginners

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

✔️  설치

[브라우저 (ex. 구글 크롬, 브레이브 , 사파리 등)]

https://www.google.co.kr/chrome/?brand=IBEF&gclid=Cj0KCQjwiIOmBhDjARIsAP6YhSW7lFIAEE8Im0zEOA0aHfxIYiYTahDbHhWyhnu3zeeGhecRr7T_1WIaAky_EALw_wcB&gclsrc=aw.ds

Chrome 웹브라우저

 

[텍스트 에디터(ex. visual studio code)]

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

---

 

✨ Javascript vs React JS 

1. Javascript 카운터만들기

 

① ui 그리기

<button id="btn">click me</button>

 const button = document.getElementById("btn");
    function handleClick() {
      console.log("i have been clicked");
    }
    button.addEventListener("click", handleClick);

click me 버튼을 클릭했을 때, console에서 i have been clicked라는 텍스트를 확인 할 수 있습니다.

 

 

② click me 버튼을 클릭했을 때 ui의 숫자가 바뀌도록 수정

<span>Total clicks: 0</span>
<button id="btn">click me</button>

let counter = 0;
const span = document.querySelector("span");
const button = document.getElementById("btn");
function handleClick() {
  // console.log("i have been clicked");
  counter = counter + 1;
  span.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick);

📌 span.innerText를 통하여 ui의 숫자가 클릭한 횟수만큼 업데이트 된다.

📌 addEventListener를 통해 button에 click이벤트가 발생했을 경우 handleclick 함수가 실행되게 요청한다.

 

---

2. React 카운터만들기

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

임시로 React를 설치하지 않고 링크만 import하여 테스트하는 방법

 

링크 import 후 console에  React를 입력했을 때, React 코드가 확인되면 import가 잘 된것

① React JS element  생성
기존 스크립트로 작성한 코드를 React로 재구성(단, 기존 코드처럼 html코드를 직접 작성하지 않음)
Javascript와 React JS를 이용하여  element 생성

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

const root = document.getElementById("root");
const span = React.createElement("span");
ReactDOM.render(span, root);

ReactDOM.render: React element를 가지고 HTML로 만들어 배치, 사용자에게 보여준다.

'HTML root안에 span을 위치시킨다'는 의미로 해석

 

개발자 도구를 통해 div id="root" 태그 안에 span 요소가 생긴것을 확인 할 수 있다. 

 

const root = document.getElementById("root");
const span = React.createElement("span", { id: "cute-span" });
ReactDOM.render(span, root);

createElement에 더 작성할 수 있는  argument  
argument로 둘 수 있는 것:  span의 property (ex. classname, id, style, event listener ... )

 

span에 id="cute-span"이 생긴 것을 확인할 수 있음.
 
 

  const root = document.getElementById("root");
  const span = React.createElement(
    "span", //html element tag  이름
    { id: "cute-span", style: {color:'red'} }, //property, props가 포함된 object
    "Hello, Im a span" //content
    );
  ReactDOM.render(span, root);

컬러 스타일 style="color: red;"가 생긴것도 확인 가능하다.

 

 

📌 하지만 이렇게 직접 createElement를 쓰는 방법은 좋지 못한 방법으로 대부분의 프론트엔드 개발자는 사용하지 않는 방식이다.