리액트JS로 웹 서비스 만들기 3일차

3일차에서 할 것

1) PropTypes로 prop 유효성 검사(validation)

2) state 사용하기

3) 컴포넌트 생명주기(Lifecycle)

제일 먼저 유효성 검사에 대해서 알아봅시다.

현재 App 컴포넌트에서는 Movie 컴포넌트로 영화 정보를 보낼 때 props를 사용하고 있습니다. 이 때 props를 통해 보내는 정보가 올바른 타입(문자열인지, 숫자인지)인지, null은 아닌지 체크하는 방법이 있습니다. 바로 PropTypes를 사용하면 가능합니다.

과제) 현재 App 컴포넌트에서는 title과 poster 정보를 Movie 컴포넌트로 보내고 있습니다.

여기서 title과 poster에 문자열 외의 데이터가 들어있거나 공백이 있을 경우 경고가 나타나도록 해보세요.

힌트) props 내용을 체크하는 로직은 Movie 쪽에 기술한다.

import React, {Component} from 'react';
import PropTypes from 'prop-types';
 
class Movie extends Component {
  render(){
    console.log(this.props);
    return (
      <div>
        <h1>{this.props.title}</h1>
        <img src={this.props.poster}/>
      </div>
    );
  }
}
 
Movie.propTypes = {
  title: PropTypes.string.isRequired
  poster: PropTypes.string.isRequired
}
 
export default Movie;
 

위와 같이 propType을 설정한 후 props로 숫자 혹은 null을 받게 해봅시다.

그런 후 Chrome 브라우저에서 마우스 오른쪽 클릭 > 검사 > 콘솔 창에서 확인해 보면

다음과 같은 경고 메시지를 확인할 수 있습니다.

그 다음으로는 state에 대해서 알아봅시다. state는 번역하면 상태라는 뜻을 갖고 있습니다.

리액트의 특징 중 하나는 현재 state(상태)가 변했을 때 변화한 만큼 다시 화면에 그려준다(렌더링)는 것입니다.

그렇다면 여기서 직접 state 변화시켜서 렌더링이 일어나나 확인해보도록 하겠습니다.

과제) greeting이라는 이름의 state를 지정해 "hello"라는 메시지를 화면에 출력한 후,

3초 후에 "안녕"이라는 메시지로 바뀌어 출력되게 만들어 봅시다.

힌트) state 값을 바꿀 때는 =로 직접 대입하지 않고 setState라는 함수를 이용한다.

힌트) 3초 후 실행 타이머를 걸기 위해서는 setTimeout(실행될 내용, 3000) 함수를 사용한다.

import React, { Component } from 'react';
import './App.css';
import Movie from './Movie';
 
const movie = [
  {
    title: 'ready player one',
    poster: 'http://sm.ign.com/ign_jp/review/r/ready-play/ready-player-one-review_fyc1.jpg'
  },
  {
    title: 'matrix',
    poster: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-jMT2KVyuM6qMjeuyuJugg
962ahFv62ee3HO4VbIZcj3q2Sq2'
  },
  {
    title: 'up',
    poster: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8F-fx5DCzmfpalo-gFFf9kBa
F42q4PWvU9CmEeR-0RGBTXJ7Q'
  },
  {
    title: 'inside out',
    poster: 'https://lumiere-a.akamaihd.net/v1/images/takeover_insideout_b602f36b.jpeg?regi
on=0,0,2048,856'
  }
]
 
class App extends Component {
 
  state = {
    greeting: 'Hello'
  }
 
  componentDidMount() {
    setTimeout(() => {
      this.setState({greeting:'안녕'})
    }, 3000);
  }
 
  render() {
    return (
      <div className="App">
        {this.state.greeting}
        {
          movie.map((movie, index) =>
          <Movie title={movie.title} poster={movie.poster} key={index}/>)
        }
      </div>
    );
  }
}
 
export default App;
 

이번 과제는 대부분 혼자 해결하기 힘드셨을 겁니다.

componentDidMount라는 배운 적이 없는 새로운 함수가 등장했기 때문이죠.

이 함수를 이해하기 위해서는 먼저 컴포넌트 생명주기에 대해서 알아야 합니다.

다음 그림을 참고해 보면 componentWillMount -> render(렌더링) -> componentDidMount 순으로

컴포넌트 이벤트가 발생한다는 것을 알 수 있습니다.

여기에서 우리는 Hello가 안녕으로 바뀌는 시점은 정확히,

렌더링이 끝난 3초 후라는 것을 알 수 있습니다.

왜 componentWillMount에 setTimeout을 지정하지 않았는지도 대략 알 수 있겠죠.

그렇게 할 경우 렌더링이 다 끝나기 전에 타이머가 실행돼버리기 때문이거든요.

 

위에서 배운 것을 참고하여 로딩(Loading) 컴포넌트를 만들어 보도록 합시다.

과제) 3초 간 Now is Loading 이라는 메시지를 표시한 후에야, 영화 리스트가 출력되도록 해봅시다.

힌트) 3항 연산자를 사용한다.

import React, { Component } from 'react';
import './App.css';
import Movie from './Movie';
 
const movie = [
  {
    title: 'ready player one',
    poster: 'http://sm.ign.com/ign_jp/review/r/ready-play/ready-player-one-review_fyc1.jpg'
  },
  {
    title: 'matrix',
    poster: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-jMT2KVyuM6qMjeuyuJug
g962ahFv62ee3HO4VbIZcj3q2Sq2'
  },
  {
    title: 'up',
    poster: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8F-fx5DCzmfpalo-gFFf
9kBaF42q4PWvU9CmEeR-0RGBTXJ7Q'
  },
  {
    title: 'inside out',
    poster: 'https://lumiere-a.akamaihd.net/v1/images/takeover_insideout_b602f36b.jpeg?
region=0,0,2048,856'
  }
]
 
class App extends Component {
 
  state = {
    movie : movie,
    isLoading : true
  }
 
  componentDidMount() {
    setTimeout(() => {
      this.setState({isLoading:false})
    }, 3000);
  }
 
  _renderMovies() {
    const movies = this.state.movie.map((movie, index) => {
        return <Movie title={movie.title} poster={movie.poster} key={index}/>
      }
    )
    return movies;
  }
 
  render() {
    return (
      <div className="App">
        { 
          this.state.isLoading ? 'Now is Loading':this._renderMovies()
        }
      </div>
    );
  }
}
 
export default App;
 

코드 내용을 정리해 봅시다.

isLoading을 일종의 flag로 사용하여 3초 후에 true에서 false로 바뀌게 하였고,

true일 경우에 Now is Loading을 출력, false일 경우에 movie를 출력하는 함수 _renderMovies를 실행하게 하였습니다.

여기서 언더스코어는 클래스 내부에서만 사용하는 함수에 붙이는 일종의 관습적인 규약이라고 보시면 됩니다.

여기까지 3일차를 마치도록 하겠습니다.

4일차에서 다시 뵙도록 할게요~