[리액트]따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기2

무비앱 시리즈 #9 좋아요 버튼 만들기

Basic Hooks

리액트 훅스의 기본 문법 중 상태변화를 다루는 useState

▶ Stateful 상태적인 값과 그 값을 업데이트 할 수 있는 기능이다.

• 첫 렌더링 시 반환되는 값은 첫 파라미터로 넘겨진 값과 같다. initialState
• setState(newState) → 새로운 상태 값을 받고 컴포넌트의 재렌더링을 연결해준다.
• re-렌더링이 이러지는 동안, useState에 의해 반환되는 첫번째 값이 가장 최신의 상태로 주어진다.
• 만약 업데이트된 함수가 같은 값을 반환하면 렌더링은 완전히 건너뛰어진다.

조화 과정 🍧

리액트에서는 뷰를 업데이트 할 때 "조화 과정을 거친다" 라고 표현을 하는데,

이는 데이터 변화가 있을 때 뷰가 변형하는 것처럼 보이지만, 사실 새로운 요소가 갈아 끼우기 때문

그러므로 같은 값을 반환하는 함수가 업데이트 되어 진 것 같아 보이지만 새로운 요소를 갈아 끼우는 것.

 

Virtual DOM

• 대부분 DOM 조작은 고비용과 퍼포먼스 실현이 무겁기 때문에 virtual DOM, 가상 DOM으로 가상 복제품을 만들어 준다고 생각하면 된다.
• state가 변화할 때, 가상 DOM은 업데이트되고 그 전과 현재 버전의 virtual DOM이 비교되어 진다. 이 과정을 diffing이라고 부른다.
• 그 후 가상 DOM은 UI를 업데이트 하기 위해 batch를 보낸다.

useEffect의 무한 루프

https://dmitripavlutin.com/react-useeffect-infinite-loop/

https://medium.com/@andrewmyint/infinite-loop-inside-useeffect-react-hooks-6748de62871

Infinite Loop Inside useEffect() (React Hooks)

---

무한루프의 예시

• "DisplayName" 이라는 컴포넌트는 name과 userId라는 두 개의 상태를 가지고 있다.
• "fetchUser"라는 함수가 API 로부터 데이터를 가져오고, "name"에 데이터를 set한다.
• 그리고, DOM 요소들을 렌더링한 직 후 "useEffect()"가 "fetchUser()" 함수를 실행시킨다. 

Where is the problem?

• useEffect가 첫번째 렌더링 이후에 실현되면서 fetchUser 함수를 실행
• fetchUser함수 안에는 line 9에 "name"이라는 상태를 업데이트 시켜준다. 그리고 리렌더링을 trigger
• 그러므로 useEffect는 상태변화를 감지하면서 state을 업데이트 시키려 하는데, 이 업데이트로 인해 프로세스가 다시 실행되면서 무한 루프에 빠지게됨.

The Solution

useEffect(() => {fetchUser();}, [userId]); 
// [userId] 라는 두번째 (optional) 인자를 가지게 되면서 컴포넌트 리렌더링 시 useEffect는 userId의 값이 변화되었을 때만 fetchUser()를 실행시킨다. 

---

Mongoose 좋아요 Model 만들기

axios와 fetch의 차이

Axios	Fetch
리퀘스트 오브젝트에 url 있음.	리퀘스트 오브젝트에 url 없음.
Axios는 쉽게 설치가능한 써드파티 패키지	fetch는 최신 브라우저에 빌드되어 있음. 별도 설치 없음
XSRF Protection 보안 기능 제공	X
데이터 프로퍼티를 씀	바디 프로퍼티를 씀
Axios의 데이터는 오브젝트 형태를 가지고 있음	fetch의 바디는 String으로 변환되어져야 함(stringified)
Axios의 리퀘스트는 status 200과 statusText OK일 때 ok	fetch 리퀘스트는 응답되는 객체가 ok 프로퍼티를 가지고 있으면 ok
Axios는 JSON을 자동으로 변환	fetch는 two-step 프로세스를 거쳐 JSON data-첫번째 리퀘스트, .json() 메소드로 두번째 리퀘스트로 응답
Axios는 리퀘스트 취소와 타임아웃 허용 (Intercept)	X
Axios는 다운로드 절차를 빌트인 서포트	X
Axios는 많은 브라우저 서포트	fetch는 Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+

/* Fetch */

let url = "https://someurl.com';
let options = {
			method: 'POST',
  			mode: 'cors',
            headers: {
				'Accept': 'application/json',
              	'Content-Type': 'application/json;charset=UTF-8'
            },
  			body: JSON.stringfy({
              	property_one: value_one,
              	property_two: value_two
            })
}
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
	let data = await response.json();
}

 

/* Axios */

let url = "https://someurl.com';
let options = {
			method: 'PST',
  			headers: {
            	'Accept': 'application/json',
              	'Content-Type': 'application/json;charset=UTF-8'
            },
  			data: {
              	property_one: value_one,
             	property_two: value_one
            }
};
let response = await axios(options);
let responseOK = response && response.status === 200 & response.statusText === 'OK';
if (responseOK) {
  let data = await response.data;
}

 

2. 얼마나 많은 사람들이 이 영화를 Favorite 리스트에 넣었는지 그 숫자 정보 얻기

router로 index.js에 넣어질 api를 분산시켜준다.

express.Router();

https://expressjs.com/ko/guide/routing.html

Express 라우팅

URL 파라미터와 쿼리

URL 파라미터를 사용할 때는 라우트로 사용되는 컴포넌트에서 받아 오는 match라는 객체 안의 movieId 값을 참조

 

MovieDetail.js → `let movieId = props.match.params.movieId` 

Favorite.js → `const movieId = props.movieId`

App.js →`<Route exact path="/movie/:movieId" component={Auth(MovieDetail, null)} />`

props.movieId와 props.match.params.movieId 값을 통해 현재 movieId 값을 조회할 있다.

 

component 에는 이동할 페이지와 함께 링크도 걸어 준다.

 

React와 Express에서의 라우팅 차이점

https://cocoder16.tistory.com/4

React-router-dom의 서브 라우트

서브 라우트

라우트 내부에 또 라우트를 정의하는 것

import React from 'react';
import { Link, Route } from 'react-router-dom';
import Profile from './Profile';

const Profiles = () => {
	return (
    	<div>
        	<h3> 사용자 목록: </h3>
            	<ul>
                	<li>
                    	<Link to="/profiles/sohyun">sohyun</Link>
                    </li>
                   	<li>
                    	<Link to="/profiles/randomUser"> randomUser </Link>
                    </li>
                 </ul>
              <Route
              	path="/profiles"
                exact render={() => <div> 사용자를 선택하세요. </div>} />
              <Route path="/profiles/:username" component={Profile} /> 
              </div>
            );
          };
          
 export default Profiles;

 

• 첫번째 Route 컴포넌트에는 component 대신 render이라는 props를 넣어주었는데, 컴포넌트를 전달하는 것이 아닌 JSX넣어줄 수 있다. 
• Profile 컴포넌트의 첫 번째 Route에서 exact={true} 대신 그냥 exact으로 적어도 exact={true}와 같은 의미