[React] Hello world! feat. 🧐리액트를 왜써야할까?

최서은·2022년 4월 17일

React를 공부하며

목록 보기

1/1

서론🧐

드디어 기다리고 기대하던 리액트에 대해 알아보았습니다.
노마드코더의 강의 및 리액트사이트,누구든지 따라하는 리액트를 읽고 느낀점을 기록하는 포스팅입니다.
리액트는 자바스크립트의 라이브러리이고 상호작용이 많은 사이트를 실용적으로 관리하기 위해 도움을 주는것이라고 생각했습니다. 오늘은 리액트가 왜 필요한가,그리고 모든 언어의 첫걸음 hello world를 코딩해볼것입니다.

💁🏻What is React?

React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다.

리액트는 페이스북에서 제공해주는 프론트앤드 라이브러리입니다.
어떠한 유저인터페이스를 동적으로 나타내기 위해서는 많은 DOM요소들을 관리하고 코드를 정리해야합니다. 이를 좀 더 최소화하고 기능개발에만 집중할 수 있도록하기 위해서 많은 프레임 워크가 만들어졌고 프레임워크의 3대장 React, Angular, Vue가 생겨난 것이라고 합니다.

💁🏻Why React?

기술을 배울때 중요한 점은 누가 기술을 사용하는지 그들의 규모는 얼마나 큰지,이 기술이 얼마나 중요한지를 봐야합니다. 리액트는 현재 에어비앤비,인스타그램,페이스북,넷플릭스 같은 큰회사들이 사용하고있습니다.

현재 개발자들사이에서 가장 사랑받는 기술입니다. 이는 편리하기때문이겠죠?

많은 회사에서 이 기술을 사용해본 개발자들을 선호합니다.

저는 위의 3가지 이유로 리액트를 공부해야겠단 생각을 했습니다.
이외에 리액트의 장점도 알아보았습니다.

리액트의 2가지 특징

Vertual Dom(가상돔)
리액트는 가상돔을 사용해서 웹 어플리케이션의 성능을 극대화 시켯습니다.
변화가 일어나면 실제 DOM에 새로운걸 넣는것이 아니라 가상의 DOM에 한번 렌더링을 하고,기존의 DOM과 비교해서 변화가 필요한 곳에만 업데이트를 해줍니다.

즉, 변화를 최소화 시키고 이로인해 성능이 좋아지는것입니다.
Component(컴포넌트)
컴포넌트란 UI를 구성하는 개별적인 부분으로 UI를 옷이라고한다면 컴포넌트는 원단인거죠 원단들을 재단해 옷을 만드는것입니다. 재사용이 가능해서 유지보수가 쉬워집니다.

💁🏻How to use react?

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <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>
  <script>
    const root = document.getElementById("root");
    const h3 = React.createElement(
      "h3",
      {
        id: "title",
        onMouseenter: () => console.log("mouse enter"),
      },
      "Hello I'm a title"
    );
    const btn = React.createElement(
      "button",
      {
        onClick: () => console.log("click"),
      },
      "Click me"
    );

    const conatainer = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(conatainer, root);
  </script>
</html>

가장 먼저 React JS(이벤트리스너 같은 인터렉티브한걸 가능하게 해줌) 와 ReactDOM(리엑트 요소들을 가져다가 html로 바꾸는 용도)코드를 import했습니다.
root라는 비어있는 div를 생성했습니다. ReactDOM이 React element들을 가져다 놓을 곳입니다.
그 다음 ReactDOM.render를 통해 React element들을 root div안에서 보여주게했습니다.

React.createElement를 통해 HTML에 각 요소들의 property를 함께 적용할수있습니다. 하지만 이건 다시 쓰지 않을것입니다. JSX를 이용한 문법으로 보다 편리하게 쓸수있기때문입니다.

다음시간에는 JSX를 소개해보겠습니다.

최서은

FE nerds

[React] Hello world! feat. 🧐리액트를 왜써야할까?

React를 공부하며

서론🧐

💁🏻What is React?

💁🏻Why React?

리액트의 2가지 특징

💁🏻How to use react?

0개의 댓글

관련 채용 정보

[React] Hello world! feat. 🧐리액트를 왜써야할까?

React를 공부하며

서론🧐

💁🏻What is React?

💁🏻Why React?

리액트의 2가지 특징

💁🏻How to use react?

0개의 댓글

관련 채용 정보

[React] Hello world! feat. 🧐리액트를 왜써야할까?