리액트 개발 환경 직접 구축하기

728x90

SMALL

리액트는 UI라이브러리이기 때문에 UI를 제외한 나머지 요소들은 개발자가 신경써서 관리해야한다.

웹 어플리케이션을 만들기 위해서는 테스트 시스템, 빌드 시스템, 라우팅 시스템 등 UI외에도 신경써야할 부분들이 많습니다.

리액트로 웹 애플리케이션을 제작할 때는 다양한 외부 패키지를 활용하는게 일반적입니다.

하지만 이런 다양한 외부 패키지의 존재는 처음 리액트를 접하는 사람에게 오히려 큰 부담이 됩니다.

사용되는 외부 패키지가 너무 많아서 각 패키지의 용도도 모르는 경우가 많습니다.

우선 패키지를 전혀 사용하지 않고 리액트로 간단한 웹페이지를 만들어 보도록 하겠습니다.

다음 경로에서 리액트 자바 스크립트 파일을 4개를 내려받습니다.

https://unpkg.com/react@16.14.0/umd/react.development.js

https://unpkg.com/react@16.14.0/umd/react.production.min.js

https://unpkg.com/react-dom@16.14.0/umd/react-dom.development.js

https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js

이렇게 검색을하면

이렇게 나오는데 이것을 js 파일로 저장해줍니다.

react-dom.development.js.

react-dom.production.min.js

react.development.js

react.productuin.min.js

이렇게 4개의 파일로 만들면 되겠습니다.

이때 이름에서 알 수 있듯이 1번과 3번은 개발 환경에서 사용되는 파일이고, 2,4,는 배포 환경에서 사용되는 파일입니다.

(뒤에 프로덕션이 붙어있기때문이다.)

1,2,파일은 플랫폼 구분 없이 공통으로 사용되는 리액트의 핵심 기능을 담고 있습니다.

따라서 웹에서 뿐만아니라 리액트 네이티브 에서도 사용됩니다.

그 외에는 3,4, 는 웹에서만 사용되는 파일입니다.

리액트네이티브란?

리액트 네이티브를 이용하면 리액트로 만든 안드로이드와 IOS와 네이티브 앱을 만들수 있습니다.

웹 애플리케이션을 개발할 때 사용되는 리액트 패키지가 리액트 네이티브에서도 그대로 사용됩니다.

react-dom 패키지는 웹 애플리케이션에서만 사용되며, 웹에서의 react-dom 역할을 하는 리액트 네이티브 코드가 별도로 존재합니다.

리액트 네이티브를 이용하면 하나의 소스코드로 안드로이드와 IOS에서 동작하는 앱을 만들 수 있다는 점이 매력적입니다.

하지만 인앱 구매나 푸시알림 같이 플랫폼에 종석적인 기능을 사용하기 위해서는 플랫폼별로 코드를 작성해야 하긴합니다.

리액트 네이티브는 모바일에서 자바스크립트를 실행하기 위해 JAVASCRIPTCORE를 사용합니다. javascriptCore는 웹킷에 내장된 자바스크립트 엔진입니다.

대부분의 모바일 운영체제는 앱에서 C++코드를 실행할 방법을 제공해 줍니다.

리액트의 가상 돔 (VIRTURE DOM)은 마치 웹과 같은 돔 환경에서만 동작할 것만 같은 이름을 가졌지만,

실제로는 리액트 네이티브에서도 동작한다.

가상 돔은 데이터가 변경되었을 때 UI에서 변경된 부분을 빨리 찾기 위해 사용되는 범용적인 자료구조입니다.

처음에 리액트는 웹으로 위해 만들어졌기 때문에 가상 돔이라고 불렀지만, 리액트 네이티브가 존재하는 현시점에서는 어울리지 않는 이름이되었긴 합니다.

이제 리액트 패키지만 사용해서 간단한 웹 애플리케이션을 만들어 봅시다.

bookreactJS라고 폴더를 만든다음 앞에서 언급한 네개의 파일을 넣습니다.

https://github.com/uno-km/study_JS/tree/master/src/main/webapp/bookreactjs/part1

GitHub - uno-km/study_JS: study for JS

study for JS. Contribute to uno-km/study_JS development by creating an account on GitHub.

github.com

제 깃허브에서 해당 js파일의 내용을 확인하고 복사해서 쓰셔되겠습니다.

예제를 위해서 simple1.html을 만들었습니다.

<html>
        <body>
            <h2>안녕하세요, 이 프로젝트가 마음에 드시면 좋아요 버튼을 눌러 주세요.</h2>
            <div id= "react-root">
                <script src ="react.development.js"></script>
                <script src ="react-dom.development.js"></script>
                <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 src = "simple1.js"></script>
            </div>
        </body>
</html>

리액트로 랜더링할 때 사용할 돔 요소를 만들었습니다. 앞으로 리액트는 이 요소안쪽에 새로운 돔 요소를 추가합니다.

앞으로 준비한 리액트 파일을 스크립트 태그로 입력했습니다.

