일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- design pattern
- 백준
- 데이터모델링과마이닝
- 자바
- 자바스크립트
- 프로그래머스
- useEffect
- 프로그래머스 완전탐색
- Java
- 디자인 패턴
- 코틀린
- 리액트
- codesandbox
- react hook
- React JS
- websocket
- 리액트 훅
- react firebase
- vanillaJS
- 장고
- 코딩테스트 고득점 Kit 완전탐색
- 코딩테스트 고득점 Kit
- 프로그래밍 언어론
- useState
- JavaScript
- 자바 공부
- 컴퓨터 네트워크
- NextJS
- react
- 프로그래머스 자바
- Today
- Total
목록React JS (12)
기록하는 개발자
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Vik7N/btrgoAyw8Le/eQKZodK1fVNAkXzf6ZWF4K/img.png)
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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Mdup4/btrgpv4gQN0/EtNEQRKQvJG8nXbPyNrni1/img.png)
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 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bHXd9k/btrgh2pnYOy/ZYWJsh0zibQFHKk4eSmrM1/img.png)
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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/s1GjN/btrfO4UGPPX/5x2K9EgMmvGhowQK7eYxy1/img.png)
구현할 화면 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..