[노마드/ReactJS 영화 웹 만들기] - Ch02 | 2. 리액트 설정 및 기초

서근

2023. 1. 15. 11:01

QUOTE THE DAY

ReactJS로 영화 웹 만들기

React는 HTML, CSS, 자바스크립트만으로 웹 페이지를 만드는 것과 비교해 큰 이점이 있다.

프로그램 설계를 조직화할 수 있다. 웹 페이지를 HTML로 만들다 보면 같은 부분을 여러 번 다시 사용해야 하는 번거로움이 있지만, HTML만 봐도 페이지마다 공통적으로 바뀌는 부분을 일일이 인덱스를 이동하며 넣어줘야 한다. 그렇기에 웹 사이트가 커질수록 관리도 어려워지게 된다. 루트(route)가 수십 개이고 그 안에 사용되는 코드가 수 백 줄인 웹 사이트 라면 이 방법대로 하는 것이 아주 좋지 않다. 심지어 컴포넌트를 만들어서 넣어줄 수 도 없다.

그래서 만들어진 것이 Facebook에서 만든 ReactJS와 같은 프레임워크이다.

01) 전체 프로그램 설계를 깔끔하고 일관성 있게 정리할 수 있는 조직성(organization)이 강함.
02) 미리 만들어 놓은 조각(component)을 다시 사용할 수 있어서 코드 재사용성(reusability)이 높다.
03) 기본 웹 프로젝트뿐만 아니라 모바일 앱(React Native), 데스크톱 앱(Electron)을 만들 수 있다는 점에서 매우 유연성(flexibility)이 높다.

ReactJS 세팅

<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

TIP

MacOS에서(더 다양한 환경에서도 재현 가능성 있음) 하게 되면, CORB 위반으로 인해 unpkg를 못 불러온다. 따라서 script를 불러올 때 crossorigin을 넣어주는 것이 좋다.

코드 리뷰

오늘 사용한 메서드는 암기할 필요가 전혀 없다. 왜냐? 어떻게 돌아가는 식인지 알기 위한 것이기 때문. 앞으로는 아래와 같은 방식으로 리액트를 사용하지 않을 것이다.

이해가 중요!

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div id="root"></div>
    </body>
    <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <!--ReactJS 구현부-->
    <script>
        const root = document.getElementById('root');
        //생성하고자 하는 html 태그
        //creactElement('태그', {클래스: '클래스명'});
        const span = React.createElement('span', { id: 'my-span', style: { color: 'red' } }, '안녕하세요');
        //render(랜더할 변수명, 배치할위치)
        ReactDOM.render(span, root); //React.creactElement를 가지고 HTML로 만들어 배치한다는 의미
    </script>
</html>

리액트를 import 해줬기 때문에 createElement 함수를 가진 리액트 object에 접근이 가능함.
createElement('span')은 반드시 생성하고자 하는 HTML 태그와 일치해야 함.
ReactJS : 애플리케이션이 상호작용할 수 있도록 만들어주는 라이브러리 (엔진과 같음)
React-dom : 라이브러리 또는 패키지. 모든 React Element들을 HTML body에 오게 뿌려줌.
ReactDOM.render() : React.creatElement를 가지고 HTML로 만들어 배치한다는 의미임.
ReactDOM.render(span, root) : span이 들어가야 할 위치를 id root로 body안에 생성해 주고 그 안에 뿌려질 수 있도록 해준다.
React.createElement('span', {id: '아이디명', style: { color: 'red'}}, 'span의 내용')
- 이렇게 쓸 일 없음. 이해만 해두면 된다.

리액트와 바닐라 JS에서의 가장 큰 차이점은 순서와 업데이트 방식이다.

바닐라 JS 순서 : HTML ➜ JS

ReactJS 순서 : JS ➜ HTML

즉,

바닐라JS : element를 생성하고 ReactJS가 그것을 HTML로 번역한다.

ReactJS : 업데이트해야 하는 지정해 놓은 HTML의 특정 부분만 업데이트시켜서 페이지가 reload 또는 그 태그 전체가 업데이트되지 않음,

깃허브 자료

GitHub - Seogun95/Movie-web-servic-ReactJS: ReactJS로 영화 웹 서비스 만들기 노마드 코더 클론 코딩

ReactJS로 영화 웹 서비스 만들기 노마드 코더 클론 코딩. Contribute to Seogun95/Movie-web-servic-ReactJS development by creating an account on GitHub.

github.com

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

'FRONT-END > ReactJS Clone project' 카테고리의 다른 글

[노마드/ReactJS 영화 웹 만들기] - Ch03 \| 1~2. setState (0)	2023.01.26
[노마드/ReactJS 영화 웹 만들기] - Ch03 \| 0. State? (0)	2023.01.15
[노마드/ReactJS 영화 웹 만들기] - Ch02 \| 6. 컴포넌트 사용 (0)	2023.01.15
[노마드/ReactJS 영화 웹 만들기] - Ch02 \| 5. JSX 사용법 (0)	2023.01.15
[노마드/ReactJS 영화 웹 만들기] - Ch02 \| 3. Events in React (1)	2023.01.15