이제부터 저희는 simple.js파일에 리액트 코드를 작성할 것입니다.

위 파일은 좋아요 버튼을 보여주는 리액트 컴포넌트를 작성했습니다.

버튼을 누르면 좋아요 취소 문구를 보여줍니다. simple.js파일에는 다음 내용을 입력합니다.

function LikeButton() {
    const [liked, setLiked] = React.useState(false);
    const text = liked ? '좋아요 취소' : '좋아요';
    return React.createElement(
      'button',
      { onClick: () => setLiked(!liked) },
      text,
    );
  }
  
  const domContainer = document.querySelector('#react-root');
  ReactDOM.render(React.createElement(LikeButton), domContainer);

초깃값과 함께 컴포넌트의 상태값을 정의합니다. 이때 React 변수는 react, development.js 파일에서 전역변수로 생성됩니다.

컴포넌트의 상탯값에 따라 동적으로 버튼의 문구를 결정합니다.

createElement 함수는 리액트 요소를 반환합니다. 여기서 생성한 리액트 요소는 최종적으로 버튼 돔 요소가 됩니다.

버튼을 클릭하면 onClick 함수가 호출되고, 컴포넌트의 상탯값이 변경됩니다. simple1.html 파일에 미리 만들어 두었돈

돔 요소를 가져와서 react-dom.development.js 파일에서 전역변수로 만든 ReactDOM 변수를 사용해서

우리가 만든 컴포넌트를 react-root 돔 요소에 붙습니다.

이렇게 리액트로 만든 첫 번째 웹 페이지가 완성되었습니다. 페이지를 브라우저에 띄우면 좋아요 버튼이 보이고

그것을 누르면 취소버튼이 보이는것을 알수 있습니다.

여러 개의 돔 요소에 랜더링 하기

리액트가 돔 요소의 한 곳에만 랜더링 할 수 있는 것은 아니다. 코드를 조금 수정해서 돔 요소 세군대에 좋아요 버튼을 랜더링 해보겠습니다.

simple1 파일들을 복사해서 2로 이름을바꾼뒤 수정을 해보겠습니다.

<html>
  <body>
    <h2>안녕하세요. 이 프로젝트가 마음에 드시면 좋아요 버튼을 눌러주세요.</h2>
    <div id="react-root1"></div>
    <!-- ... -->
    <div id="react-root2"></div>
    <!-- ... -->
    <div id="react-root3"></div>
    <script src="react.development.js"></script>
    <script src="react-dom.development.js"></script>
    <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 src="simple2.js"></script>
  </body>
</html>

기존의 react-root 돔 요소를 지우고 세 개의 돔 요소를 만들었습니다 각 요소 사이에 다른 코드가 있다는 사실에 주목해 봅십니다. 다른 코드가 없다면 HTML 에서는 하나의 요소만 만들고 리액트 코드에서 여러개의 버튼을 구성하는게 낫습니다.

스크립트부분은 새로 만들 자바스크립트 파일 이름으로 변경했으며, 여에 작성한 세 개의 div요소에 LikeButton 컴포넌트를 랜더링해 보겠습니다.

function LikeButton() {
    const [liked, setLiked] = React.useState(false);
    const text = liked ? '좋아요 취소' : '좋아요';
    return React.createElement(
      'button',
      { onClick: () => setLiked(!liked) },
      text,
    );
  }
  
  ReactDOM.render(
    React.createElement(LikeButton),
    document.querySelector('#react-root1'),
  );
  ReactDOM.render(
    React.createElement(LikeButton),
    document.querySelector('#react-root2'),
  );
  ReactDOM.render(
    React.createElement(LikeButton),
    document.querySelector('#react-root3'),
  );
  // 없는데 괜히 4붙이면 콘솔에러뜸 
//   ReactDOM.render(
//     React.createElement(LikeButton),
//     document.querySelector('#react-root4'),
//   );

LikeButton 컴포넌트는 수정하지 않았습니다. 미리 만들어 놓은 세 개의 돔 요소에 LikeButton 컴포넌트를 랜더링 합니다.

simple2.html파일을 브라우저에서 열어 보면 세 개의 좋아요 버튼을 확인할 수 있게됩니다.

728x90

LIST

저작자표시 비영리 (새창열림)

'리액트 공부' 카테고리의 다른 글

CSS 작성 방법 "결정"하기 (0)	2022.01.22
AUTOPREFIXER (0)	2022.01.21
Create-react-app으로 시작하기 (0)	2022.01.20
웹팩의 기본 개념 이해하기 (0)	2022.01.19
바벨 사용해 보기 (0)	2022.01.19

리액트 개발 환경 직접 구축하기

여러 개의 돔 요소에 랜더링 하기

'리액트 공부' 카테고리의 다른 글

댓글

티스토리툴바

리액트 개발 환경 직접 구축하기

여러 개의 돔 요소에 랜더링 하기

'리액트 공부' 카테고리의 다른 글

관련글

댓글

티스토리툴바