반응형 분류 전체보기151 React - useState vs useReducer and Custom Hook 함수형 컴포넌트에서 상태를 관리하기 위해 보통 useState를 사용하게 됩니다. useState를 사용하여 만든 Counter Component입니다. 하지만 여기서 관련 state가 추가되고 함수가 많아진다면 관리하기 까다로워질 것입니다. import React, { useState, useCallback } from "react"; export default function Counter() { const [num, setNum] = useState(0); const onIncrease = useCallback(() => { setNum((prevNum) => prevNum + 1); }, []); const onDecrease = useCallback(() => { setNum((prevNum) .. 2020. 9. 10. React Component 최적화 - useMemo, useCallback, React.memo 함수형 컴포넌트(functional component)의 경우 Hooks를 통해서 다양한 작업을 할 수 있게 됩니다. 이 포스트에서 알아볼 Hook은 useMemo, useCallback입니다. 그리고 마지막으로 React.memo도 알아봅니다. 먼저, 컴포넌트가 리렌더링 되는 조건을 알아보면 다음과 같습니다. - 부모 컴포넌트의 리렌더링 - Props의 변화 - State의 변화 - this.forceUpdate로 강제로 렌더링 다음과 같은 컴포넌트 코드가 있습니다. 아래 코드는 다음과 같이 진행됩니다. 1. input의 입력 2. state의 변경으로 인한 컴포넌트 리렌더링 3. onChange 함수의 선언 및 할당 즉 input이 입력될 때마다 리렌더링이 진행되고 그때마다 onChange의 함수를 .. 2020. 9. 10. 백준 16947 서울 지하철 2호선 - C++ 접근 1. 순환선에 속하는 정점 파악 2. 순환선에 연결되어 있는 정점들의 최소거리를 구하기 순환선을 어떻게 구할지 부터 알아보면 다음과 같다. 순환선은 DFS를 이용하여 구할 수 있다. 먼저, 사이클을 형성하려면 최소 3개의 정점이 연결되어 있어야 한다. 그리고 1에서 시작한 정점이 다시 1로 돌아와 사이클을 형성하려면 3번의 이동이 필요하다. 사이클 형성 시 사이클에 속하지 않은 정점은 제외해주기 위해 사이클이 만들어질 때 시작 정점을 return값으로 주어야 한다. 예를 들어, 1 -> 2 -> 3 -> 1 탐색이 되었다고 하면 1 재방문시 이동거리가 3이어서 사이클이 형성된다. 그렇다면 return 하면서 cycle 기록을 해준다면 문제가 없다. 만일 4 -> 2 -> 1 -> 3 -> 2순으로 .. 2020. 9. 8. Window에서 node.js(express)에서 ffmpeg를 활용하여 thumbnail만들때 에러 FFmpeg를 다운도 받았고 환경변수 설정에서도 잘 설정해주어서 다음과 같이 ffmpeg, ffprobe명령어가 잘 실행되는데도 node.js에서 ffmpeg 모듈을 활용하려할 때 에러가 발생한다. 이런식으로 에러가 발생하는데 이게 node를 실행하는 터미널이 관리자 권한이 아니면 제대로 ffmpeg를 실행하지 못한다. 삽질끝에 혹시나 권한 문제인가 싶어서 해봤는데 역시나 권한 문제였다. powershell을 관리자 권한으로 실행하고 node를 실행하고 테스트 해보자! 2020. 8. 15. 이전 1 ··· 8 9 10 11 12 13 14 ··· 38 다음
