문제

0부터 N까지의 정수 K개를 더해서 그 합이 N이 되는 경우의 수를 구하는 프로그램을 작성하시오.

덧셈의 순서가 바뀐 경우는 다른 경우로 센다(1+2와 2+1은 서로 다른 경우). 또한 한 개의 수를 여러 번 쓸 수도 있다.

입력

첫째 줄에 두 정수 N(1 ≤ N ≤ 200), K(1 ≤ K ≤ 200)가 주어진다.

출력

첫째 줄에 답을 1,000,000,000으로 나눈 나머지를 출력한다.

예제

예제 입력 1

1
2

20 2

예제 출력 1

1
2

21

예제 입력 2

1
2

6 4

예제 출력 2

1

84

내 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const [N, K] = require("fs")
  .readFileSync("/dev/stdin")
  .toString()
  .trim()
  .split(" ")
  .map(Number);

const DP = Array.from({ length: N + 1 }, (_, i) => {
  if (i === 1) return Array.from({ length: K + 1 }, (_, i) => i + 1);
  return new Array(K + 1).fill(1);
});

for (let i = 2; i <= N; i++) {
  for (let j = 1; j <= K; j++) {
    DP[i][j] = (DP[i - 1][j] + DP[i][j - 1]) % 1000000000;
  }
}

console.log(DP[N][K - 1]);

• ✏️ N = 1인 경우 K = 1,2,3 …200 경우의 수를 생각해보았다.
  • ❗️ 1개의 수로 1을 만들 수 있는 경우의 수는 1가지이다.
  • 2개의 수로 1을 만들 수 있는 경우의 수는 0+1, 1+0으로 2가지이다.
  • 3개의 수로 1을 만들 수 있는 경우의 수는 0+0+1, 0+1+0, 1+0+0으로 3가지이다…
• N = 2인 경우 K = 1,2,3 …200 경우의 수를 생각해보았다.
  • ❗️ 1개의 수로 2를 만들 수 있는 경우의 수는 1가지이다.
  • 2개의 수로 2를 만들 수 있는 경우의 수는 1+1, 2+0, 0+2로 3가지이다.
  • 3개의 수로 2를 만들 수 있는 경우의 수는 1+1+0, 1+0+1, 0+1+1, 2+0+0, 0+2+0, 0+0+2로 6가지이다…

❗️의 조건을 가지고 DP[N][k] 2차원 배열에서, DP[N][1] = 1인 것을 알 수 있다.

✏️의 조건을 가지고 DP[1][k] = K 인 것을 알 수 있다.

위와 같은 점화식을 발견하였고 그에 알맞은 식을 만들었다.

댓글 공유

문제

정수 4를 1, 2, 3의 합으로 나타내는 방법은 총 7가지가 있다. 합을 나타낼 때는 수를 1개 이상 사용해야 한다.

• 1+1+1+1
• 1+1+2
• 1+2+1
• 2+1+1
• 2+2
• 1+3
• 3+1

정수 n이 주어졌을 때, n을 1, 2, 3의 합으로 나타내는 방법의 수를 구하는 프로그램을 작성하시오.

입력

첫째 줄에 테스트 케이스의 개수 T가 주어진다. 각 테스트 케이스는 한 줄로 이루어져 있고, 정수 n이 주어진다. n은 양수이며 1,000,000보다 작거나 같다.

출력

각 테스트 케이스마다, n을 1, 2, 3의 합으로 나타내는 방법의 수를 1,000,000,009로 나눈 나머지를 출력한다.

예제

예제 입력 1

1
2
3
4
5

3
4
7
10

예제 출력 1

1
2
3

7
44
274

내 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const input = require("fs")
  .readFileSync("/dev/stdin")
  .toString()
  .trim()
  .split("\n")
  .map(Number);
const N = input.shift();

const DP = [0, 1, 2, 4];

input.forEach((num) => {
  for (let i = 4; i <= num; i++) {
    DP[i] = (DP[i - 3] + DP[i - 2] + DP[i - 1]) % 1000000009;
  }
  console.log(DP[num]);
});

