이제 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..
Map을 좀더 연습하기위해 기존의 코드를 고쳐보자. 콘솔 로그를 찍으면 어떻게 나올까? 뭔가 이상한게 잔뜩 나온다. 이것들은 기본적으로 react component이다. 따라서 여기에 Food component와 같은 array를 가져오는 것이다. 기존코드와 기능은 완전히 똑같다. 하지만 기존의 상태가 더 좋다. 다른 function을 만들 필요는 없다. 그렇다면 error는 뭐지? 읽어보면 각각의 list 내의 child는 unique한 key prop을 가져야 한다고 말하고 있다. 모든 react 의 element들은 유일해야한다. 즉, 내가 이들을 list에 집어넣을 때, 유일성을 잃어버린다는 의미이다. 따라서 iteml들에 각각의 id를 부여해주자. react의 모든 element 들은 다르게 보..
기존의 코드는 효율적이지 못하다. 새로운 음식을 추가할 때마다 컴포넌트를 복붙하기에는 너무 비효율적이지 않은가? 일단 데이터가 있다고 시뮬레이션 해보자. 이제 이 긴걸 어떻게 array로 가져오고 자동적으로 내가 좋아하는 음식을 이름과 함께 렌더링 하지? => JavaScript의 Map 함수를 이용해 보자 (다시한번 말하지만 react는 javaScript와 다를바 없다) - Map 함수는 array의 각 item에 function을 적용하고 array를 반환한다. 아래 예시를 보면 대충 감이 올것이다. 이제 내 앱에 적용해보자. 여기서 dish는 각각의 item이다. dish든 뭐든 어떻게 지정하든 상관 없다. 각각의 item(dish)들은 자신의 차례가 되면 화살표와 함께 리턴해준다. 여기선 Foo..
기존의 Zzz.js를 지우고 시작할것이다. (App.js에서만 작업을 하고싶기 때문) 이와같이 App.js 내에서 Zzz함수를 만들어서 호출했다. - component에 정보 보내기 jsx에서 두 번째로 이해해야 하는것은, component에 정보를 보낼 수 있다는 점이다. react가 멋진 이유는 재사용 가능한 component를 만들 수 있다는 점이다. 이 말은 component를 계속해서 반복해서 사용할 수 있다는 의미. Zzz를 Food로 고치고 Food 컴포넌트에 정보를 보내보자. Food 컴포넌트에 fav라는 이름의 property를 kimchi라는 value로 준거임. 이런 property들을 props 라고 부른다. props에는 String, boolean, array등 다양한 타입의 데..
- Total
- Today
- Yesterday
- 그리디
- BFS
- map
- 리액트
- G5
- 구현
- Spring
- java
- 문자열
- S2
- 리액트 네이티브
- 자바
- g4
- 현꾸라지
- S3
- 시뮬레이션
- PriorityQueue
- 알고리즘
- DFS
- Spring Boot
- 다익스트라
- 코딩새내기
- 백트래킹
- react native
- 백준
- 우선순위큐
- SWEA
- 객체지향
- laugh4mile
- react
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |