DEVLOG

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다! useState useEffect useRef useMemo useCallback useReducer 커스텀 Hooks ○ useReducer useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 Hook function reducer(state, action){ return {...}; } 리듀서(Reducer)는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새..

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..