갬발자의 프로그래밍/React12 영화 API 사용해보기 기존에 있던 todo 와 라우터를 사용해봤으면 이제 api를 사용해볼 차례이다. api를 사용하려고 알아보던 와중에 영화진흥위원회 api를 사용해보기로 했다. https://www.kobis.or.kr/kobisopenapi/homepg/main/main.do 주소에서 api를 가져올 수 있다. 일단 src/components/MovieRankAPI 를 만들었다. 그리고 각각의 해당하는 아이템과 리스트를 만들었다. import React from "react"; import styled from "styled-components"; ... const MovieItem = ({ movie }) => { const { rank, rankOldAndNew, movieNm } = movie; // console.. 2020. 1. 15. 리액트 라우터 사용하기 저번에 만들었던 Todo에 이어서 라우터를 연습하자 import React, { useState, useCallback, useRef } from "react"; import "./TodoTemplate.css"; import TodoList from "./TodoList"; import TodoInsert from "./TodoInsert"; import styled from "styled-components"; const TodoTemplateBlock = styled.div` display:flex; width:768px; margin: 0 auto; margin-top: 100px; @media screen and (max-width:768px){ width:100%; } ` const TodoL.. 2020. 1. 15. 리액트 뽀개기 (5) 자식에서 부모로 데이터를 전달하는 방법을 알아보자. //App.js class App extends React.Component { parentState = data => { console.log(data); } render(){ return ( ) } } 위의 코드를 보게 되면 Child에 props로 parentState를 전달한다. 그리고 parentState()는 data를 받아서 console에 출력해준다. 다음 Child 컴포넌트를 보자. import React, { Component } from 'react'; class Child extends Component { state = { name : '' } handleChange = e => { this.setState({ name : e.t.. 2020. 1. 2. 리액트 뽀개기 (4) 라이프 사이클을 알아보자. React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl 리액트에서 제공하는 라이프 사이클인데 한글로 되어있으니 어렵지 않게 알아볼 수 있다. 찾아보면 render와 getDerivedStateFromProps는 마운트와 업데이트 모두에 속한다. 라이프 사이클의 함수들은 아래와 같다. (16.3 이상의 버전) //Life.js //마운트 constructor(props) {} static getDerivedStateFromProps(props, state){} componentDidMount(){} UNSAFE_compon.. 2020. 1. 2. 이전 1 2 3 다음
