기록하는 개발자

import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const content = [ { tab: "Romnace and Musical", content: "I think you like SingStreet, LaLaLand, The Greatest Show!" }, { tab: "Fantasy", content: "Avengers, Harry Potter, The Lord of the Rings!" } ]; const useTabs = (initialTab, tabArray) => { if (!tabArray || !Array.isArr..

useInput - input 내용과 그에 따른 이벤트를 useState hooks를 통해 관리할 수 있다. import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onChange = (event) => { const { target: { value } } = event; // 위와 동일 : const { value } = event.target; let ..

https://ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 랜더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서는 할 수 없었던 다양한 작업을 할 수 있게 해준다. → class를 사용하지 않고도 함수형 프로그래밍을 가능하게 해준다. - this 등과 같은 문장 규칙과 render 등을 고려해야한다. exp..

구현할 화면 1. axios로 api의 json을 가져오는 동안 "loading..." 이라는 문구를 띄워준다. 2. json data를 모두 가져오면 영화 목록을 보여준다. import React from "react"; import axios from "axios"; import Movie from "./Movie"; import "./App.css"; class App extends React.Component { state={ isLoading : true, movies:[] }; /*axios는 항상 빠르진 않아서 js에게 componentDidMount 함수가 끝날 때까지 약간 시간이 걸릴 수 있다고 전달해야한다. 이에 getMovies 비동기 함수를 만들어 axios.ge..