티스토리

개발해보개
검색하기

블로그 홈

개발해보개

doglovedeveloper.tistory.com/m

공부기록.

구독자
1
방명록 방문하기

주요 글 목록

  • 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(.. 공감수 0 댓글수 0 2021. 11. 24.
  • React_Router에서 props 전달하기 이미 만들었던 블로그 사이트의 디자인을 대폭 변경하면서, React Router로 렌더링되는 컴포넌트를 지정해주는 상황에서 props를 전달하게 되었다. 변경전 변경후 ^^ 아 혹시나 해봤는데 역시나 안된다. 구글링 후 바로 해결 할 수 있었다. Goood!! 옳은 방법 } /> 공감수 0 댓글수 0 2021. 11. 22.
  • 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( 공감수 0 댓글수 0 2021. 11. 18.
  • 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인 사용자의 수를 세어 화면에 렌더링하기... 공감수 0 댓글수 0 2021. 11. 12.
  • React_useMemo useMemo 성능 최적화를 위하여 연산된 값을 useMemo라는 Hook을 사용하여 재사용하는 방법을 알아보자. active값이 true인 사용자의 수를 세어 화면에 렌더링하려고 하는데, users에 변화가 있을 때만 세는 것이 아니라, input 값이 바뀔 때에도 수를 세고 있다. 이렇게 불 필요한 리렌더링을 막기 위해 useMemo를 사용 할 수있다. useMemo의 Memo는 "memoized"를 의미 (이전에 계산 한 값을 재사용한다는 의미) 공감수 0 댓글수 0 2021. 11. 11.
  • React_useEffect useEffect useEffect라는 Hook을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법을 알아보자. useEffect의 첫번째 파라미터 = 함수 / 두번째 파라미터 = 의존값 ** cleanup함수란? useEffect에서는 함수를 반환 할 수 있는데 이를 cleanup함수라고함 useEffect안에서 return 할 때 실행된다. useEffect의 뒷정리 담당. (state에서 값 지울때 실행됨) useEffect의 deps 배열을 비울 경우. useEffect의 deps에 특정 값을 넣을 경우. useEffect의 deps 파라미터를 생략 할 경우. 공감수 0 댓글수 0 2021. 11. 11.
  • React _ 배열 항목 수정하기 배열의 불변성을 유지하면서 배열을 업데이트 시킬 때에도 map 함수를 사용. id 값을 비교하여 id가 다르다면 그대로 두고, 같다면 active 값을 반전시키도록 onToggle 함수를 만들어 구현. 공감수 0 댓글수 0 2021. 10. 3.
  • React _ 배열에 항목 추가&제거하기 useState를 통한 상태 관리. 불변성을 지키면서 배열에 새 항목을 추가하는 방법. 1. spread 연산자 사용 2. concat 함수 사용 불변성을 지키면서 배열에 있는 항목을 제거하는 방법. -filter 함수 사용 결과 공감수 0 댓글수 0 2021. 10. 3.
  • React _ useRef 로 컴포넌트 안의 변수 만들기 React _ useRef 로 컴포넌트 안의 변수 만들기 이전 useRef에 관한 게시글에 있던 용도2에 대한 연습. useRef. 용도 1. React Hooks중 하나로 javascript의 getElementById querySelector와 같이 특정 DOM을 직접 선택하기 위해 사용하는 함수. (외부 라이브러리 사용시 유용) class형 컴포넌트에서는 콜백함수 혹은 React.createRef 사용. 용도 2. 컴포넌트 안에서 조회 및 수정 할 수 있는 변수 관리. useRef로 관리하는 변수는 값이 바뀐다고해서 컴포넌트가 리렌더링되지 않는다. 용도2 연습. useRef() 를 사용하여 nextId라는 변수 만들기. 공감수 0 댓글수 0 2021. 10. 3.
  • React _ Map을 사용한 배열 렌더링 React _ Map을 사용한 배열 렌더링 아래와 같이 코드 그대로 길게 작성하는 방법은 react의 컴포넌트 기능을 이용하지 못한 비효율적인 방법이다. 컴포넌트를 재사용 할 수 있도록 수정. 자바스크립트 배열의 내장함수 map() 을 사용하여 배열 렌더링. 위의 세가지 방법에 대한 결과는 아래와 같이 모두 같다. 공감수 0 댓글수 0 2021. 10. 3.
  • React _ useRef React _ useRef 공부하기. (코드 내용은 useState와 이어짐.) useRef. 용도 1. React Hooks중 하나로 javascript의 getElementById querySelector와 같이 특정 DOM을 직접 선택하기 위해 사용하는 함수. (외부 라이브러리 사용시 유용) class형 컴포넌트에서는 콜백함수 혹은 React.createRef 사용. 용도 2. 컴포넌트 안에서 조회 및 수정 할 수 있는 변수 관리. useRef로 관리하는 변수는 값이 바뀐다고해서 컴포넌트가 리렌더링되지 않는다. 용도1 연습. 초기화 버튼 클릭시 초기화 버튼에 포커스가 남아있는데, 초기화 이후 input에 포커스가 잡히도록 구현. 코드 공감수 0 댓글수 0 2021. 10. 3.
  • React _ useState React _ useState 공부하기. useState React Hooks 중 하나. 함수형 컴포넌트에서 사용하는 상태관리 함수. 코드 결과 Input 상태관리 코드 결과 여러개의 input 상태관리하기 코드 결과 공감수 0 댓글수 0 2021. 10. 3.
  • React _ State React _ State 공부하기. state란, 컴포넌트 내에서 동적으로 변경되는 값. React Hooks 가 나오기 전, class형 컴포넌트의 상태관리를 위해 this.state를 사용. *props와 state 비교 props는 함수 매개변수처럼 컴포넌트에 전달되는 반면, state는 함수 내 선언된 변수처럼 컴포넌트 안에서 관리가 된다. 공부내용. https://codesandbox.io/s/clever-waterfall-ulfmc?file=/src/App.js 공감수 0 댓글수 0 2021. 10. 3.
  • React _ Props React _ Props 공부하기. Props (Properties) : 어떠한 값을 다른 컴포넌트에게 전달해줘야 할 때 사용. 부모컴포넌트 -> 자식컴포넌트 (defaultProps. 컴포넌트에 props를 지정하지 않았을 경우, 기본적으로 사용할 값을 정할 수 있다. ) 공부내용. 1.벨로퍼트의 누구든지 하는 리액트 https://codesandbox.io/s/props-forked-ro67h?file=/src/MyName.js Props (forked) - CodeSandbox Props (forked) by hyonaLee using react, react-dom, react-scripts codesandbox.io 2.벨로퍼트와 함께하는 모던 리액트 App 컴포넌트에서 Hello 컴포넌트를 사용.. 공감수 0 댓글수 1 2021. 10. 3.
  • React란? 리액트란? '컴포넌트' 기반의 프론트엔드 라이브러리이다. (Component의 이름은 항상 대문자로 시작) JSX라는 문법을 사용한다. Virtual DOM사용 (가상돔) JSX문법이란? (자바스크립트 안에서 HTML문법을 사용하여 View를 구성 할 수 있게 도와주는 자바스크립트 문법) return시 하나의 DOM만 리턴함. (이때 의미없는 div의 남용을 보완하여 Fragment가 나옴.) If문 사용 불가. (삼항연산자로 대체하여 사용 가능) 가상돔이란? (브라우저에 실제로 보여지는 DOM이 아니라 그냥 메모리에 가상으로 존재하는 DOM으로서 그냥 JavaScript 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM 을 보여주는 것 보다 속도가 훨씬 빠릅니다. 리액트는 상태가 업데이트 되면, .. 공감수 0 댓글수 0 2021. 10. 3.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.