[React] ReactJS로 영화 웹 서비스 만들기 (Nomad Coders' course)

https://joohaem.github.io/movie_app_react2021/#/

 

## 깃 올리기
C:\Users\jooha\Documents\movie_app_react2021
> npm start
> git init
> git remote add origin https://github.com/joohaem/movie_app_react2021.git
> git add .
> git commit -m “메시지”
> git push origin master

 

## React
application을 로드할 때 빈 HTML을 로드하고, component에 작성한 react HTML을 밀어 넣음
-> virtual DOM
-> public/index.html 의 id=”root” 부분에, src/index.js -> src/App.js

 

## jsx
-> * component: <App />과 같이 JS와 HTML 사이의 조합 -> jsx
1) App() 내부에서 component 가져오기 -> prop=”property”
-> <Food fav="kimchi" />
-> <div className=”~”> </div> //class로 쓰면 JS의 "class"와 혼동
2)

 

function Food({ fav }) {
  return <h1>I like {fav}</h1>;
}
or
function Food(props) {
  return <h1>I like {props.fav}</h1>;
}

-> * map: JS 함수: 배열의 각 item에서 함수를 실행하는 배열을 가진다/ 그 함수의 result를 갖는 배열을 준다 -> return 값이 필요

 

## props
C:\Users\jooha\Documents\movie_app_react2021
> npm i prop-types //App.js에 import PropTypes from "prop-types";
> npm install (안 될 시)

Food.propTypes = {  //propTypes 이름 고정
  name: PropTypes.string.isRequired,  //필수로 string, 아니면 에러
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number  //필수는 아니지만 number or undefined
};

 

함수 인자로 props의 특정 값만 가져올 때는 function Name({ id, year }) 형식을 사용할 수 있다

 

## Class Component -> “state”
function App() -> class App extends React.Component { render() {} }
function component: return하고 screen에 표시
BUT class component: React component로 확장되고 screen에 표시 -> 그것을 render method 안에 넣음
-> state: object + component의 data를 넣을 공간 + 동적 데이터
-> setState: react는 새로운 state로 render 함수를 다시 실행해 변화 있는 부분만 업데이트 (virtual DOM)

 

## Component Life Cycle (Mounting, Updating, Unmounting)
1. Mounting
-> Constructor(): JS 함수 -> render() -> componentDidMount()

-> componentDidMount()에서 주로 API를 호출하게 된다

2. Updating: state를 업데이트 할 때
-> render() -> componentDidUpdate()

3. Unmounting: component가 죽을 때, 페이지를 바꿀 때
-> componentWillUnmount()

 

## Fetching
fetch(): JS에서 데이터를 fetch하는 방법
-> axios: fetch의 한 layer -> > npm install axios
영화의 API: YTS -> url이 계속 바뀌어 -> 니콜라스의 JSON 파일
JS에게 axios.get으로 API를 불러오기를 기다리라고 할 떄?
-> async(비동기임을 알려줌) + await(뭘 기다리는 지 알려줌)

 

## 최신 React
-> React hook을 사용하여 더 이상 state를 갖기 위해 class component를 가질 필요 X (다른 방법일 뿐)

 

## react-router-dom
네비게이션을 만드는 패키지
> npm install react-router-dom
라우터는 url을 확인하고 그에 맞는 컴포넌트(페이지)를 불러오게 됨

 

return (
    <HashRouter>
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
    </HashRouter>
);

HashRouter가 아닌 BrowserRouter는 github pages에 업로드하기 번거로움
-> path로 url 설정, exact로 url이 path와 같을 때만 rendering하여 충돌나지 않도록, componenet로 rendering 할 페이지 설정
-> Home과 About Routes에 기본 props 전달

 

## Navigation 설정 시 a 태그 (href=”/”)로 설정하면, 페이지가 새로고침 되면서 리액트가 죽게 됨
-> react-router-dom의 Link (to=”/”)를 사용 (css에서는 a 태그로 설정)
-> Link는 Router 안에서 작동해야 함

 

## 리다이렉팅 (url이 아닌 클릭을 통해서만 이동하기)

class Detail extends React.Component {
  componentDidMount() {
    const { location, history } = this.props;
    if (location.state === undefined) {
      history.push("/");
    }
  }
  render() {
    const { location } = this.props;
    if (location.state) {
      return <span>{location.state.title}</span>;
    } else {
      return null;
    }
  }
}

 

## Deploying to Github Pages
/movie_app_react2021> npm i gh-pages
-> 웹사이트를 github의 gihub page 도메인에 나타나도록 하는 gh-pages

&& package.json 폴더 “hompage”에 주소 추가
&& “scripts”에 "deploy": "gh-pages -d build", "predeploy": "npm run build"

/movie_app_react2021> npm run build
-> build 폴더 생성
-> 이 폴더를 gh-pages 에 업로드

/movie_app_react2021> npm run deploy
-> predeploy를 생성하고
-> 수정한다면, 다시 npm run deploy하여 업데이트