[React] 1. Basic of React

본 게시글은 노마더코더의 ReactJS로 영화 웹서비스 만들기 코스를 수강하며 정리한 글입니다.

 

React

기존에는 HTML에서 개체를 생성하고 이 개체와 상호작용하기 위해서는

JS의 document.getElementById나 document.querySelector와 같은 함수를 통해

HTML 객체를 가져와야 상호작용 할 수 있었다. 

즉, HTML 생성 -> 자바스크립트로 가져와서 작용

 

그러나 React에서는 자바스크립트에서 개체를 생성하여 브라우저에서 로딩 시 HTML 태그를 알아서 생성하고 뿌려준다.

즉, 자바스크립트 생성 -> 브라우저에 뿌릴 시 HTML 생성

 

이로 인해 개체의 생성과 상호작용에 대한 정의가 모두 자바스크립트 안에서 이루어진다.

ReactDOM

React는 정확하게 말하면 어플을 interactive하게 만들어주는 라이브러리(엔진)이고,

ReactDOM은 실질적으로 React Element를 HTML body에 둘 수 있도록 만들어주는 라이브러리

Component

HTML을 반환하는 함수, 하나가 작은 기능을 가지는 HTML 덩어리

React.createElement("HTML 태그", {"기타 property"}, "본문" or [Elements])

React Element 생성

ReactDOM.render(Element, root)

괄호 안의 React Element를 HTML로 만들어 root에 배치한다는 의미

Event

HTML에서는 addEventListener를 통해 event 작성

React에서는

 

React.createElement("HTML 태그", {
    onClick: () => console.log("Hello Blog"),
}, "본문" or [Elements])

 

처럼 기타 property 부분에서 바로 작성 가능 -> 모두 자바스크립트 안에서 한번에 처리

JSX

"HTML과 흡사한" 문법을 이용하여 React Element를 작성할 수 있게 해주는 JavaScript 문법

 

const Button = () => (
    <button
         style = {{
            backgroundColor: "tomato",  //JSX style 지정 방법 {{ }}
         }}
         onClick={() => console.log("HELLO")}
>
   HELLO BLOG
<button>
);

 

객체를 함수처럼 만들어줌으로써 <Button/>으로 위 객체를 호출할 수 있게 해준다.

단, 리액트 컴포넌트를 정의하려면 첫글자를 대문자로 적어야한다.

첫글자가 대문자 -> 함수화한 객체라고 인식 / 전부 소문자 -> HTML 태그로 인식

Babel

브라우저는 JSX를 이해하지 못하므로 이를 이해하기 위한 Babel을 설치해주어야 한다.

 

<script type="text/babel">