[React] Why React? 리액트 시작하기

 

무작정 시작해보는 리액트 공부 🤨
자바스크립트 초반 이해에 큰 도움을 받았던 니꼬쌤 강의로 시작했다.

 

 

일단 리액트가 무엇을 해결하기 위해 만들어진 것인지 이해하자.

 

React.js는 interactive한 화면을 만들기 위해서 페이스북에서 만든 자바스크립트 라이브러리이다.

요소를 잡아와서 이벤트를 달고 함수를 만들어서 붙이는 등의 작업을 훨씬 심플하게 만든다.

 

 

 

 

React 사용 준비

react와 react-dom 링크를 html 파일에 추가해야 한다.

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

react는 interactive UI를 만들어내는 엔진 같은 역할을 하고,

react-dom은 만들어진 UI를 HTML에 올려둘 수 있게 하는 역할을 한다.

 

 

 

 

 

React로 element 만들기

실제로 리액트를 사용할 때는 JSX를 사용해 더 직관적으로 코드를 작성하지만

일단 진짜 모습의 리액트 코드를 이해하자.

 

const title = React.createElement("h3", {id: "first-title"}, "content");

리액트로 element를 만드는 변수를 선언한다.

세가지 인자가 들어갈 수 있다.

( '만들려는 태그명',  { 태그가 가질 속성 },  '태그가 가질 내용' )

 

그리고 만든 변수를 react-dom으로 HTML에 반영해준다.

const root = document.getElementById("root");
// body에 root라는 ID를 가진 div를 만들어서 잡아왔다.
const title = React.createElement("h3", {id: "first-title"}, "content");

ReactDOM.render(title, root);
// title 을, root에 반영해줘

 

 

 

 

 

 

JSX로 더 심플하게 만들기

JSX는 자바스크립트를 확장한 문법이다.

리액트에서 요소를 만들때 HTML과 비슷한 형태로 만들 수 있게 해준다.

const Title = (
  <h3 id="title" onMouseEnter={() => console.log("mouse is here")}>
    This is title
  </h3>
);

위에 선언했던 title을 이렇게 적어줄 수 있다.

HTML과 같은 형식이기때문에 훨씬 직관적이고 작성이 용이하다.

 

하지만 이렇게만 해서 실행해보면 브라우저에는 에러가 발생한다.

브라우저는 JSX를 이해하지 못하기 때문이다.

 

 

 

 

 

Babel 사용하기

Babel is code transformer.

babel을 사용해서 JSX를 브라우저가 이해할 수 있는 형태로 바꿔줄 수 있다.

<!-- load babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

주의할 것은 babel을 불러온 다음, script에 type="text/babel" 속성을 추가해줘야 제대로 인식하고 동작한다는 것이다. 

 

 

그래서 결국 JSX를 사용해 만드는 코드는 다음과 같아진다.

// JSX로 태그를 선언할때 함수를 만들듯이 arrow function을 써준다. 함수를 선언한것과 동일하다.
// 이렇게 선언한 것은 컴포넌트라고 부를 수 있다.
const Title = () => (
  <h3 id="title" onMouseEnter={() => console.log("Mouse is here!")}>
    This is title
  </h3>
)
const Button = () => (
  <button onClick={() => console.log("Button is clicked!")}>
    Click here
  </button>
)

// container를 만들어서 위에 만든 함수를 태그모양에 넣어 추가한다.
// 컴포넌트는 꼭 대문자로 시작해야한다. 소문자로 만들면 컴포넌트 이름이 태그 이름으로 인식되어버리기 때문이다.
const Container = () => (
  <div>
    <Title />
    <Button />
  </div>
)

// 최종적으로 container를 root에 렌더한다.
ReactDOM.render(<Container />, root);

 

컴포넌트를 만들때, 아래 코드처럼 function으로 만든것과 const로 선언한것이 동일하다.

(function으로 선언해서 문제가 없으려면 return을 추가로 넣어줘야 하기 때문에 const로 선언하는것이 많이 쓰인다.)

const Button = () => (
  <button onClick={() => console.log("Button is clicked!")}>
    Click here
  </button>
);

// is same with

function Button() {
  return (
    <button onClick={() => console.log("Button is clicked!")}>
      Click here
    </button>
  );
}

 

 

 

 

 

여기서 알 수 있는 React의 강점

1. interactive web을 만드는 과정은 대부분 event들을 감지하는 것으로 부터 시작한다.

HTML에서 요소를 만들고 자바스크립트로 요소를 잡아와서 이벤트를 등록하는 과정 대신,

리액트에서 요소를 직접 만들고 거기다 속성으로 이벤트를 추가하게 만드는 것이 리액트의 강점이다.

 

2. 바닐라 자바스크립트에서는 만들어 놓은 HTML 요소들을 잡아와서 필요할때 업데이트하지만,

리액트는 처음부터 요소를 만들어서 ⭐️ 업데이트가 필요할 때⭐️  HTML에 집어넣는다.

이 지점에서 해결할 수 있는 의문점이 있다.

 

document.createElement로 태그를 생성하는 것과

React.createElement로 태그를 생성하는것에는 무슨 차이가 있는가?

 

바닐라 자바스크립트로 만든 페이지에서는 화면에 업데이트가 필요할때마다 노드트리를 처음부터 다시 생성한다.

그래서 이벤트가 일어날때 태그 전체가 깜빡이며 업데이트 되는 모습을 볼 수 있다.

 

하지만 리액트는 가상돔을 사용하기때문에, 일단 가상돔에서 렌더링 후 딱 바뀌어야 하는 부분만 잡아내서 실제돔에 던져준다.

그래서 이벤트가 일어날때 바뀌는 데이터 부분만 깜빡이며 업데이트 되는 모습을 볼 수 있다.

 

React에서의 가상돔 개념

 

 

 

 

 

 

일단 여기까지 정리!

Javascript ES6 문법 내용이랑 동시에 공부하려니 너무너무 헷갈리는 중.

일단 ES6 문법 마저 정리하고 돌아오자!