전체 글 (127) 썸네일형 리스트형 개발자가 되고 싶은 퍼블리셔 축구 잘하고 싶은 신입 퍼블리셔 오지게 인사 박습니다! 개발자 되기 위해 열심히 노력 중입니다ㅏㅏ 앞으로 해야 할 것들이 태산인데 같이 쉽게 공부했으면 좋겠습니다! 가ㅏㅏ자ㅏㅏㅏㅏㅏㅏㅏ!!!!!ㅏ - Contact kihyeoksong@naver.com - Portfolio 비밀ㄹㄹㄹㅎ허ㅔㅎㅎ React 실습 -10 : Rendering the Movies 아아ㅏㅏ아ㅏ아ㅏ아아ㅏㅏㅇ 고고 이제 API에서 data를 가지고 왔지! console로 데이터를 한번 보자! 이렇게 작성하고! 콘솔창을 보면! 여기서 다 필요 없고 data만 보자! data안에 data를 보면 많은 movies들이 있지! 우리는 이 movies를 원해!! 그래서 moives.data.data.movies! 보다는! ES6가 생겼으므로!! 이렇게 줄이는거지!!!! 진짜 짱이돠.. 그럼 결과는 !? 두둥! 멋져부러잉 영화 리스트만 담겼어!! 그럼 다음 할 일은 뭘까?! 오케오케 movies를 state안에 넣어야지! 안어려움 고고! movies:moives 처음엔 어려울 수 있는데 걱정노노! 처음 movies는 속성 movies고! 2번째 moives는 변수 movies야! 하나는 setS.. React 실습 -9 : Fetching Movies from API 보통 JavaScript에서 data를 fetch 하는 방법은 fetch를 사용하는 거야 fetch보다 더 좋은 방법이 있는데 바로 Axios ! 여기서는 axios를 사용해보자! axios가 어떻게 동작하냐면, 겁나 쉬워 axios는 마치 fetch 위에 있는 작은 layer야 예를 들면, axios는 초콜릿 주위의 멋진 땅콩 같은 거야! 하지만 우리는 axios를 설치해야 해.. 근데 겁나 쉬워 터미널에 한 줄만 추가해주면 돼! npm install axios 끝! 좋아 좋아!! 이제 우리가 쓸 API에 대해서 얘기할게 우리는 YTS에서 만든 API를 사용할 거야 yts.lt에 접속해서 제일 밑에 API 클릭하고 List Movies를 클릭하면 이렇게 나오는데 https://yts.mx/api/v2/.. React 실습 -8 : Movie Component 우리는 component life cycle을 알게 됐어!! 이제 다 삭제.. 하고 movie component를 구성해보자고! 알다시피 mount는 생겨나는 것, 태어나는 것, 살아 있는 거야 mount 되자마자 isLoading은 기본적으로 true야 기본적으로 Loading이라는 건 명백해 왜냐면 이건 loading 중 이거든 이렇게 작성하고! return에 삼항 연산자로 추가해보자! react 아니야 JS야! 그러니까 삼항 연산자가 되는 거야!! 생각해야 돼 JS!! isLoading이 true면 Loading, false면 We are ready를 보여 줘! 결과는? 이제 감이 오지? 정의되지 않았거든 우리는 항상 this.state를 사용해야 해!! isLoading 앞에 this.state를.. React 실습 -7 바로바로 흐름 끊지 말고 가보자ㅏㅏㅏ 지금 코드를 보면 이렇게 되어 있겠지? 좋아좋아! 작업한 것 중에 react component에서 사용하는 유일한 function은 render function이야! add minus function은 둘 다 우리가 만든거잔아? component랑 react class component는 단순히 render말고 더 많은걸 갖고 있어! 이 component들은 life cycle method를 가지는데 life cycle method는 기본적으로 react가 component를 생성하고 없애는 방법이야! component가 생성될 때, render 전에 호출되는 몇가지 function이 있어! component가 render 된 후, 호출되는 다른 function들이 .. React 실습 -6 와우 또 왔군.. 가자ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ 여기서 이런 말을 하는 사람도 있어! state는 단지 object잔아 ? 이거로 뭘 할 수 있다는거야? 예를 들어서, 내가 add를 쓰고 싶을 때, 단지 this.state.count = 1을 할 수 있다는걸 의미 해 minus를 쓰고 싶을 땐, this.state.count = -1 단지 예일 뿐이야! 적용하고 런을 해보자! 오잉? 보다시피 동작하지 않지? state를 set해라, 직접 state를 변경하지 마라 라고 하네 왜 동작하지 않을까? 나는 state를 변경하고 있지만, state는 동작하지 않아! 나한테 보여주지 않아! 그 이유는, react는 render function을 refresh하지 않기 때문이야 저렇게 해서 작동한다는 것은 매번 s.. React 실습 -5 자자자자자ㅏ자자ㅏㅏ자자 이제 그동안 했던 food 예제들을 버려야 햌ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 겁나 아까운데 아까워하면 안돼 .. 이제 state에 대해 배워야 하는데 food 예제는 state를 위해 동작하지 않기 때문이야.. 왜냐면 이 데이터들은 내가 작성했어 state는 보통 동적 데이터와 함께 작업할 때 만들어져! 변하는 데이터, 존재하지 않는 데이터! 그리고 생겨나고 사라지고 또는 변경되고, 하나인 데이터가 두개가 되고 0이 되는 종류의 것들 이게 바로 dynamic data야! 그리고 이런 props는 우리를 돕지 않아!! 우리가 필요한건 state야 !!! 아아ㅏㅏㄲ!!!!!!!!!!!!!!!!!!!!!!! 자 슬프지만 다 지우자 .... 그리고 우리는 function compo.. React 실습 -4 바로가자ㅏㅏㅏ 우리는 항상 점검할 필요가 있어! father component로부터 전달받은 props가 우리가 예상한 props가 맞는지! 이걸 보기 위해서 list각각에 rating을 추가할거야 rating은 말그대로 평가한다는 뜻이야 그리고 이건 number야 바로 코드 추가 해보자고 rating 즉, 평가! 음식이니까 평점을 표시하기 위해 한거야 이건 string이 아니라 number라는걸 기억 해! 앞으로 점점 많아지는 props를 나의 food object로 전달하고 싶기 때문에 이렇게 할거야! 그리고 props types라고 하는것을 설치하려고 해! node.js에 무언가를 설치하는 방법은 npm 뒤에 설치하고 싶은걸 쓰면 돼 props types 같은 경우는 npm i prop-types .. 이전 1 ··· 10 11 12 13 14 15 16 다음