• 1을 1,2,3으로 만들 수 있는 경우의 수, 2를 1,2,3으로 만들 수 있는 경우의 수, 3을 1,2,3으로 만들 수 있는 경우의 수는 직접 구할 수 있어서 구하였다.
• 4부터는 맨 마지막에 1,2,3이 오는 경우의 수를 나누어서 생각하였다.
  • 맨 마지막에 1이 오는 경우 ⇒ 1+1+1+1, 1+2+1, 2+1+1, 3+1 ⇒ DP[4-1]
  • 맨 마지막에 2가 오는 경우 ⇒ 1+1+2, 2+2 ⇒ DP[4-2]
  • 맨 마지막에 3이 오는 경우 ⇒ 1+3 ⇒ DP[4-3]

하지만 위와 같은 방법으로 하게되면 n이 1,000,000이 주어졌을 때, 반복문은 n-3회 진행하므로 시간초과가 난다. 심지어 테스트 케이스 수가 T개 주어지는 만큼 n-3회 반복해야 하므로 매우 오래걸릴 수도 있게된다.

즉, input 값 중에서 가장 큰 값으로 반복문 한번만 순회한 다음, 완성된 DP 배열에서 해당 값을 찾는 식으로 방법을 바꿨다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

const input = require("fs")
  .readFileSync("/dev/stdin")
  .toString()
  .trim()
  .split("\n")
  .map(Number);
const N = input.shift();

function solution(n, arr) {
  if (n < 4) return arr[n - 1];

  for (let i = 4; i <= n; i++) {
    DP[i] = (DP[i - 3] + DP[i - 2] + DP[i - 1]) % 1000000009;
  }
  return arr;
}

const DP = [0, 1, 2, 4];
solution(Math.max(...input), DP);

input.forEach((num) => {
  console.log(DP[num]);
});

댓글 공유

문제

RGB거리에는 집이 N개 있다. 거리는 선분으로 나타낼 수 있고, 1번 집부터 N번 집이 순서대로 있다.

집은 빨강, 초록, 파랑 중 하나의 색으로 칠해야 한다. 각각의 집을 빨강, 초록, 파랑으로 칠하는 비용이 주어졌을 때, 아래 규칙을 만족하면서 모든 집을 칠하는 비용의 최솟값을 구해보자.

• 1번 집의 색은 2번 집의 색과 같지 않아야 한다.
• N번 집의 색은 N-1번 집의 색과 같지 않아야 한다.
• i(2 ≤ i ≤ N-1)번 집의 색은 i-1번, i+1번 집의 색과 같지 않아야 한다.

입력

첫째 줄에 집의 수 N(2 ≤ N ≤ 1,000)이 주어진다. 둘째 줄부터 N개의 줄에는 각 집을 빨강, 초록, 파랑으로 칠하는 비용이 1번 집부터 한 줄에 하나씩 주어진다. 집을 칠하는 비용은 1,000보다 작거나 같은 자연수이다.

출력

첫째 줄에 모든 집을 칠하는 비용의 최솟값을 출력한다.

예제

예제 입력 1

1
2
3
4
5

3
26 40 83
49 60 57
13 89 99

예제 출력 1

1
2

96

예제 입력 2

1
2
3
4
5

3
1 100 100
100 1 100
100 100 1

예제 출력 2

1
2

3

예제 입력 3

1
2
3
4
5

3
1 100 100
100 100 100
1 100 100

예제 출력 3

1
2

102

예제 입력 4

1
2
3
4
5
6
7
8

6
30 19 5
64 77 64
15 19 97
4 71 57
90 86 84
93 32 91

예제 출력 4

1
2

208

예제 입력 5

1
2
3
4
5
6
7
8
9
10

8
71 39 44
32 83 55
51 37 63
89 29 100
83 58 11
65 13 15
47 25 29
60 66 19

예제 출력 5

1

253

내 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const [N, ...arr] = require("fs")
  .readFileSync("/dev/stdin")
  .toString()
  .trim()
  .split("\n");
const input = arr.map((houseCosts) => houseCosts.split(" ").map(Number));

