Enjoy Programming

지난 포스팅에 이어 영화를 랜더링해보겠다. api를 통해 얻어온 movies를 console.log해보면 이렇게 data를 확인 할 수 있다. 이번엔 movies.data.data.movies를 콘솔창에 띄워보자 이렇게 각 영화의 id~ url~ title~등등 정보를 확인 할 수 있다. 이제 render method에서 isLoading이 false로 바뀌면 ready를 리턴하도록 되어 있는데 movie data를 리턴하도록 바꿔보자. Movie.js파일을 하나만들고 역시 react와 Prop-types를 import 해주자. 그리고 movie component는 state가 필요없으므로 굳이 class component로 만들 필요가 없다 function component로 만들어보자. Movie 컴..

react component에서 사용하는 유일한 function은 render function이다. 하지만 react class component는 단순히 render fucntion이외에 더많은 것이 있다. 이들은 life cycle method를 가지는데, 기본적으로 react가 component를 생성하고 다시 없애는 방법이다. 컴포넌트가 생성될 때, render전에 호출되는 몇가지 function이 있고~ render된 후 호출되는 다른 function들이 존재한다. 자 이제 life cycle method중 Mounting을 살펴보겠다. react 공식 문서에서 살펴보면 이 메소드는 컴포넌트의 인스턴스가 생성되어 Dom에 insert될 때 순서대로 호출된다고 한다. Mounting method중..

이번에는 동일 파일 안에서 작업을 해보자 이렇게 동일 파일 안에서 한 컴포넌트에 다른 컴포넌트를 넣어서도 사용 가능하다 jsx에서는 component에 정보를 보낼 수 있다. react는 기본적으로 재사용 가능한 component를 만들 수 있다. 반복적으로 사용가능하다는 말이다. 이제 jsx문법을 간단히 보며 시작해보자 props(propertys)와 함께~ 먼저 무비 컴포넌트를 만들어주고 I love thor라고 텍스트를 지정해줬다. 메인 컴포넌트인 App에 라고 입력해주면~ 변화는 없다. 여기서 name은 html에서 class=~ id=~이런 속성이다 name 속성~ 자 변화를 시켜보자 현재 movie컴포넌트에 parasite라고 value로 prop name을 지정해줬다. name이 아니어도 되..