코딩브론즈

이쁘게 꾸미기 위해 App.css와 Movie.css에 css 코드를 작성하자. /* App.css */ * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: #f7f5f5; height: 100%; } html, body, #zzz, .container { height: 100%; display: flex; justify-content: center; } .loader { w..

movie에 장르(genres)를 추가해 볼것이다. 보다시피 genres는 배열의 형태이다. props에 추가하고 실행 시켜보자. 콘솔을 보면 genres 가 Movie 컴포넌트에서 required인데 값이 undefined 라고한다. 아직 데이터를 넘겨주지 않았으니 당연한 결과이다. 위의 에러는 저번 포스트에서 말했듯이 JSX 때문이다. 이 코드가 HTML처럼 보이지만 사실은 JavaScript이다. 그리고 JavaScript에서 class는 이 class를 의미한다. 따라서 react는 약간 혼란스러워 할 것이고 혼란을 방지하기 위해 HTML의 class는 className 라고 써야하는것이다. 비슷한 예시로 HTML의 태그의 for 속성이 있다. JavaScript의 for과 혼동되므로 hrmlFo..

이번 포스트에서는 본격적으로 웹페이지를 꾸며볼 것이다. 먼저 Movies.js의 함수 컴포넌트에서 태그로 title만 가져오던것을 태그로 묶어서 return 하자. title 뿐만 아니라 year와 summary를 가져왔다. 이미지도 넣었다. alt는 안쓰면 warning이 뜨기 때문에 써주는게 좋다. 그 외의 warning 으로는 이런게 있는데 이것은 JSX는 JavaScript이므로 class에 다른 의미가 있기 때문이다. HTML 태그 속성을 쓰는것은 좋지 않으니 class 대신 className을 쓰라는 의미이다. 물론 안바꿔도 동작은 한다. 데이터가 잘 나오는것을 확인했으니 이제 예쁘게 꾸밀 차례다. create-react-app 덕분에 css 통합이 매우 쉽다. style component 라..

이제 API에서 data를 가져왔으니 console.log를 찍어보자 구조를 보면, data > data > movies 인것을 확인할 수 있다. 따라서 movies.data.data.movies를 출력해보면 이렇게 20편의 movie들을 볼 수 있다. 하지만 이건 뭔가 깔끔하지 않다. es6를 사용해보자. (es6 : ECMA script의 새로운 버전) 잘 나온다. 이제 이 movies를 state안에 넣을 것이다. this.setState({movies.movies}) 앞의 movies는 state의 movies[] 이고 뒤의 movies는 axios에서온 movies이다. 하지만 JavaScript가 이해하는건 똑같기때문에 다음과 같이 단축해서 쓸 수 있다. this.setState({movies..

일반적으로 사람들이 JavaScript에서 data를 fetch 하는 방법은 fatch()를 사용하는 것이다. 하지만 fatch()보다 좋은 방법이있다. 바로 Axios이다. Axios는 fetch 위에 있는 작은 layer와 같다. 마치 아몬드초콜릿의 초콜릿임. Axios 설치법은 간단하다. npm install axios 혹은 npm i axios 일단 사용할 Movie API는 YTS 에서 만든 API이다. yts.mx/api#list_movies API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts.mx ..

react component에서 사용하는 유일한 function은 render function 이다. 하지만 React.Component는 render말고 더 많은걸 가지고 있다. 이들은 life cycle(생명주기) method를 가지는데, life cycle method는 기본적으로react가 component를 생성하고 없애는 방법이다. component가 생성될 때, render 전에 호출되는 몇 가지 function이 있다. component가 render 된 후, 호출되는 다른 function들도 있다. 가장 중요한 애들을 살펴보자. React.Component – React A JavaScript library for building user interfaces ko.reactjs.org 1..

앞선 Food예제와 이제 작별할 시간이다. Food 예제는 state를 위해 동작하지 않기 때문이다. state는 보통 우리가 동적 데이터와 함께 작업할 때 만들어 진다. Dynamic Data (동적 데이터): 변하는 데이터, 변하지 않는 데이터, 생겨나는 데이터, 사라지는 데이터, 변경된 데이터, 하나인 데이터, 두개가 되는 데이터, 0이 되는 데이터 등등. 앞서 했던 props는 여기서 필요없다. 우리가 필요한건 이제 state다. 먼저 App.js를 다 지우자. 참고로 기존의 것들을 function component 라고 부른다. 앞으로 나오는것은 class component라고 한다. React.Component - 위의 React.Component는 뒤에 많은 것을 가지고 있다. 그 중 하나가..

우리는 항상 부모 component로 부터 전달받은 props가 우리가 예상한 props인지를 점검해야한다. 점검에 앞서 list에 있는 props에 rating을 추가하자. 이런식으로 많은 props를 전달하는것이 가능하다. 그리고 props types 를 설치한다. npm i prop-types 이 prop-types가 할 일은 내가 전달받은 props가 내가 원하는 props인지를 확인해 준다. 우리는 인간이기 때문에 실수를 할 수 있다. Food 컴포넌트가 다른 file에 있거나, 인자가 오타나거나 등등.. 이 때 prop types는 내가 뭘 실수했는지 알려준다. 설치가 완료되면 package.json의 dependencies가 추가된다. 이제 prop-types를 사용해보자. 먼저 App.js..