Per ardua ad astra.

useCallback 훅들어가며리액트(React.js)에서 사용되는 useCallback 훅에 대해 정리해본다. useCallback 훅개념컴포넌트의 성능 최적화(Optimization)를 위해 자주 사용되는 훅함수를 메모이제이션(Memoization)하여 컴포넌트가 리렌더링될 때마다 함수가 재생성되는 것을 방지한다. 사용 방법useCallback(() => {}, [])와 같이 사용한다.첫 번째 인자로 함수를 받고, 두 번째 인자로 의존성 배열(Dependencies Array)을 받는다.const memoizedCallback = useCallback(() => { doSomething(a, b);}, [a, b]); ⇒ 리액트는 컴포넌트가 리렌더링될 때마다 해당 함수를 다시 생성하지 않고,..

React.memo()들어가며리액트(React.js)에서 제공하는 고차 함수(Higher-Order Component)인 React.memo()에 대해 정리해본다. React.memo()개념리액트에서 제공하는 고차 함수(Higher-Order Component)함수형 컴포넌트의 불필요한 재렌더링을 방지하는 역할을 한다.전달된 props가 변경되지 않는 한 해당 컴포넌트는 다시 렌더링되지 않도록 최적화(Optimization)할 수 있다.React.memo()는 함수형 컴포넌트를 인자로 받아, 그와 동일한 동작을 하는 새로운 컴포넌트를 반환하지만, 추가적으로 props가 변경되었는지 확인하는 최적화 작업이 추가된다.props가 변경되지 않은 경우, 메모이제이션된 컴포넌트는 이전 렌더링에서..

