기록하는 개발자

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. home 화면 : home, about 버튼을 통해 home과 about 페이지로 이동할 수 있다. 2. detail page : home 화면에서 card를 클릭하면 상세 페이지를 보여준다. 3. about 화면 파일이 너무 많아 css코드는 생각하겠다. import React from "react"; import {HashRouter, Route} from "react-router-dom"; import Home from "./routes/Home"; import About from "./routes/About"; import Detail from "./components/Detail"; import Navigation from "./components/N..

구현할 화면 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..

component : html을 return하는 함수 react는 component를 사용하여 html처럼 작성하려는 경우에 필요하며, js와 html간의 조합을 jsx 라고 부른다. import React from "react"; import AppNamefrom "./AppName"; function App(){ return ( Hello! ); } export default App; 1. component를 작성할 때마다 React를 import해줘야한다. 그렇지 않으면 react는 jsx가 있는 component의 사용을 이해하지 못한다. → import React from "react"; 2. component 이름은 대문자로 시작해야한다. → appName(x) AppName(o) 3. ind..

react 사용에 필요한 것 - nodeJS, npm, npx, git, code editor - nodeJS 설치 시 npm이 함께 설치된다. (yarn과 npm은 동일한 역할을 수행한다.) - 원하는 code editor 사용 ex) VSCode, Sublime Text, Brackets, Atom, Vim etc.. react를 배우기 전 기본적으로 알아야 할 것 - html, css, vanillaJS 1. npx install > npm install npx -g 2. create app > npx create-react-app ex) npx create-react-app myapp 3. app 실행 > cd myapp > npm start import React from "..