레퍼런스 마이닝

이번 포스팅은 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'가 아니라 ..

리액트를 사용하기 위해서는 Node 설치가 필요하다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 사이트에 접속하여 다운로드하면 된다. LTS 버전과 Stable 버전이 구분되어 있다. 두 가지 차이점은 아래와 같다. LTS(Long Term Supported) LTS 버전은 서버 환경에서 장기적으로 안정적인 지원을 제공하는 버전이며 안정성과 보안성을 우선한다. Stable Stable 버전은 잦은 업데이트를 진행하며 추가 기능 개발과 기존 API 개선을 우선한다. 필자는 LTS 버전을 선호하므로 LTS를 받도록 하겠다. Node 설치 설치는..

우리가 사용하는 코드는 리액트 코드이기 때문에, 자바스크립트로 바꿔주는 툴이 필요하다. 이런 툴을 '트랜스파일러' 또는 '트랜스포머'라고 부르기도 한다. 이번에 소개할 툴은 '웹팩'이다. 웹팩은 리액트 코드를 브라우저가 이해할 수 있는 코드로 변경해주는 역할을 한다. 자바스크립트는 버전이 여러 개 존재하며, 최신 버전의 자바스크립트를 웹팩을 이용해서 자바스크립트를 브라우저가 이해할 수 있게 변경해줘야 한다. https://webpack.js.org/ webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transformi..

리액트가 왜 전 세계 적으로 열광하는지 알아보자. 1. 리액트는 자바스크립트 기반이다. 별도의 다른 프레임워크를 배울 필요가 없고, 그냥 자바스크립트를 활용하면 된다. Angular, Vue 처럼 다름 언어를 배울 필요가 없다. 그냥 자바스크립트만 잘하면 된다는 뜻이다. 리액트로 하는 거의 모든 것은 자바스크립트 기반이다. 리액트를 배우면 다른 곳에선 필요 없는 기술을 배울 필요가 없다. 별도의 프레임워크, 별도의 언어를 배우면 다시 사용하지 않는다면 기억에서 점차 사라진다. 하지만 리액트는? 자바스크립트이다. 새롭게 배울 필요가 없다. 더 훌륭한 자바스크립트 개발자로 거듭날 수도 있다. 리액트를 하면서 동시에 자바스크립트 기술을 향상하는 것이다. 2. 간단한 구조 리액트 구조는 요소별, 컴포넌트별로 나..