memo() 사용할 때 주의할 점들어가며리액트(React.js)의 memo()를 사용할 때 주의할 점을 정리해본다. memo()개념함수형 컴포넌트를 메모이제이션(Memoization)하여 불필요한 리렌더링을 방지하는 역할을 한다.주로 성능 최적화를 위해 사용된다.import { memo } from 'react';const MyComponent = memo(function MyComponent({ prop1, prop2 }) => { // ...});export default MyComponent; 기본적으로 컴포넌트의 props가 변경되지 않으면 컴포넌트를 다시 렌더링하지 않는다.props의 얕은 비교(Shallow Comparison)를 통해 이루어진다.얕은 비교는 기본 자료형(숫자, 문..

useEffect와 useCallback들어가며리액트에서 사용되는 useCallback과 useEffect에 대해 알아보자. useCallback리액트에서 함수를 메모이제이션(Memoization)하는 데 사용된다.불필요한 함수의 재생성을 방지하고, 함수가 의존하는 값이 변경될 때만 새로운 함수를 생성하도록 할 수 있다. 예제 코드아래의 코드에서 handleClick 함수는 count 변수가 변경될 때만 재생성 된다.그렇지 않을 경우 handleClick 함수는 재생성되지 않으며, 같은 함수를 계속 사용하게 된다.이렇게 할 경우 함수의 재생성을 최소화하여 성능 최적화를 하는데 도움을 줄 수 있다.import React, { useCallback, useState } from 'rea..

문제 효주는 포도주 시식회에 갔다. 그 곳에 갔더니, 테이블 위에 다양한 포도주가 들어있는 포도주 잔이 일렬로 놓여 있었다. 효주는 포도주 시식을 하려고 하는데, 여기에는 다음과 같은 두 가지 규칙이 있다. 포도주 잔을 선택하면 그 잔에 들어있는 포도주는 모두 마셔야 하고, 마신 후에는 원래 위치에 다시 놓아야 한다. 연속으로 놓여 있는 3잔을 모두 마실 수는 없다. 효주는 될 수 있는 대로 많은 양의 포도주를 맛보기 위해서 어떤 포도주 잔을 선택해야 할지 고민하고 있다. 1부터 n까지의 번호가 붙어 있는 n개의 포도주 잔이 순서대로 테이블 위에 놓여 있고, 각 포도주 잔에 들어있는 포도주의 양이 주어졌을 때, 효주를 도와 가장 많은 양의 포도주를 마실 수 있도록 하는 프로그램을 작성하시오. 예를 들어 ..

문제 계단 오르기 게임은 계단 아래 시작점부터 계단 꼭대기에 위치한 도착점까지 가는 게임이다. 과 같이 각각의 계단에는 일정한 점수가 쓰여 있는데 계단을 밟으면 그 계단에 쓰여 있는 점수를 얻게 된다. 예를 들어 와 같이 시작점에서부터 첫 번째, 두 번째, 네 번째, 여섯 번째 계단을 밟아 도착점에 도달하면 총 점수는 10 + 20 + 25 + 20 = 75점이 된다. 계단 오르는 데는 다음과 같은 규칙이 있다. 계단은 한 번에 한 계단씩 또는 두 계단씩 오를 수 있다. 즉, 한 계단을 밟으면서 이어서 다음 계단이나, 다음 다음 계단으로 오를 수 있다. 연속된 세 개의 계단을 모두 밟아서는 안 된다. 단, 시작점은 계단에 포함되지 않는다. 마지막 도착 계단은 반드시 밟아야 한다. 따라서 첫 번째 계단을 ..

문제 재귀 호출만 생각하면 신이 난다! 아닌가요? 다음과 같은 재귀함수 w(a, b, c)가 있다. if a 20, then w(a, b, c) returns: w(20, 20, 20) if a < b and b < c, then w(a, b, c) returns: w(a, b, c-1) + w(a, b-1, c-1) - w(a, b-1, c) otherwise it returns: w(a-1, b, c) + w(a-1, b-1, c) + w(a-1, b, c-1) - w(a-1, b-1, c-1) 위의 함수를 구현하는 것은 매우 쉽다. 하지만, 그대로 구현하면 값을 구하는데 매우 오랜 시간이 걸린다. (예를 들면, a=15, b=15, c=15) a, b, c가 주어졌을 때, w(a, b, c)를 출력..

문제 재원이는 한 도시의 시장이 되었다. 이 도시에는 도시를 동쪽과 서쪽으로 나누는 큰 일직선 모양의 강이 흐르고 있다. 하지만 재원이는 다리가 없어서 시민들이 강을 건너는데 큰 불편을 겪고 있음을 알고 다리를 짓기로 결심하였다. 강 주변에서 다리를 짓기에 적합한 곳을 사이트라고 한다. 재원이는 강 주변을 면밀히 조사해 본 결과 강의 서쪽에는 N개의 사이트가 있고 동쪽에는 M개의 사이트가 있다는 것을 알았다. (N ≤ M) 재원이는 서쪽의 사이트와 동쪽의 사이트를 다리로 연결하려고 한다. (이때 한 사이트에는 최대 한 개의 다리만 연결될 수 있다.) 재원이는 다리를 최대한 많이 지으려고 하기 때문에 서쪽의 사이트 개수만큼 (N개) 다리를 지으려고 한다. 다리끼리는 서로 겹쳐질 수 없다고 할 때 다리를 지..

문제 자연수 `N`과 정수 `K`가 주어졌을 때 이항 계수 ${N \choose K}$를 10,007로 나눈 나머지를 구하는 프로그램을 작성하시오. 입력 첫째 줄에 `N`과 `K`가 주어진다. ($1 ≤ N ≤ 1000, 0 ≤ K ≤ N$) 출력 ${N \choose K}$ 를 10,007로 나눈 나머지를 출력한다. 예제 입력 1 5 2 예제 출력 1 10 알고리즘 분류 수학 다이나믹 프로그래밍 조합론 문제 출처 https://www.acmicpc.net/problem/11051 11051번: 이항 계수 2 첫째 줄에 $N$과 $K$가 주어진다. (1 ≤ $N$ ≤ 1,000, 0 ≤ $K$ ≤ $N$) www.acmicpc.net 문제 해결 방법 이항 계수를 구하는 알고리즘을 메모이..

문제 자연수 `N`과 정수 `K`가 주어졌을 때 이항 계수 ${N \choose K}$를 구하는 프로그램을 작성하시오. 입력 첫째 줄에 `N`과 `K`가 주어진다. ($1 ≤ N ≤ 10, 0 ≤ K ≤ N$) 출력 ${N \choose K}$ 를 출력한다. 예제 입력 1 5 2 예제 출력 1 10 알고리즘 분류 수학 구현 조합론 문제 출처 https://www.acmicpc.net/problem/11050 11050번: 이항 계수 1 첫째 줄에 $N$과 $K$가 주어진다. (1 ≤ $N$ ≤ 10, 0 ≤ $K$ ≤ $N$) www.acmicpc.net 문제 해결 방법 이항 계수를 구하는 알고리즘을 이용하여 문제를 해결하였다. 관련 게시글 : https://dev-astra.tisto..