[ReactJS로 영화 웹 서비스 만들기] 05. CONCLUSIONS

앞서 배운 react에 대해 총 정리를 해보자. 강의를 보면서 따라하기에 급급한적도 많고, 강의 들으면서 검색도 했지만, 까먹는 경우가 많아 다시 한 번 정리를 한다.

---

npx란?

https://wonillism.tistory.com/105?category=864856

nodjs, npm, nvm, npx

여기서 npx를 간단히 다루긴했지만, 조금 더 설명을위해 예를 들어보자.  

 

create-react-app을 npm으로 global하게 설치하게되면 여러가지 문제가 생긴다.  

• 자주 사용하지 않는 무거운 패키지가 로컬 스토리지에 남게 된다.
• 로컬 스토리지에 있는 패키지의 새로운 버전이 나오면 이미 설치된 패키지를 제거하고 다시 설치해야 한다.

이 문제를 npx를 이용하여 해결할 수 있다. npx는 최신 버전에 해당하는 패키지를 설치하여 실행하고, 실행된 이후에 해당 패키지를 제거한다.  

 

 

JSX란?

const element = <h1> Hello World! </h1>

이는 문자열도, HTML도 아니다. JSX라 하여 Javascript를 확장한 문법이다.  

React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변화하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다.

 

JSX에 표현식 포함하기

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
	element,
    document.getElementById('root')
);

JSX의 중괄호 안에는 유효한 모든 Javascript표현식을 넣을 수 있다.

 

JSX도 표현식이기 때문에, 컴파일이 끝나면 JSX표현식이 정규 Javascript 함수 호출이 되고 Javascript 객체로 인식된다.

 

 

엘리먼트 렌더링

브라우저 DOM 엘리먼트와는 달리 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.

 

index.html 파일 어딘가에 <div id="root"></div> 가 있다면, 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리한다.

 

React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. React 엘리먼트를 루트 DOM 노드에 렌더링 하려면 ReactDOM.reand()로 전달하면 된다.

 

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

 

Componets and Props

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.

 

컴포넌트를 정의하는 방법

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ES6 class

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

컴포넌트 렌더링

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

1. <Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출
2. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출
3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환
4. React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트한다.

※ 컴포넌트 이름은 항상 대문자로 시작한다.
react는 소문자로 시작하는 컴포넌트를 DOM태그로 처리한다.
<div /> : HTML 태그
<Welcome /> : 컴포넌트

 

 

내가 알기로는 github pages는 정적인 페이지는 서버 없이 바로 보여줄 수 있는 것으로 알고 있다.

 

React로 작성된 페이지를 github pages에 올리는 방법을 알아보자.  

 

React JS를 Github pages에 호스팅하기

gh-pages 설치하기

npm i gh-pages

 

package.json 설정하기

{

	...
    
    "scripts":{
    	...
        "deploy": "gh-pages",
        "predeploy": "npm run build"
    },
    
    "homepage": "http://wonillism.github.io/Study/movie_app_2020/"

 

npm run build 를 하게 되면 여태 작업한 것들을 정적으로 바꾸어 빌드한다.(프로젝트에 build 폴더가 생성됨) 그 파일들을 업로드하여 githubpages에 보여지게 된다.

 

모두 작성 후 npm run deploy를 실행해보자.

 

우선.. 나는 안된다. 예전에 이용하던 github page를 이용한 블로그가 있어서 그런지 적용이 안되는 것 같다.

 

참조: React 문서

시작하기 – React