function solution(n, rgb) {
  const DP = Array.from({ length: n + 1 }, () => new Array(3).fill(0));
  DP[1] = rgb[0];
  for (let i = 2; i <= n; i++) {
    DP[i][0] = Math.min(DP[i - 1][1], DP[i - 1][2]) + rgb[i - 1][0];
    DP[i][1] = Math.min(DP[i - 1][0], DP[i - 1][2]) + rgb[i - 1][1];
    DP[i][2] = Math.min(DP[i - 1][1], DP[i - 1][0]) + rgb[i - 1][2];
  }
  console.log(Math.min(...DP[n]));
}

solution(+N, input);

• 처음에는 1번째 집이 R,G,B를 선택하는 경우의 수를 구하고 이를 이 중 가장 작은 것을 가지고 다음 집을 구한다고 생각했다. 생각은 했는데 이를 코드로 어떻게 짜야할지 생각을 못해서 경우의수를 일일히 적어보고 패턴을 찾아보려고 했다.
• 하지만 못찾아서 다른 사람의 해설을 참고하였다. 문제가 복잡해보이지만 단순하게 생각하면 인접한 집끼리는 같은 색상을 가질 수 없다는 것이 전부이다.

우선, DP 배열을 만들고 해당 DP[i][0]은 i번째 집을 Red로 색칠하는 비용을 저장한다.

• DP[1] = input[0] 이 성립한다.
• 이후 i = 2 부터 반복문을 진행한다.
  1. DP[2]가 R로 색칠될 경우의 비용을 저장한다. ⇒ DP[2]가 R 이기 위해서는 DP[1]에서 G, B로 색칠되어야만 가능하다. 즉 DP[1]에서 G, B를 칠하는 비용 중 최소값을 구하고 이에 input의 2번째 집에 해당하는 비용 중 R을 색칠하는 비용을 더해주면 DP[2][0] 즉, 2번째 집을 R로 칠할 때 최소 비용을 구할 수 있다.
  2. DP[2][1]은 이전 집에서 R, B 중 최소값에다가 input의 2번째 집에 해당하는 비용 중 G을 색칠하는 비용을 더해주면 DP[2][1]의 최솟값을 구할 수 있다.

댓글 공유

문제

어떤 동물원에 가로로 두칸 세로로 N칸인 아래와 같은 우리가 있다.

이 동물원에는 사자들이 살고 있는데 사자들을 우리에 가둘 때, 가로로도 세로로도 붙어 있게 배치할 수는 없다. 이 동물원 조련사는 사자들의 배치 문제 때문에 골머리를 앓고 있다.

동물원 조련사의 머리가 아프지 않도록 우리가 2*N 배열에 사자를 배치하는 경우의 수가 몇 가지인지를 알아내는 프로그램을 작성해 주도록 하자. 사자를 한 마리도 배치하지 않는 경우도 하나의 경우의 수로 친다고 가정한다.

입력

첫째 줄에 우리의 크기 N(1≤N≤100,000)이 주어진다.

출력

첫째 줄에 사자를 배치하는 경우의 수를 9901로 나눈 나머지를 출력하여라.

예제

예제 입력 1

1

4

예제 출력 1

1

41

내 코드

N = 3 까지의 경우의 수를 적고나서 점화식을 생각해보았다. 처음에는 DP[i] = 2*DP[i-1] + (2**(i-1) - 1) 이라고 생각했는데 오답이였다.

다시 점화식을 세웠다.

1

DP[i] = 2 * DP[i - 1] + DP[i - 2];

1
2
3
4
5
6
7
8
9

const input = +require("fs").readFileSync("/dev/stdin").toString().trim();

const DP = [0, 3, 7, 17];

for (let i = 4; i <= input; i++) {
  DP[i] = (2 * DP[i - 1] + DP[i - 2]) % 9901;
}

console.log(DP[input]);

위 처럼 직접 경우의 수를 다 계산할 수 있었지만, DP를 2차원 배열로 설정하고 첫번째 칸에 공백이 오는경우, 좌측에 사자 채우는 경우, 우측에 사자 채우는 경우를 나눠서 구해볼 수 도 있을 것 같다.

