react hook
-
[React] EffectHook - api 활용하여 검색 결과 보여주기Javascript/React 2020. 10. 27. 12:36
api를 활용하여 진행하기 때문에 chrome store에서 json viewer download이 필요 axios 설치 api를 가져올 사이트는 아래와 같이 생겼다. https://hn.algolia.com/api/v1/search 예시 소스는 아래와 같으며 각 라인별 설명을 주석 처리로 설명해 놓았다. mport React, {useState, useEffect} from "react"; // Json 데이터를 받아 오기 위해 선언 import axios from 'axios' const App = () => { //react satate hook // hits는 가져올 api에서의 데이터 const [data, setData] = useState({ hits: []}) // api 검색 키워드 (쿼..
-
[React] State HookJavascript/React 2020. 10. 27. 12:25
React hook은 react 최신 문법의 핵심으로 기존의 리액트가 클래스 기반의 컴포넌트를 생성하는 데 있어 단점을 해결하기 위해 새로 출시한 기능 React hook은 class를 전혀 사용하지 않고 함수로 시작해서 함수로 끝난다. 다음 예시 소스는 state hook을 사용하여 버튼 클릭 시 숫자가 증가하는 웹 페이지에 대한 소스다. import React, { useState } from "react"; // react hook 불러오기 import logo from './logo.svg'; import './App.css'; // useState는 최상단에서 선언해야 한다. // 버튼 클릭 시 숫자 자동 증가 function App() { // 카운트는 클릭 횟수 저장할 변수, setCount..