코딩브론즈

이제 링크를 통해 정보를 라우터로 보냈다. 하지만 문제가 있다. 영화를 클릭하지 않고 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에 대한 학습을 시작해보자. 지금까지의 웹 페이지를 구현하는것도 물론 좋았지만 이 페이지에 인터랙션을 추가..

이제 배포를 해보자. 먼저 gh-pages를 설치해야한다. gh-pages는 github에 업로드하는 것을 허가해주는 모듈이다. npm i gh-pages gh-pages는 내 웹사이트를 github의 github page 도메인에 나타나게 해준다. 즉 github가 나에게 무료 웹사이트를 제공하는것이다. static 웹사이트와 HTML, CSS, JavaScript 웹사이트는 무료로 제공해준다. 일반적으로 동작하는 방식은 github에서 내 project 이름을 가져오는 방식이다. 먼저 내 github에 있는 프로젝트 이름을 보면 git remote -v 프로젝트 이름은 movie_app_2021임을 알 수 있다. 그 다음은 user name을 알아야 한다. 나의 github user name은 lau..

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