댓글 공유

문제

오르막 수는 수의 자리가 오름차순을 이루는 수를 말한다. 이때, 인접한 수가 같아도 오름차순으로 친다.

예를 들어, 2234와 3678, 11119는 오르막 수이지만, 2232, 3676, 91111은 오르막 수가 아니다.

수의 길이 N이 주어졌을 때, 오르막 수의 개수를 구하는 프로그램을 작성하시오. 수는 0으로 시작할 수 있다.

입력

첫째 줄에 N (1 ≤ N ≤ 1,000)이 주어진다.

출력

첫째 줄에 길이가 N인 오르막 수의 개수를 10,007로 나눈 나머지를 출력한다.

예제

예제 입력 1

1

1

예제 출력 1

1

10

예제 입력 2

1

2

예제 출력 2

1

55

예제 입력 3

1

3

예제 출력 3

1

220

내 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const length = +require("fs").readFileSync("/dev/stdin").toString().trim();

function Sum(arr) {
  return arr.reduce((acc, cur) => acc + cur, 0);
}

const DP = Array.from({ length: length + 1 }, (_, i) => {
  if (i === 1) return new Array(10).fill(1);
  if (i === 2) return Array.from({ length: 10 }, (_, i) => 10 - i);
  return Array(10).fill(0);
});

for (let i = 3; i <= length; i++) {
  for (let j = 0; j <= 9; j++) {
    for (let k = j; k <= 9; k++) {
      DP[i][j] += DP[i - 1][k] % 10007;
    }
  }
}

console.log(Sum(DP[length]) % 10007);

• 길이가 i이고, j로 시작하는 수로 오름차순을 만들 수 있는 경우의 수를 DP 배열에 저장하였다.

1
2

// 점화식
DP[i][j] = DP[i-1]의 j~9까지의 합

댓글 공유

문제

상근이의 여동생 상냥이는 문방구에서 스티커 2n개를 구매했다. 스티커는 그림 (a)와 같이 2행 n열로 배치되어 있다. 상냥이는 스티커를 이용해 책상을 꾸미려고 한다.

상냥이가 구매한 스티커의 품질은 매우 좋지 않다. 스티커 한 장을 떼면, 그 스티커와 변을 공유하는 스티커는 모두 찢어져서 사용할 수 없게 된다. 즉, 뗀 스티커의 왼쪽, 오른쪽, 위, 아래에 있는 스티커는 사용할 수 없게 된다.

모든 스티커를 붙일 수 없게된 상냥이는 각 스티커에 점수를 매기고, 점수의 합이 최대가 되게 스티커를 떼어내려고 한다. 먼저, 그림 (b)와 같이 각 스티커에 점수를 매겼다. 상냥이가 뗄 수 있는 스티커의 점수의 최댓값을 구하는 프로그램을 작성하시오. 즉, 2n개의 스티커 중에서 점수의 합이 최대가 되면서 서로 변을 공유 하지 않는 스티커 집합을 구해야 한다.

위의 그림의 경우에 점수가 50, 50, 100, 60인 스티커를 고르면, 점수는 260이 되고 이 것이 최대 점수이다. 가장 높은 점수를 가지는 두 스티커 (100과 70)은 변을 공유하기 때문에, 동시에 뗄 수 없다.

입력

첫째 줄에 테스트 케이스의 개수 T가 주어진다. 각 테스트 케이스의 첫째 줄에는 n (1 ≤ n ≤ 100,000)이 주어진다. 다음 두 줄에는 n개의 정수가 주어지며, 각 정수는 그 위치에 해당하는 스티커의 점수이다. 연속하는 두 정수 사이에는 빈 칸이 하나 있다. 점수는 0보다 크거나 같고, 100보다 작거나 같은 정수이다.

출력

각 테스트 케이스 마다, 2n개의 스티커 중에서 두 변을 공유하지 않는 스티커 점수의 최댓값을 출력한다.

예제

예제 입력 1

1
2
3
4
5
6
7
8

