코딩브론즈

이제 링크를 통해 정보를 라우터로 보냈다. 하지만 문제가 있다. 영화를 클릭하지 않고 movie-detail을 들어오면 state가 없는 상태(undefined)가 된다. 이 문제를 해결해 보자. 먼저 함수형 컴포넌트였던 Detail 컴포넌트를 클래스 컴포넌트로 바꿔준다. 그 다음, location.state가 undefined일 경우 리다이렉트를 시켜준다. 이게 가능한 이유는 component의 다른 prop인 history 덕분이다. history에는 go, goBack, goForward 등 많은게 있고 이것들이 url을 변경해줄 수 있다. 이제 /movie-detail 을 입력해도 홈으로 리다이렉트 될 것이며 /movie-detail은 클릭으로만 이동할 수 있게 되었다. 이제 "디테일" 이란 문자..

모든 컴포넌트에는 props 가 있다. About 컴포넌트의 props는 뭐가있는지 한번 console.log를 찍어보자. 다음과 같이 history, location, match, staticContext. 총 4개의 props들을 볼 수있다. 이것들은 react-router에 의해서 넣어진 것이다. 라우터에 있는 모든 라우트들은 위의 props를 가진다. 하나하나 자세한 설명은 당장 필요없다. 중요한건 이 props들을 사용할 수 있다는 점이다. 덕분에 클릭한번으로 정보를 전달할 수 있다. 이걸 이용해서, 영화를 클릭했을 때 movie detail 페이지로 데이터를 보내보자. reactrouter.com/web/api/Link React Router: Declarative Routing for Rea..

오늘의 할 일은 Navigation 버튼을 만드는것이다. 먼저 Navigation 이라는 컴포넌트를 생성하자. 실행시켜보면 이렇게나온다. 하지만 문제가 2개 발생하는데 하나는 홈을 누를 시 다시한번 로딩이 되는점 (새로고침이 되는 점) 다른 하나는 About 페이지가 안먹힌다는 점이다. (href="/about" 이 안먹힘) 그 이유는 이게 html이기 때문이다. html은 매번 어디를 갈때마다 그냥 페이지를 새로고침 시켜버린다. 리액트가 죽고, 새 페이지가 새로고침 되는것이다. 강제로 새로고침하면서 리액트를 죽이는걸 막고싶다면 태그 대신에 react-router-dom의 Link를 쓰면 된다. 페이지 이제 모든페이지를 죽이고 새로고침하지 않고 페이지가 바뀐다. 또한 about 페이지도 잘나온다. 하지만..

Router를 들어가기전에, 사실 더이상 state를 갖기 위해 class component를 가질 필요가 없다. 하지만 이것은 react의 새로운 부분이고 이것을 이해하는데 많은 시간이 걸린다. 그냥 react hook 이란것 때문에 더이상 state를 갖기 위해 class component를 가질 필요가 없다는 것만 알아둬라. 그렇다고 여태까지 한 내용이 올드한 내용이란 의미는 아니다. react.js 공식 문서에도 여전히 class component 는 가르치고있다. react hook은 그냥 새로운것이지 대체물이 아니고 class component가 구식이 아니라는 의미이다. 이제 Router에 대한 학습을 시작해보자. 지금까지의 웹 페이지를 구현하는것도 물론 좋았지만 이 페이지에 인터랙션을 추가..

이쁘게 꾸미기 위해 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..

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

일반적으로 사람들이 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 ..

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