레퍼런스 마이닝

promise도 배웠고, 이번엔 Await, Async를 배울 차례이다. Await, Async는 지난 시간에 작성한 라인들을 조금 더 분명하게 작성해주는 도구이다. fetch를 _callApi함수로 변경하였고 _getMovies 함수를 만들어 componentDidMount()에서 사용하였다. _getMovies는 async이며 _callApi 작업이 완료되고 return 하기를 기다린다는 뜻으로 await를 사용하였다. _callApi는 영화 리스트를 JSON 포멧으로 반환하였다.

AJAX(Asynchronous JavaScript And XML) JSON(JavaScript Object Notation) 이제 AJAX를 공부를 시간이다. 요즘에 XML의 비중이 낮고 JSON 비중도가 높아졌다. 오브젝트를 자바스크립트로 작성하는 기법이다. AJAX를 리액트에 적용하는 방법은 심플하다. FETCH를 이용해서 URL에서 응답을 받아오자. 사용할 URL은 리액트 이전에 이야기한 YTS-API를 사용할 것이다. 아래 링크를 참조하자. [프로그래밍/ReactJS] - [ReactJS] 리액트 #3 웹 서비스 만들기 JSX [ReactJS] 리액트 #3 웹 서비스 만들기 JSX 지금까지 리액트에 대한 소개 및 필요한 프로그램 설치를 진행하였다. 이번 포스팅부터 실제 영화 앱을 만들어 보도록 ..

모든 컴포넌트가 state가 있는 것은 아니다. 어떤 컴포넌트는 state 없는 stateless functional 컴포넌트이다. state가 필요 없는 컴포넌트는 함수형 컴포넌트라고 한다. 오직 props 밖에 없을 때 사용된다. 그냥 return을 하기 위해 존재하기 때문이다. MoviePoster 클래스 컴포넌트와 함수형 컴포넌트의 결과적 차이는 없다. 함수형 컴포넌트는 function render가 없고, 라이프사이클도 존재하지 않는다. 오직 return만 존재한다. 이번에는 Movie 컴포넌트를 함수형 컴포넌트로 변경하자.

이번 포스팅은 Loading states에 대해 이야기해보자. 필요한 데이터가 항상 바로 존재하지 않을 수 있다. 데이터 없이 컴포넌트가 로딩을 하고, API를 요청하고 응답이 오면 컴포넌트 state를 업데이트한다. API콜을 타임아웃 기능으로 유사하게 구현해보자. state를 비워두고 movies function을 만들자. state.movies가 존재하지 않아 에러가 나타난다. 이럴 때 Loading states가 필요하다. 영화가 state에 없을 때마다 로딩이 나타나고, 영화 리스트를 보이도록 하는 게 목표이다. 이제 영화 리스트를 불러오는 function을 만들자. _renderMovies 함수를 정의하고 const movies 변수에 담는다. 그래서 데이터가 없을 때는 로딩을 띄우고 있으면 ..

이번 포스팅은 state를 좀 더 연습하는 시간이다. 컴포넌트 외부에 있는 영화 리스트를 state 안으로 옮겨보자. 영화 리스트를 state 안으로 옮기면 위와 같은 컴파일 에러가 나타난다. 'movies'는 정의되지 않았다는 메시지이다. greeting과 마찬가지로 this.state로 접근하면 된다. 이번에는 componentDidMount() 함수를 이용하여 render가 완료된 후 1초 뒤에 새로운 영화 리스트를 추가해보자. 여기서 ...this.state.movies를 삭제하고 실행하면 모든 영화가 사라지고 새롭게 추가한 영화만 남게 된다. 하나만 추가된것이 아니라 전체 영화 리스트를 대체해 버리게 된다. 이와 같이 state를 활용, 응용해서 다양한 효과를 줄 수 있다.

이번에 배울 것은 state이며, state는 리액트 컴포넌트 안에 있는 오브젝트이다. 규칙은 다음과 같다. 컴포넌트 안에 state가 바뀔 때마다, 컴포넌트는 다시 render를 한다. 매우 심플한 구조이다. state 선언과 componentDidMount()에서 setTimeout을 사용하여 5초후 state 값을 변경하게 하였다. 컴포넌트가 mount 할 때마다, greeting을 Hello! -> Hello again!으로 변경한다는 뜻이다. render가 다시 작동하면서 변경이 이루어질 것이다. 기억해야 할것은 state를 바꿀 때 setState를 설정하고, 업데이트할 때마다 render가 작동한다는 것이다. 새로운 state와 함께~

이번에는 리액트의 컴포넌트 라이프사이클을 배워보도록 하자. 컴포넌트는 여러 기능 들을 정해진 순서대로 실행하는 것을 라이프사이클이라고 한다. reder를 할 때, 즉 컴포넌트를 띄울 때, 이 순서대로 진행된다. Render : componentWillMount() -> render() -> componentDidMount() 이 순서는 자동으로 발생된다. console.log를 통해 순서를 알아보았다. 다시 한번 순서를 기억하기 바란다. 이번에는 Update의 순서를 알아보자. 조금 스텝이 많다. Update : componentWillReceiveProps() -> shouldComponentUpdate() -> componentWillUpdate() == true -> render() -> compo..

이번 포스팅에서는 영화 정보를 리스트로 만들어 보자. 지난 포스팅에서 만든 영화 리스트는 효율적이지 않기 때문이다. 또한 몇 개의 영화를 갖고 있는지 모르는 경우도 있으니까 말이다. API를 통해 영화 정보를 불러오고 싶을 때 어떻게 해야 되는지 알아보자. 지난 포스팅과 동일한 결과물이 나왔다. 효율적이게 array 선언을 한 후 맵핑을 해서 순차적으로 접근하여 하나의 컴포넌트를 만들어 반환하였다. 리액트는 엘리먼트가 많은 경우 유니크한 key를 지정해줘야 한다. 아래와 같이 코드 변경을 통해 warring을 없애보자. 이번에는 함수형 컴포넌트를 클래스형 컴포넌트로 변경해보자. 추가적으로 컴포넌트 간의 데이터를 전달할 때 사용되는 props 오브젝트를 확인하는 방법이 있다. 바로 propTypes이다. ..

리액트에는 2개의 주요 콘셉트가 있다. 하나는 state, 다른 하나는 props이다. 이번 포스팅에서는 props를 다루어 보자. 예를 들면, 여기 영화 리스트가 있다고 가정하자. 이 영화들의 제목을 Movie 컴포넌트에 전달하는 방법을 알아보자. App.js에서 const를 사용하여 movies 목록을 정의하고 Movie 컴포넌트에 title이라는 데이터를 전달한다. 그다음 Movie.js에서 console.log를 찍어보자. 전달받은 인자로는 props이다. props 오브젝트를 통해 접근하고 데이터를 표출할 수 있다. Movie 컴포넌트에 title이 있고, Movie.js에서 title을 props로 불러온다. Movice 컴포넌트는 title이라는 요소를 가지고 있기 때문이다. 자 이제, 포스..

지금까지 리액트에 대한 소개 및 필요한 프로그램 설치를 진행하였다. 이번 포스팅부터 실제 영화 앱을 만들어 보도록 하자. 영화 앱에 필요한 API는 아래의 사이트에서 제공되는 것을 사용할 예정이다. https://yts.lt/api API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts.lt App Comonent 안에 return을 보면 html이 자리 잡고 있다. 이런 형태를 JSX라고 한다. JSX는 리액트 컴포넌트를 만들 때 사용하는 언어이다. 규칙은 심플하다. 예를 들면, css의 'class'가 아니라 ..