2
5
50 10 100 20 40
30 50 70 10 60
7
10 30 10 50 100 20 40
20 40 30 50 60 20 80

예제 출력 1

1
2

260
290

내 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

const input = require("fs")
  .readFileSync("/dev/stdin")
  .toString()
  .trim()
  .split("\n");
const T = +input.shift();
function sticker(n, arr) {
  let DP = Array.from({ length: 2 }, () => Array(n).fill(0));

  DP[0][1] = arr[0][0];
  DP[1][1] = arr[1][0];
  for (let i = 2; i <= n; i++) {
    DP[0][i] = Math.max(DP[1][i - 1], DP[1][i - 2]) + +arr[0][i - 1];
    DP[1][i] = Math.max(DP[0][i - 1], DP[0][i - 2]) + +arr[1][i - 1];
  }
  return Math.max(...DP.flat(1));
}

let answer = [];
for (let i = 0; i < T; i++) {
  let k = input.splice(0, 1);
  let arr = [];
  arr.push(input.splice(0, 1).join("").split(" ").map(Number));
  arr.push(input.splice(0, 1).join("").split(" ").map(Number));
  answer.push(sticker(k, arr));
}

console.log(answer.join("\n"));

해설

DP 배열은 2차원 배열이고 2n 스티커이기 때문에, DP는 2행으로 구성된다.

1. DP[0][1]은 2n 스티커에서 0번째 행의 1열의 스티커 점수를 나타낸다.
2. DP[1][1]은 2n 스티커에서 1번째 행의 1열 스티커 점수를 나타낸다.

댓글 공유

문제

1
2
3
4
5

    7
   3 8
  8 1 0
 2 7 4 4
4 5 2 6 5

위 그림은 크기가 5인 정수 삼각형의 한 모습이다.

맨 위층 7부터 시작해서 아래에 있는 수 중 하나를 선택하여 아래층으로 내려올 때, 이제까지 선택된 수의 합이 최대가 되는 경로를 구하는 프로그램을 작성하라. 아래층에 있는 수는 현재 층에서 선택된 수의 대각선 왼쪽 또는 대각선 오른쪽에 있는 것 중에서만 선택할 수 있다.

삼각형의 크기는 1 이상 500 이하이다. 삼각형을 이루고 있는 각 수는 모두 정수이며, 범위는 0 이상 9999 이하이다.

입력

첫째 줄에 삼각형의 크기 n(1 ≤ n ≤ 500)이 주어지고, 둘째 줄부터 n+1번째 줄까지 정수 삼각형이 주어진다.

출력

첫째 줄에 합이 최대가 되는 경로에 있는 수의 합을 출력한다.

1
2
3
4
5
6
7
8
9
10

예제 입력 1
5
7
3 8
8 1 0
2 7 4 4
4 5 2 6 5

예제 출력 1
30

풀이

처음에는 탑 다운 방식으로 7을 선택하고 3과 8을 더한 수는 DP[2][0], DP[2][1]에 저장하는 방법으로 진행해보려고 하였다.

그런데 횟수가 많아지고 DP[3][1]에서 DP[2][0]과 DP[2][1] 중 큰 값을 구해서 더해야하는데 만약 3이 아니라 10이라면 1과 10을 제외한 2~9를 반복문을 돌면서 그 중에 최댓값인 것과 더해서 DP 값을 구해야 하기에 이는 너무 복잡하여 다르게 생각해보려고 노력했지만 한 문제에 너무 많은 시간을 쏟는 것 같아 다른 사람의 해설을 참고하였다.

위에서 부터 순서대로 7-3-8-7-5를 선택하여 총합 30이라는 숫자를 출력하였는데, 이는 반대로 생각해볼 수 있다.

맨 아래에서부터 시작하여 4, 5, 2, 6, 5의 바로 위의 숫자에는 4개의 숫자가 있다. 즉, 5번째 줄의 숫자를 2개씩 짝지어서 비교하여 큰 값을 바로 위에 숫자와 더하여 누적하면서 위로 올라가다보면 최종적으로 맨 위에는 최댓값이 남게되는 방식이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const input = require("fs")
  .readFileSync("/dev/stdin")
  .toString()
  .trim()
  .split("\n");
const n = +input.shift();
const triangle = input.map((floor) => floor.split(" ").map(Number));

const solution = (n, triangle) => {
  if (n === 1) return triangle[0][0];
  if (n === 2) return triangle[0][0] + Math.max(...triangle[1]);
  for (let i = n - 2; i >= 0; i--) {
    triangle[i].forEach((v, idx, self) => {
      self[idx] = v + Math.max(triangle[i + 1][idx], triangle[i + 1][idx + 1]);
    });
  }
  return triangle[0][0];
};

console.log(solution(n, triangle));

• DP 배열을 만들지 않고 triangle 배열을 그대로 바꾸어 반환하였다.

참고

• 한걸음씩 블로그

댓글 공유

문제

효주는 포도주 시식회에 갔다. 그 곳에 갔더니, 테이블 위에 다양한 포도주가 들어있는 포도주 잔이 일렬로 놓여 있었다. 효주는 포도주 시식을 하려고 하는데, 여기에는 다음과 같은 두 가지 규칙이 있다.

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

예를 들어 6개의 포도주 잔이 있고, 각각의 잔에 순서대로 6, 10, 13, 9, 8, 1 만큼의 포도주가 들어 있을 때, 첫 번째, 두 번째, 네 번째, 다섯 번째 포도주 잔을 선택하면 총 포도주 양이 33으로 최대로 마실 수 있다.

입력

첫째 줄에 포도주 잔의 개수 n이 주어진다. (1 ≤ n ≤ 10,000) 둘째 줄부터 n+1번째 줄까지 포도주 잔에 들어있는 포도주의 양이 순서대로 주어진다. 포도주의 양은 1,000 이하의 음이 아닌 정수이다.

출력

첫째 줄에 최대로 마실 수 있는 포도주의 양을 출력한다.

1
2
3
4
5
6
7
8
9
10
11

예제 입력 1
6
6
10
13
9
8
1

예제 출력 1
33

내 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

const input = require("fs")
  .readFileSync("/dev/stdin")
  .toString()
  .trim()
  .split("\n")
  .map(Number);
const n = input.shift();

const DP = Array.from({ length: n + 1 }, () => 0);
DP[0] = 0;
DP[1] = input[0];
DP[2] = input[0] + input[1];

for (let i = 3; i <= n; i++) {
  DP[i] = Math.max(
    DP[i - 1],
    DP[i - 2] + input[i - 1],
    DP[i - 3] + input[i - 1] + input[i - 2]
  );
}

console.log(DP[n]);

• DP는 N이 0에서 부터 n까지로 마실 수 있는 최대 포도주 양을 담은 배열이다.
• 만약 포도주가 1개라고 하면 1잔으로 마실 수 있는 포도주 최대 양을 DP[1]이라고 할 수 있고 그 값은 가장 첫번째 배열의 요소이다. (왜냐하면? 해당 배열에는 한개의 요소밖에 없으니깐)
• 만약 포도주가 2개일 때, 2잔으로 마실 수 있는 포도주 최대 양은 DP[2]이고, 그 값은 가장 첫번째 배열과 두번째 배열의 요소의 합이다.

하지만 여기서 DP[3]부터는 고려해줘야하는 부분이 생겨난다.

1번잔, 2번잔, 3번잔이 있을 때, DP[3]으로 올 수 있는 경우의 수는 다음과 같다.

1. 1번과 2번을 마시는 경우 => DP[2]와 같은 의미이다.
2. 1번과 3번을 마시는 경우 => DP[1]+input[2]
3. 2번과 3번을 마시는 경우 => 1번을 제외 하는 것이니 DP[0]+input[1]+input[2]

위를 토대로 점화식을 세울 수 있다.

1
2
3
4
5

DP[i] = Math.max(
  DP[i - 1],
  DP[i - 2] + input[i - 1],
  DP[i - 3] + input[i - 1] + input[i - 2]
);

댓글 공유

useState란?

1

const [state, setState] = useState(initialState);

