ReactJS로 웹 서비스 만들기 학습 정리

Javascript도 잘 못하는 내가... ReactJS를 해야 할 때가 왔다.
예전에 인프런에서 ReactJs 강좌 동영상을 본 적이 있었는데..
너무 어려워서 한 번 듣고 따라해보고.. 포기했었다.

근데 이번에 정.....말 필요해져서 다시 들어볼까하고 인프런에서 강좌 찾고 있었는데,
니꼴라스(노마드코더) 동영상이 있는 것을 보았고 간혹 소셜에서 접했었던 사람이라 궁금해서 시청하기 시작했다.
주제도 어려워 보이지 않았고
처음에는 그냥 듣기만 했고, 다 보고 나서 따라 코딩했는데 정말 쉽고 좋았다.
돌 머리인 내가 어느정도 이해가 갔다면 확실히 니꼴라스가 잘 가르쳐준것 같다 + 자막도 최고

하지만 다들 알아야한다 v16.3 업데이트 전 내용이라 참고하고 다른 학습도 해야한다.

영상 주소
https://www.inflearn.com/course/reactjs-web/

---

ReactJS로 웹 서비스 만들기 학습 정리

※ 예제로 나오는 코드는 니꼴라스가 작성한 코드다.
create-react-app을 install 받아서 npm start

1. import

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  //'react' 모듈에서 React 정의된 객체, 함수, 속성 등을 import 하겠다는 구문.
  // ReactDOM = 웹서비스, ReactNative = 모바일이라고 하더라.
  // 컴포넌트 최상단에 위치한다.

  // {Component}는 React.Component 클래스 속성을 import 하겠다는 것 같은데?
  import React, { Component } from 'react';

// ReactDOM.render 를 이용해서 app 컴포넌트를 엘리먼트 #root에 render시킨다.
ReactDOM.render(<app>, document.getElementById('root'));
+ 코드 플러그인 내부에 넣으니까 자꾸 <app>을 닫아주는 태그를 생성한다.....

2. JSX 문법을 쓴다.

Javascript + XML의 합성어
자바스크립트 내부에 HTML을 넣기 위해 사용된다.
JSX는 작성한 그대로 적용되는게 아니라 트랜스파일러를 통해 변환된다고 한다.
// <movie> {} className render() return() 같은 것들일까?
<div className={movies ? "App" : "App-loading"}>
{movies ? this._renderMovies() : 'loading...'}
</div>

3. class app extends React.Component

app은 컴포넌트 함수명임. 변경가능.

  // React.Component 클래스 속성을 상속해서 컴포넌트를 생성하는 방식
  // class 컴포넌트는 state가 존재하는 function이어서 state function이라고 한다.
  class App extends Component {
    ..........
  }

  // state가 존재하지 않는 function은 stateless function이라고 하며 기존의 자바스크립트 function을 말한다.
  // stateless function은 props만 있으며 return하기 위해 사용한다고 한다.
  function Movie({title, poster, genres, synopsis}){
    return(
     ..............
    )
  }

사용 이유에 따라 두 가지를 적절히 나누어 사용하라고 한다.

4. LifeCycle

v16.3으로 버전 업데이트가 되면서 니꼴라스 강의에서 나온 lifeCycle이 달라졌음을 알게되었다.

componentWillMount()

componentWillUpdate()

componentWillReceiveProps() 

세가지가 없어졌다. 

- 기존에 사용하던 것들을 대체하기 위해 메서드 앞에 prefix로 UNSAFE_를 붙이면 사용할 수 있다.

- UNSAFE_componentWillMount()

componentWillMount() 

여기서 하던 작업은

constructor(), componentDidMount를 사용한다고 한다.

componentWillUpdate()

여기서 하던 작업은

getSnapshotBeforeUpdate()를 사용한다고 한다.

getSnapshotBeforeUpdate(prevProps, prevState){
  if(prevState.value !== this.state.value){
    return ........ ; 
  }
}

componentWillReceiveProps() 

여기서 하던 작업은 

static getDerivedStateFromProps()로 대체 한다고 한다.

사용방법은 이런 식이라고 한다.

static getDerivedStateFromProps(nextProps, prevState){
  if(nextProps.value !== prevState.value){
   // value값이 다를 경우, return
   return  ........... ; 
  }
}

솔직히 바뀐건 아직 확실히 잘 모르겠다.

더 공부해야지..

render
remove
update

각각 다른 LifeCycle을 가진다.

-render
componentWillMount() > render() > componentDidMount()
render 전 > render > render 후
대충 활용 예시를 보면 api 호출, loading 애니메이션 등의 작업 > render > loading 애니메이션 제거

-remove
props, state 삭제 시에 한번만 사용된다.
componentWillUnmount()

-update
props, state가 업데이트 되면 실행된다.
componentWillReceiveProps() > shouldComponentUpdata() > componentWillUpdate() > render() > componentDidIpdate()
props를 새로 받았을 때 > 과거 state, props와 비교하여 다르다면 true 반환 > true일때 upadte 실행 > render > render 후
state가 update되면 componentWillReceiveProps() 단계는 건너 뛰고 shouldComponentUpdata()부터 실행된다.

5. props와 state 속성

props는 컴포넌트 mounting, updating 프로세스 시점에 값이 할당될 뿐, 내부에서 값을 변경할 수 없다.
상황에 따라 변경되어야 하는 값은 state를 이용해야한다.

state는 초기에 작성할 수도 있다.

  _getMovies = async () => {
      const movies = await this._callApi()
      // state는 직접적으로 변경해서 사용하면 안된다. (this.state.name = '스어'; 콘솔에러..)
      // this.state.movies = movies; (x)
  
      // setState() API를 통해 추가하거나 업데이트 해야 한다.
      this.setState({
        movies
      })
 }

state = 컴포넌트 내부에서 변경 가능
props = 컴포넌트 내부에서 변경 불가능

6. propTypes는 props type을 체크하여 validation해준다.

  
  // 사용하기 위해서는 propTypes 모듈을 install한 다음 import하여 사용해야 한다.
  import PropTypes from 'prop-types';
  
  function MoviePoster({poster,alt}){
    return(
      
    )
  }
  // props을 사용하는 .js 내부에 사용한다.
  MoviePoster.propTypes = {
    poster: PropTypes.string.isRequired,
    alt: PropTypes.string.isRequired
  }

7. Ajax

  
  // async는 비동기 형식으로 실행된다.
  _getMovies = async () => {
    // await은 함수가 종료되고 나서 진행한다는 의미, api 호출이 종료 되면 movies에 할당하고 다음 라인 실행
    const movies = await this._callApi()
    // this.state.movies = movies; (x)
    this.setState({
      movies
    })
  }
  _callApi = () => {
   // fetch에서 api를 호출
    return fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating')
    .then(response => response.json()) // 데이터를 json 형식으로 변환
    .then(json => json.data.movies) // movies 데이터 return
    .catch(err => console.log(err))
  }

8. export

app은 컴포넌트 함수명임. 변경가능.

  
  // 다중 export
  export app1, app2, app3...;

  // *(asterisk / 별표) 는 파일 내 정의된 모든 객체, 함수, 속성 export
  export *;

  // default : 모듈의 기본 값, 파일 내 한 번만 호출 가능 
  export default App;

ReactJS
https://reactjs.org/docs/hello-world.html