React(리액트)란? 리액트 처음 시작하기

React(리액트)란?

리액트는 사용자 인터페이스(View) 즉 UI를 담당하는 자바스크립트 라이브러리이다. 페이스북 소프트웨어 엔지니어 Jordan Walke가 개발한 것으로 그는 PHP용 HTML 컴포넌트 프레임워크인 XHP에 영향을 받았다고 한다.

SPA (from. https://www.excellentwebworld.com/what-is-a-single-page-application)

SPA

리액트는 SPA(Single Page Applications)로 단일페이지로 구성된 웹이다. SPA는 서버사이드에서 HTML을 전달받아 랜더링하지 않고 필요한 데이터만 서버로부터 json형태로 전달받아 동적으로 랜더링한다.

UI 컴포넌트

리액트 스스로 상태를 가지고 관리하는 캡슐화된 컴포넌트를 생성한 다음 복잡한 UI를 만들기 위해 구성한다.

컴포넌트는 여러 컴포넌트를 쪼개서 만들고 조립할 수 있다. 하나의 페이지에 header, navigation, footer등을 독립된 컴포넌트를 조립해 만들 수 있다는 말이다. 여러 화면에서 재사용되는 소스코드를 반복 사용하지 않아도 컴포넌트만 import할 수 있어 유지보수에 용이하다.

Virtual DOM

가상 DOM(Document Object Model)으로 이벤트가 발생할 때마다 메모리에 가상으로 존재하는 Virtual DOM을 생성하고 기존 DOM과 비교해 변경된 부분만 DOM에 반영한다. 컴포넌트로 쪼갠 것도 이를 효율적으로 적용하기 위함이다.

JSX문법

const element = <h1>Hello, world!</h1>;

위 태그 문법은 Javascript를 확장한 문법, JSX이다.

리액트를 사용할 때 JSX는 필수가 아니다.

빌드 환경에서 컴파일 설정을 안 할 때 JSX없이 React를 사용하는 게 편리하지만 자바스크립트 코드 안에서 시각적으로 가독성을 더 높여주고 에러 및 경고 메시지를 표시해준다.

JSX는 컴파일이 끝나면 JSX 표현식이 정규 자바스크립트 함수 호출이 되고 자바스크립트 객체로 인식된다.

리액트 시작하는 세 가지 방법

1. 온라인 플레이그라운드

단순히 웹사이트에서 온라인 코드 편집기를 이용해 이미 세팅되어 환경에서 리액트를 경험할 수 있다.

CodePen, CodeSandbox, Glitch 또는 Stackblitz에서 Hello World 템플릿을 사용해보자.

2. 웹사이트에 리액트 추가

<!DOCTYPE html>
<html>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <body>
  
    <div id="mydiv"></div>

    <script type="text/babel">
      class Hello extends React.Component {
        render() {
          return <h1>Hello World!</h1>
        }
      }

      ReactDOM.render(<Hello />, document.getElementById('mydiv'))
    </script>
  </body>
</html>

웹사이트의 처음부터 끝까지 모두 리액트로 만드는 것이 아니라 원하는 부분만 사용할 수 있다.

3. 리액트 앱 만들기

툴체인은 리액트를 사용하는데 있어서 필요한 것들을 한번에 제공하는 제공해주는 툴이라 보면 된다.

리액트 팀에서 추천하는 툴체인은 아래와 같다.

React를 배우고 있거나 아니면 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App.

서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.js을 시도해보세요.

고정적인 콘텐츠 지향적 웹사이트를 만들고 있다면 Gatsby를 시도해보세요.

컴포넌트 라이브러리 혹은 이미 있는 코드 베이스에 통합을 한다면 더 유연한 툴체인.

저작자표시 비영리 변경금지

'웹 > React' 카테고리의 다른 글

npm 설치 오류 메시지 code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree (0)	2021.04.25
리액트 + 웹팩 + 바벨 프로젝트 세팅 시작하기 (0)	2021.02.26
React 튜토리얼 1강. 리액트 설치 및 세팅 (0)	2020.12.31

웹로드캐스트

React(리액트)란? 리액트 처음 시작하기