리액트에서 상태 변수를 컴포넌트에 추가할 때 사용하는 리액트 훅이다.

특징으로는 상태를 변경하기 위해서는 set 함수를 사용하여 변경해야만 하고, set 함수에 새로운 값을 인자로 전달하면 새로운 상태로 렌더링을 일으킨다.

useState로 컴포넌트 Reset 시키기

주로 어떤 상태를 reset 시키기 위해 아래와 같은 코드를 작성할 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function App() {
  const [list, setList] = useState([]);

  const resetList = () => {
    setList([]);
  };
  const addList = () => {
    setList([...list, 10]);
  };

  return (
    <>
      <button onClick={resetList}>Reset Button</button>
      <button onClick={addList}>Add 10</button>
      <div>
        {list.map((num) => (
          <p>{num}</p>
        ))}
      </div>
    </>
  );
}

위와 같이 직접 상태를 초기화 하는 방법도 있지만 key props에게 변경된 상태를 전달함으로써 해당 컴포넌트는 물론 해당 컴포넌트의 하위 컴포넌트까지 reset할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import { useState } from "react";

export default function App() {
  const [version, setVersion] = useState(0);

  function handleReset() {
    setVersion(version + 1);
  }

  return (
    <>
      <button onClick={handleReset}>Reset</button>
      <Form key={version} />
    </>
  );
}

function Form() {
  const [name, setName] = useState("Taylor");

  return (
    <>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>Hello, {name}.</p>
    </>
  );
}

댓글 공유

useEffect란?

1

useEffect(setup, dependencies?)

외부 시스템과 컴포넌트를 동기화 하는데 사용하는 React Hook이다. 즉, 외부 시스템과 동기화하는 작업이 아니라면 useEffect를 사용하지 않는 것이 좋다.

params

setup

Effect 로직 함수로, 선택적으로 cleanup 함수를 반환할 수 있다.

• 컴포넌트가 처음 DOM에 추가 되었을 때, setup 함수가 실행된다.
• 의존성이 변경되어 리렌더링이 발생한 이후, 리액트는 이전 값으로 cleanup 함수 먼저 실행하고 새로운 값으로 setup 함수를 실행한다.
• 컴포넌트가 DOM에서 제거된 후, 리액트는 클린업 함수를 한 번 실행한다.

dependencies?

setup 함수 코드 내부와 관련된 리액트 값들의 리스트이다. 리액트 값들은 컴포넌트 내부에서 선언된 props, state, 변수, 함수들을 의미한다.

• 리액트는 이전 값과 dependencies를 Object.is() 메서드로 비교한다.
• 만약 dependencies를 명확히 기재하지 않는다면, 컴포넌트 리렌더링이 발생할 때마다 Effect가 다시 실행된다.

이전 상태를 기반으로 useEffect로 상태 업데이트 하기

1
2
3
4
5
6
7

// slider.js - 의존성 있는 경우
useEffect(() => {
  const interval = setInterval(() => {
    setIndex(index + 1);
  }, 3000);
  return () => clearInterval(interval);
}, [index]);

위 코드는 slider 프로젝트를 제작하다가 나온 코드이다. setInterval을 Effect 로직에 사용하였는데, 의존성으로 indexrk 있어 index가 변경될 때마다 해당 Effect 로직이 cleanup되고 setup되고를 반복하게 된다.

1
2
3
4
5
6
7

// slieder.js - 의존성 빈 배열인 경우
useEffect(() => {
  const interval = setInterval(() => {
    setIndex((i) => i + 1);
  }, 3000);
  return () => clearInterval(interval);
}, []);

위와 같이 바꿀 경우 코드는 동일하게 동작하지만, 이전 상태를 기반으로 상태를 업데이트할 때에는 이전 값을 직접 넣어주기보단 updater 함수를 콜백함수로 전달해줌으로서 의존성 데이터를 줄일 수 있다.

그 결과, 처음 컴포넌트가 렌더링되고 한번만 실행되기 때문에 불필요한 setup과 cleanup 과정을 줄일 수 있다.

댓글 공유