reactJS 로 영화목록 웹사이트 만들어보기 (1) - React 기초

#만들어 볼 것 : 영화 리스트, 추천, 별점 등의 정보가 있는 웹사이트

- api : yts api (영화와 관련된 정보 가져다 쓸 수 있는 API)

- 리액트를 써서 자바스크립트로 변환해주는 웹팩 (리액트 코드를 브라우저가 이해할 수 있게 변경해주는)을 사용 예정

- 웹팩 이용해서 최근 자바스크립트를 브라우저가 이해할 수 있게 변경해줘야 함

---

#시작

1. create-react-app 설치 : npm install create-react-app

2. 프로젝트 생성 : create_react_app movie_app

3. movie_app 폴더로 이동 : cd movie_app

4. 서버 띄우기 : yarn start

yarn start

5. vscode에서 movie_app 열기

app.js, yarn lock, ...index, css 파일 등이 이미 셋업되어 있다. CRA를 사용하면 configuration 사용안해도 됨 (저장하면 알아서 개발서버를 빌드하고 띄워줌

6. 소스코드를 한 번 변경해보자.

변경 전

 

App.js 일부 변경

 

변경 후

 

리액트에서 jsx의 규칙을 볼 수 있다.

가령, css의 class가 아니라 className을 쓴다 ...

 

react 를 이용한 특징 표현해보았다.

Component에 props를 설정해줄 수 있다. name은 예이고 어느 값으로 매핑해도 다 된다. 또한, {} 값을 사용해 속성값에 접근이 가능하다 (ES6의 마법)

console 창 확인을 위해 실행해보았다.

 

map을 이용해 array처럼 출력 가능 (동적으로 사용할 수 있다)

current => {} 는 react의 표현인거같다.

 

햄버거를 좋아하는 내 친구들 이름에 문자열도 붙일 수 있다. (이건 javascript로 표현)

 

react 에서 function에서 current 사용하기

위의 예제는 내가 생각했던건데 react에서는 아래처럼 current를 사용할 수 있다 (외부의 상태에 영향을 받지 않는 방법)

 

Component, React.Component는 life cycle method를 가지는데, life cycle method는 기본적으로 react가 component를

생성하고 없애는 방법이다. component가 생성될 때, render 전에 호출되는 몇 가지 function이 있다.

- mounting() : constructor() → static getDerivedStateFromProps() → render() → componentDidMount()

console.log 순서가 어떻게 될까나

순서는 요러했따.

 

- updating() : 언제 이루어질까? 화면이 호출된 후 add 버튼을 눌러보았다.

mount에 대해선 이제 느낌이 오는데 update는 언제 관여가 될까? 바로 add, minus 버튼 등을 누를 때이다.

component가 이미 render된 후 add, minus 버튼을 통해 update가 되는 것! 이 때 render가 다시 되면서 componentDidUpdate()가 호출된다.

순서를 보면 처음 component가 호출된 후에 update될 때까지 흐른 순서이다.

 

- unmounting() : component가 죽는 시점, 즉 다른 페이지 넘어갈 때와 같이?

   ※ constructor() : javascript에서 class를 만들 때 호출되는 생성자 method
       언제 호출되나 ? component가 mount될때, screen에 표시될 때, website에 이동할 때 호출됨

 

setTimeOut() 예제