'React' 카테고리의 글 목록

React_useHistory/useNavigate

React 로그인로그아웃 기능 구현 강좌를 따라하다가 다음과 같은 오류를 만났다. 'useHistory' is not exported from 'react-router-dom' 구글링하여 찾아낸 해결법. react-router-dom V6에서 useHistory()는 useNavigate()로 대체되어 Navigate로 변경했더니 잘 작동 된다! **변경전 import {useHistory} from "react-router-dom" const history = useHistory(); props.history.push("/login") **변경후 import { useNavigate } from "react-router-dom" const navigate = useNavigate(); navigate(..

React 2021. 11. 24. 13:37

React_Router에서 props 전달하기

이미 만들었던 블로그 사이트의 디자인을 대폭 변경하면서, React Router로 렌더링되는 컴포넌트를 지정해주는 상황에서 props를 전달하게 되었다. 변경전 변경후 ^^ 아 혹시나 해봤는데 역시나 안된다. 구글링 후 바로 해결 할 수 있었다. Goood!! 옳은 방법 } />

React 2021. 11. 22. 20:45

React_React Icons

React에서 Font Awsome과 같은 Icon을 간편하게 사용하는 방법. React-icons 라이브러리 설치하기. npm install react-icons --save yarn add react-icons 터미널에서 해당 라이브러리를 설치 후 https://react-icons.github.io/react-icons 사이트에서 사용하고자 하는 항목의 맨 위에 있는 사용방법을 참고하자. 컴포넌트를 import 하여 사용 하는 것과 같은 방법으로 icon을 쉽게 사용 할 수 있다. import { FaHeart } from "react-icons/fa"; function Icons(){ return(

React 2021. 11. 18. 12:52

React_useReducer

useReducer useReducer는 useState와 같이 상태관리를 도와주는 Hook이다. 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 다른 파일에 작성 후 불러와서 사용 할 수도 있다. 같은 작업을 useState와 useReducer로 해보았다. useState import React, { useRef , useState, useMemo, useCallback } from 'react'; import CreateUser from './CreateUser'; import UserList from './UserList'; // active값이 true인 사용자의 수를 세어 화면에 렌더링하기...

React 2021. 11. 12. 14:44

React_useMemo

useMemo 성능 최적화를 위하여 연산된 값을 useMemo라는 Hook을 사용하여 재사용하는 방법을 알아보자. active값이 true인 사용자의 수를 세어 화면에 렌더링하려고 하는데, users에 변화가 있을 때만 세는 것이 아니라, input 값이 바뀔 때에도 수를 세고 있다. 이렇게 불 필요한 리렌더링을 막기 위해 useMemo를 사용 할 수있다. useMemo의 Memo는 "memoized"를 의미 (이전에 계산 한 값을 재사용한다는 의미)

React 2021. 11. 11. 23:17

React_useEffect

useEffect useEffect라는 Hook을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법을 알아보자. useEffect의 첫번째 파라미터 = 함수 / 두번째 파라미터 = 의존값 ** cleanup함수란? useEffect에서는 함수를 반환 할 수 있는데 이를 cleanup함수라고함 useEffect안에서 return 할 때 실행된다. useEffect의 뒷정리 담당. (state에서 값 지울때 실행됨) useEffect의 deps 배열을 비울 경우. useEffect의 deps에 특정 값을 넣을 경우. useEffect의 deps 파라미터를 생략 할 경우.

React 2021. 11. 11. 23:06