[React JS]Ajax in React Ajax는 Asynchronous JavaScript and XM의 약자이다. 요즘은 XML 별로 신경안쓰고, 우리가 신경쓰는 포멧은 JSON이다. JSON은 JavaScript Object Notation의 약자이다. 오브젝트를 자바스크립트로 작성하는 기법이다. 에이작스를 리액트에 적용하는건 간단하다. fetch를 이용하면 아주 간단함 자! 그러면 fetch request를 만들어보자. 우리가 만든 fetch request는 url로 갈꺼다. 우리는 FETCH를 이용해서 url에서 뭔가를 GET하는 방법을 배울 것이다. https://yts.ag/api/v2/list_movies.json 이걸 리액트에서 불러올 것이다. 그러기 전에, 해당 api의 문서를 살펴보면 평점순으로 불러오기 sort_by=ra.. [React JS]똑똑한 컴포넌트와 멍청한 컴포넌트 모든 컴포넌트가 state가 있는 것은 아니다. 어떤 컴포넌트는 state이 없는 stateless functional 컴포넌트다. 이 두개의 컴포넌트는 큰 차이점이 있다. 한개는 state이 있고, 나머지 한개는 state이 없고, 필요하지도 않는다. 이걸 dumb(멍청한) 컴포넌트 그리고 smart(똑똑한) 컴포넌트라고 해. 그들이 갖고 있는 것은 props 뿐이다. state이 없고 props밖에 없을때는 클래스 컴포넌트를 쓰는 대신에 예를 들어보자 위 코드를 아래와 같이 바꿔보았다. 1개의 props만 있고, 1개의 html 태그만 필요하다({poster}를 뜻함) 이렇게 functional 컴포넌트를 만드는 것이다. 기억해야할 규칙은 이들은 state가 없고, function render 없고,.. [React JS] Loading states Loading states란? 너가 필요한 데이터가 항상 바로 즉시 존재하지 않을 것이다. 데이터 없이 컴포넌트가 로딩을 하고, 데이터를 위해 api를 불러서, api가 데이터를 주면, 너의 컴포넌트 state를 업데이트한다. api콜을 타임아웃 기능으로 유사하게 구현해보자 일단 소스를 전반적으로 바꾸었다. state 부분을 빈공간으로 만들고 기존에 있는 데이터를 did mount에 옮기고 새로운 function을 만들어줬다. 현재 작업한 것이 무엇이냐면movies라는 variable에 데이터를 저장했다.그래서 데이터가 없을 떄 '로딩'을 띄우고,있으면 영화정보가 보이도록 하였다 그리고 우리는 데이터가 있는지 물어본다 데이터가 있으면, render movies! 만약 데이터가 없으면 '로딩 중'이라고 출.. [React JS] state 연습하기 일단 컴포넌트 외부에 있는 무비리스트를 state 안으로 옮겨보자.! 기존에 있는 const movies를 state 안으로 옮길 것이다. 이 코드를 복사한 후 삭제한다. 그리고 이 코드를 state 안으로 넣어주며, 약간 코드를 수정을 한다. state 코드에 맞게 요런 형식으로 바꿔준다. (이때 greeting : "Hello" , 콤마를 꼭 찍어줘라, 스크린샷은 안찍혀있다. 꼭 찍어줘야 한다. ) 이렇게 바꾸면 아마 터미널에서 movies를 찾을 수 없다고 뜰것이다. 그러므로, 기존의 {movies.map((movie, index) => { return })} 이 코드를 요렇게 바꿔준다. {this.state.movies.map((movie, index) => { return })} 이전 시간에 배.. [React JS] Component State state는 리액트 컴포넌트 안에 있는 오브젝트다. 규칙은 state가 바뀔 때마다, 컴포넌트는 다시 render 할 것이다. 첫번째 state를 만드는 법은 state = {greeting: "Hello"} 그리고 출력할 곳에 {this.state.greeting} 요렇게 작성하면 된다. 이제 컴포넌트가 mount되면 5초를 기다리고 greeting을 업데이트 할거야 그래서 setTimeout을 하는거다. 그래서 코드를 작성해보자. componentDidMount(){ setTimeout(() => { this.setState({ greeting: 'Hello again!' }) }, 5000) } 이렇게 작성하면된다. 이 뜻은 컴포넌트가 mount 할때마다, greeting의 헬로를 헬로 어게인으로 .. [React JS] 라이프싸이클 컴포넌트 컴포넌트는 많은 functions을 갖고 있고, 그들은 순서대로 자동으로 작동한다. // Render: componentWillMount() -> render() -> componentDidMount() // Update componentWillReceiveProps() -> shouldComponentUpdate() -> componentWillUpdate() -> render() -> component [React JS]PropType 과 isRequired 우리가 이전에 했던 것을 콘솔에서 확인해보면 오류가 뜬다. array에 있는 각 차일드는 반드시 고유한 key prop을 가져야한다. 이 말은 즉 우리는 array 안에 굉장히 많은 영화 정보를 넣을 것이다. 그런데 React는 엘리먼트가 많을 경우 key 라는 것을 줘야만 한다. 그래서 우리는 기존에 있는 코드를 아래와 같이 변경할 것이다. index를 넣어서 영화정보 한개당 id값으로 넘버(고유한 키값을 주는것임)를 매겨주는 것이다. 그러면 오류가 사라진다! 다음 작업을 하기 위해 yarn add prop-types 새로 인스톨하자 해당 디렉토리에서 yarn add prop-types 해서 새로 인스톨하자 인스톨이 완료되면 movie.js 가서 PropTypes를 불러오면 된다. import Prop.. [React JS] array map 기능 사용하여 리스트만들기 이번에는 영화 리스트를 만들어볼 것이다.지난 번에 만든 리스트는 효율적이지 않기때문에..우리는 api를 이용해서 엄청난 양의 영어정보를 가져올것이다. 그러기 위해서 는 일단, array를 만들 것이다. const movies = [ { title: "matrix", poster: "http://www.phildam.net/include/images/data/board/f73a2a2908feb45c6b8fe4c766e5acb3.jpg" }, { title: "Full Metal Jacket", poster: "http://postfiles14.naver.net/MjAxNzA0MjNfNzkg/MDAxNDkyOTU2MDk2MTQ3.60GK7pUyGaxHOUUCrQhrpT2kQgLH-5Pe44iZeMd2li0g.. 이전 1 2 3 4 5 6 다음
