목록frontend/react (25)
DEVLOG
Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다! useState useEffect useRef useMemo useCallback useReducer 커스텀 Hooks ○ useRef useRef의 역할은 두가지이다. 1) ref와 같이 DOM을 선택하는 역할 2) 로컬변수(렌더링과 상관없이 바뀔 수 있는 값)을 활용 1) ref와 같이 DOM을 선택하는 역할 먼저 DOM을 선택하는 역할부터 살펴보자 쉽게 생각해서 javascript의 querySelector처럼 DOM에 직접 접근해야할때 사용하..
Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다! useState useEffect useRef useMemo useCallback useReducer 커스텀 Hooks ○ useState 가장 기본적인 Hook이며 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서 state를 사용할 수 없었다. 16.8이후부터는 useState함수를 이용하여 함수형 컴포넌트에서도 state를 사용하여 가변적인상태를 지닐 수 있게 해준다. 따라서 함수형..
axios는 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트이다. 한 번 연습해보자:) yarn add axios ** 가장 먼저 프로젝트 폴더에서 axios설치! API데이터 받아오기 먼저 API를 호출해서 데이터를 받아오는 연습을 해보자! react APP을 하나 생성하고 App.js를 다음과 같이 작성한다 import React, {useState} from 'react'; import axios from 'axios'; const App = ()=>{ const [data, setData] = useState(null); const onClick = ()=>{ axios.get('https://jsonplaceholder.typicode.com/todos/1').then(repons..
Google APIs에서 Youtube API key를 발급받아보자!! 학교다닐때 구글맵API를 여기서 발급받았었는데... 오랜만에 들어오는구나... ㅎㅎㅎ ● 먼저 Google APIs로 접속하기 https://console.developers.google.com ● 새로운 프로젝트 만들기 프로젝트명 설정후 만들기! ● 좌측 탭 라이브러리 메뉴로 이동 ● 검색창에 youtube를 검색하고 YouTube Data API v3를 눌러서 사용설정한다. ● 사용자 인증정보 만들기 위 단계를 거치면 내 APIkey가 발급된다! 짜잔~~끝~~~