가치투자자

D3 라이브러리

미주민 — Sat, 19 Aug 2023 17:45:37 +0900

D3.js

1. svg로 가지치기

import React from "react";

const App = () => {
  const width = 400;
  const height = 200;

  const line1 = [{ x: 50, y: 100 }, { x: 150, y: 50 }];
  const line2 = [{ x: 250, y: 100 }, { x: 350, y: 150 }];

  const renderLine = (points) => (
    <line
      x1={points[0].x}
      y1={points[0].y}
      x2={points[1].x}
      y2={points[1].y}
      stroke="black"
    />
  );

  const renderDottedLine = (point) => (
    <line
      x1={point.x}
      y1={point.y + 10}
      x2={point.x}
      y2={height - 10}
      stroke="black"  /* 점선 색깔 */
      strokeDasharray="5,5" /* 점선 길이, 점선 간격 */ 
    />
  );

  return (
    <svg width={width} height={height}>
      {/* 그래프 선 그리기 */}
      {renderLine(line1)}
      {renderLine(line2)}

      {/* 각 꼭지점에서의 점선 (범주 가지치기) */}
      {line1.map(renderDottedLine)}
      {line2.map(renderDottedLine)}
    </svg>
  );
};

export default App;

2. D3.js

1) 기본 문법

d3.select("태그") : 태그 하나 선택
d3.selectAll("태그") : 태그 전체 선택
.attr() : 속성값을 지정하거나 가져온다
.style : css 스타일 프로퍼티를 지정하거나 가겨온다
.data : 데이터를 요소에 가져온다
.append("태그") : 새로운 태그 추가
.enter : 태그가 데이터보다 적을 경우, 데이터 수만큼 태그 생성
.exit : 태드가 데이터보다 많을 경우, 태그 속성 지정을 종료하고 remove로 나머지 태그 제거
remove : 선택된 태그 제거

예시 1) D3로 가지치기

import React, { useEffect, useRef } from "react";
import * as d3 from "d3";

const App = () => {
  const svgRef = useRef(null);

  useEffect(() => {
    const svg = d3.select(svgRef.current);

    const WIDTH = 400;
    const HEIGHT = 200;

    const line1 = [{ x: 50, y: 100 }, { x: 150, y: 50 }];
    const line2 = [{ x: 250, y: 100 }, { x: 350, y: 150 }];

    // 그래프 선 생성함수
    const lineGenerator = d3.line()
      .x(d => d.x)
      .y(d => d.y);

    // 선 추가
    svg
      .append("path")
      .attr("d", lineGenerator(line1))
      .attr("stroke", "black")
      .attr("fill", "none");

    svg
      .append("path")
      .attr("d", lineGenerator(line2))
      .attr("stroke", "black")
      .attr("fill", "none");

    // 점선 추가
    const addDottedLines = (points) => {
      points.forEach(point => {
        svg
          .append("line")
          .attr("x1", point.x)
          .attr("y1", point.y + 10)
          .attr("x2", point.x)
          .attr("y2", HEIGHT - 10)
          .attr("stroke", "black")
          .attr("stroke-dasharray", "5,5");
      });
    };

    addDottedLines(line1);
    addDottedLines(line2);
  }, []);

  return (
    <svg ref={svgRef} width={400} height={200}></svg>
  );
};

export default App;

예시 2-1) D3로 범주 선 그래스 생성

import React, { useEffect, useRef } from "react";
import * as d3 from "d3";

const App = () => {
  const svgRef = useRef(null);

  useEffect(() => {
    const svg = d3.select(svgRef.current);

    const width = 800;
    const height = 400;

    const lines = [
      { 
        points: [{ x: 50, y: 350 }, { x: 150, y: 250 }, { x: 250, y: 150 }, { x: 350, y: 250 }, { x: 450, y: 350 }, { x: 550, y: 250 }, { x: 650, y: 150 }, { x: 750, y: 250 }],
        category: "Category 1"
      },
      {
        points: [{ x: 50, y: 150 }, { x: 150, y: 350 }, { x: 250, y: 250 }, { x: 350, y: 150 }, { x: 450, y: 350 }, { x: 550, y: 150 }, { x: 650, y: 250 }, { x: 750, y: 350 }],
        category: "Category 2"
      }
    ];

    // 그래프 선 생성함수
    const lineGenerator = d3.line()
      .x(d => d.x)
      .y(d => d.y);

    // 그래프 축
    const xScale = d3.scaleLinear().domain([0, width]).range([0, width]);     /* [최소값, 최대값] */
    const yScale = d3.scaleLinear().domain([0, height]).range([height, 0]);   /* 기존 간격(입력범위, domain)을 새로운 간격(출력범위, range)으로 변환 */
    const xAxis = d3.axisBottom(xScale);  /* x축 생성 */
    const yAxis = d3.axisLeft(yScale);    /* y축 생성 */
    svg.append("g").call(xAxis).attr("transform", `translate(0, ${height})`);  /* x축을 아래쪽으로 height만큼 이동 */
    svg.append("g").call(yAxis);  /* call : 축 그리기 */

    // 선 추가
    lines.forEach((line, idx) => {
      svg
        .append("path")
        .attr("d", lineGenerator(line.points))
        .attr("stroke", idx === 0 ? "blue" : "red")
        .attr("fill", "none");

      // x축 끝에 점선 추가
      svg
        .append("line")
        .attr("x1", width)
        .attr("y1", line.points[line.points.length - 1].y)  /* 그래프 선 끝 y축 높이 */
        .attr("x2", width + 30)
        .attr("y2", line.points[line.points.length - 1].y)
        .attr("stroke", idx === 0 ? "blue" : "red")
        .attr("stroke-dasharray", "5,5");

      // 범주명 추가
      svg
        .append("text")
        .attr("x", width + 35)
        .attr("y", line.points[line.points.length - 1].y + 5)
        .attr("fill", idx === 0 ? "blue" : "red")
        .text(line.category);
    });

  }, []);

  return (
    <svg ref={svgRef} width={900} height={400}></svg>
  );
};

export default App;

예시 2-2) 꺾이는 범주의 점선

import React, { useEffect, useRef } from "react";
import * as d3 from "d3";

const lines = [
  {
    points: [{ x: 52, y: 340 }, { x: 145, y: 242 }, { x: 243, y: 158 }, { x: 359, y: 236 }, { x: 456, y: 333 }, { x: 541, y: 227 }, { x: 644, y: 148 }, { x: 731, y: 239 }],
    category: "범주 1",
  },
  {
    points: [{ x: 57, y: 124 }, { x: 149, y: 321 }, { x: 252, y: 213 }, { x: 355, y: 137 }, { x: 444, y: 321 }, { x: 548, y: 129 }, { x: 643, y: 212 }, { x: 742, y: 323 }],
    category: "범주 2",
  },
  {
    points: [{ x: 49, y: 189 }, { x: 143, y: 279 }, { x: 249, y: 198 }, { x: 357, y: 287 }, { x: 442, y: 195 }, { x: 539, y: 278 }, { x: 649, y: 199 }, { x: 737, y: 292 }],
    category: "범주 3",
  },
  {
    points: [{ x: 59, y: 295 }, { x: 141, y: 192 }, { x: 255, y: 295 }, { x: 349, y: 188 }, { x: 457, y: 296 }, { x: 544, y: 182 }, { x: 652, y: 292 }, { x: 739, y: 179 }],
    category: "범주 4",
  },
  {
    points: [{ x: 54, y: 264 }, { x: 146, y: 169 }, { x: 253, y: 266 }, { x: 351, y: 157 }, { x: 456, y: 263 }, { x: 539, y: 154 }, { x: 641, y: 265 }, { x: 746, y: 166 }],
    category: "범주 5",
  },
  {
    points: [{ x: 56, y: 310 }, { x: 147, y: 218 }, { x: 248, y: 308 }, { x: 358, y: 209 }, { x: 453, y: 312 }, { x: 540, y: 210 }, { x: 639, y: 311 }, { x: 734, y: 216 }],
    category: "범주 6",
  },
  {
    points: [ { x: 58, y: 234 }, { x: 142, y: 144 }, { x: 250, y: 234 }, { x: 353, y: 137 }, { x: 454, y: 232 }, { x: 547, y: 136 }, { x: 640, y: 238 }, { x: 748, y: 129 }],
    category: "범주 7",
  },
];

const App = () => {
  const svgRef = useRef(null);

  // 각 범주의 위치를 저장하는 배열
  let categoriesY = [];

  useEffect(() => {
    const svg = d3.select(svgRef.current);

    categoriesY = [];   // 초기화

    const width = 800;
    const height = 400;

    // 그래프 선 생성함수
    const lineGenerator = d3.line()
      .x(d => d.x)
      .y(d => d.y);

    // 그래프 축
    const xScale = d3.scaleLinear().domain([0, width]).range([0, width]);     /* [최소값, 최대값] */
    const yScale = d3.scaleLinear().domain([0, height]).range([height, 0]);   /* 기존 간격(입력범위, domain)을 새로운 간격(출력범위, range)으로 변환 */
    const xAxis = d3.axisBottom(xScale);  /* x축 생성 */
    const yAxis = d3.axisLeft(yScale);    /* y축 생성 */
    svg.append("g").call(xAxis).attr("transform", `translate(0, ${height})`);  /* x축을 아래쪽으로 height만큼 이동 */
    svg.append("g").call(yAxis);  /* call : 축 그리기 */

    // 선 추가
    lines.forEach((line, idx) => {
      let lineEndY = line.points[line.points.length - 1].y;
      let labelY = lineEndY;

      // 범주의 위치가 다른 범주와 겹치는지 확인
      let overlaps = true;
      while (overlaps) {
        overlaps = false;
        for (let y of categoriesY) {
          if (Math.abs(y - labelY) < 20) { // 20은 글자 크기에 따라 조정 가능
            labelY -= 20; // 위로 20만큼 이동
            overlaps = true; // 겹치는 것을 발견하면 overlaps를 true로 설정
            break;
          }
        }
      }
      categoriesY.push(labelY);

      svg.append("path")
         .attr("d", lineGenerator(line.points))
         .attr("stroke", idx % 2 === 0 ? "blue" : "red")
         .attr("fill", "none");

      // x축 끝에 점선 추가
      svg.append("line")
         .attr("x1", width)
         .attr("y1", lineEndY)  /* 그래프 선 끝 y축 높이 */
         .attr("x2", width + (lineEndY !== labelY ? 15 : 30))  // 꺾는 선이 있는 경우에는 좌표를 조정
         .attr("y2", lineEndY)
         .attr("stroke", idx % 2 === 0 ? "blue" : "red")
         .attr("stroke-dasharray", "5,5");

      if (lineEndY !== labelY) {  // 꺾는 선이 필요한 경우
        svg.append("line")
           .attr("x1", width + 15)
           .attr("y1", lineEndY)
           .attr("x2", width + 15)
           .attr("y2", labelY)
           .attr("stroke", idx % 2 === 0 ? "blue" : "red")
           .attr("stroke-dasharray", "5,5");

        svg.append("line")
           .attr("x1", width + 15)
           .attr("y1", labelY)
           .attr("x2", width + 30)
           .attr("y2", labelY)
           .attr("stroke", idx % 2 === 0 ? "blue" : "red")
           .attr("stroke-dasharray", "5,5");
      }

      // 범주명 추가
      svg.append("text")
         .attr("x", width + 35)
         .attr("y", labelY + 5)
         .attr("fill", idx % 2 === 0 ? "blue" : "red")
         .text(line.category);
    });

  }, []);

  return (
    <svg ref={svgRef} width={900} height={400}></svg>
  );
};

export default App;

예시 2-3) 차트 색상 구별 및 차트와 점선 연결

import React, { useEffect, useRef } from "react";
import * as d3 from "d3";

const lines = [
  {
    points: [{ x: 52, y: 340 }, { x: 145, y: 242 }, { x: 243, y: 158 }, { x: 359, y: 236 }, { x: 456, y: 333 }, { x: 541, y: 227 }, { x: 644, y: 148 }, { x: 731, y: 239 }],
    category: "범주 1",
  },
  {
    points: [{ x: 57, y: 124 }, { x: 149, y: 321 }, { x: 252, y: 213 }, { x: 355, y: 137 }, { x: 444, y: 321 }, { x: 548, y: 129 }, { x: 643, y: 212 }, { x: 742, y: 323 }],
    category: "범주 2",
  },
  {
    points: [{ x: 49, y: 189 }, { x: 143, y: 279 }, { x: 249, y: 198 }, { x: 357, y: 287 }, { x: 442, y: 195 }, { x: 539, y: 278 }, { x: 649, y: 199 }, { x: 737, y: 292 }],
    category: "범주 3",
  },
  {
    points: [{ x: 59, y: 295 }, { x: 141, y: 192 }, { x: 255, y: 295 }, { x: 349, y: 188 }, { x: 457, y: 296 }, { x: 544, y: 182 }, { x: 652, y: 292 }, { x: 739, y: 179 }],
    category: "범주 4",
  },
  {
    points: [{ x: 54, y: 264 }, { x: 146, y: 169 }, { x: 253, y: 266 }, { x: 351, y: 157 }, { x: 456, y: 263 }, { x: 539, y: 154 }, { x: 641, y: 265 }, { x: 746, y: 166 }],
    category: "범주 5",
  },
  {
    points: [{ x: 56, y: 310 }, { x: 147, y: 218 }, { x: 248, y: 308 }, { x: 358, y: 209 }, { x: 453, y: 312 }, { x: 540, y: 210 }, { x: 639, y: 311 }, { x: 734, y: 216 }],
    category: "범주 6",
  },
  {
    points: [ { x: 58, y: 234 }, { x: 142, y: 144 }, { x: 250, y: 234 }, { x: 353, y: 137 }, { x: 454, y: 232 }, { x: 547, y: 136 }, { x: 640, y: 238 }, { x: 748, y: 129 }],
    category: "범주 7",
  },
];

const App = () => {
  const svgRef = useRef(null);  // React ref를 사용하여 SVG 엘리먼트를 참조합니다.

  // 각 범주의 Y 위치를 저장하는 배열
  let categoriesY = [];

  useEffect(() => {
    const svg = d3.select(svgRef.current);  // D3로 SVG 엘리먼트를 선택합니다.

    categoriesY = [];   // 범주의 Y 위치 배열을 초기화

    const width = 800;
    const height = 400;

    // 그래프 선 생성함수
    const lineGenerator = d3.line()
      .x(d => d.x)
      .y(d => d.y);

    // 그래프 축
    const xScale = d3.scaleLinear().domain([0, width]).range([0, width]);     /* [최소값, 최대값] */
    const yScale = d3.scaleLinear().domain([0, height]).range([height, 0]);   /* 기존 간격(입력범위, domain)을 새로운 간격(출력범위, range)으로 변환 */
    const xAxis = d3.axisBottom(xScale);  /* x축 생성 */
    const yAxis = d3.axisLeft(yScale);    /* y축 생성 */
    svg.append("g").call(xAxis).attr("transform", `translate(0, ${height})`);  /* x축을 아래쪽으로 height만큼 이동 */
    svg.append("g").call(yAxis);  /* call : 축 그리기 */

    // 색상 스케일을 정의
    const colorScale = d3.scaleOrdinal(d3.schemeCategory10); // D3의 기본 10가지 카테고리 컬러를 사용

    // 선 추가 : 각 선 데이터를 순회하면서 그래프 생성
    lines.forEach((line, idx) => {
      const lineColor = colorScale(idx); // idx를 기반으로 색상을 지정
      let lineEndX = line.points[line.points.length - 1].x;  /* 마지막 x 좌표 */
      let lineEndY = line.points[line.points.length - 1].y;  /* 마지막 y 좌표 */
      let labelY = lineEndY;

      // 범주의 위치가 다른 범주와 겹치는지 확인
      let overlaps = true;
      while (overlaps) {
        overlaps = false;
        for (let y of categoriesY) {
          if (Math.abs(y - labelY) < 20) { // 20은 글자 크기에 따라 조정 가능
            labelY -= 20; // 위로 20만큼 이동
            overlaps = true; // 겹치는 것을 발견하면 overlaps를 true로 설정
            break;
          }
        }
      }
      categoriesY.push(labelY);  // 조정된 Y 위치를 배열에 추가

      // 선 추가
      svg.append("path")
         .attr("d", lineGenerator(line.points))
         .attr("stroke", lineColor)
         .attr("fill", "none");

      // x축 끝에 점선 추가
      svg.append("line")
         .attr("x1", lineEndX)
         .attr("y1", lineEndY)  /* 그래프 선 끝 y축 높이 */
         .attr("x2", lineEndY !== labelY ? width + 15 : width + 27)  // 꺾는 선이 있는 경우에는 좌표를 조정
         .attr("y2", lineEndY)
         .attr("stroke", lineColor)
         .attr("stroke-dasharray", "5,5");

      // 꺾는 선이 필요한 경우
      if (lineEndY !== labelY) {
        svg
          .append("line")
          .attr("x1", width + 15)
          .attr("y1", lineEndY)
          .attr("x2", width + 15)
          .attr("y2", labelY)
          .attr("stroke", lineColor)
          .attr("stroke-dasharray", "5,5");

        svg.append("line")
           .attr("x1", width + 15)
           .attr("y1", labelY)
           .attr("x2", width + 30)
           .attr("y2", labelY)
           .attr("stroke", lineColor)
           .attr("stroke-dasharray", "5,5");
      }

      // 범주명 추가
      svg.append("text")
         .attr("x", width + 35)
         .attr("y", labelY + 5)
         .attr("fill", lineColor)
         .text(line.category);
    });

  }, []);

  return (
    <svg ref={svgRef} width={900} height={400}></svg>
  );
};

export default App;

예시 2-4) 툴팁 기능 추가

import React, { useEffect, useRef } from "react";
import * as d3 from "d3";

const lines = [
  {
    points: [{ x: 52, y: 340 }, { x: 145, y: 242 }, { x: 243, y: 158 }, { x: 359, y: 236 }, { x: 456, y: 333 }, { x: 541, y: 227 }, { x: 644, y: 148 }, { x: 731, y: 239 }],
    category: "범주 1",
  },
  {
    points: [{ x: 57, y: 124 }, { x: 149, y: 321 }, { x: 252, y: 213 }, { x: 355, y: 137 }, { x: 444, y: 321 }, { x: 548, y: 129 }, { x: 643, y: 212 }, { x: 742, y: 323 }],
    category: "범주 2",
  },
  {
    points: [{ x: 49, y: 189 }, { x: 143, y: 279 }, { x: 249, y: 198 }, { x: 357, y: 287 }, { x: 442, y: 195 }, { x: 539, y: 278 }, { x: 649, y: 199 }, { x: 737, y: 292 }],
    category: "범주 3",
  },
  {
    points: [{ x: 59, y: 295 }, { x: 141, y: 192 }, { x: 255, y: 295 }, { x: 349, y: 188 }, { x: 457, y: 296 }, { x: 544, y: 182 }, { x: 652, y: 292 }, { x: 739, y: 179 }],
    category: "범주 4",
  },
  {
    points: [{ x: 54, y: 264 }, { x: 146, y: 169 }, { x: 253, y: 266 }, { x: 351, y: 157 }, { x: 456, y: 263 }, { x: 539, y: 154 }, { x: 641, y: 265 }, { x: 746, y: 166 }],
    category: "범주 5",
  },
  {
    points: [{ x: 56, y: 310 }, { x: 147, y: 218 }, { x: 248, y: 308 }, { x: 358, y: 209 }, { x: 453, y: 312 }, { x: 540, y: 210 }, { x: 639, y: 311 }, { x: 734, y: 216 }],
    category: "범주 6",
  },
  {
    points: [ { x: 58, y: 234 }, { x: 142, y: 144 }, { x: 250, y: 234 }, { x: 353, y: 137 }, { x: 454, y: 232 }, { x: 547, y: 136 }, { x: 640, y: 238 }, { x: 748, y: 129 }],
    category: "범주 7",
  },
];

const App = () => {
  const svgRef = useRef(null);  // React ref를 사용하여 SVG 엘리먼트를 참조합니다.
  const tooltipRef = useRef(null);  // 툴팁을 위한 ref
  let categoriesY = [];  // 각 범주의 Y 위치를 저장하는 배열

  useEffect(() => {
    const svg = d3.select(svgRef.current);  // D3로 SVG 엘리먼트를 선택합니다.
    const tooltip = d3.select(tooltipRef.current);

    categoriesY = [];  // 범주의 Y 위치 배열을 초기화

    const width = 800;
    const height = 400;

    // 그래프 선 생성함수
    const lineGenerator = d3.line()
      .x(d => d.x)
      .y(d => d.y);

    // 그래프 축
    const xScale = d3.scaleLinear().domain([0, width]).range([0, width]);    /* [최소값, 최대값] */
    const yScale = d3.scaleLinear().domain([0, height]).range([height, 0]);  /* 기존 간격(입력범위, domain)을 새로운 간격(출력범위, range)으로 변환 */
    const xAxis = d3.axisBottom(xScale);  /* x축 생성 */
    const yAxis = d3.axisLeft(yScale);    /* y축 생성 */
    svg.append("g").call(xAxis).attr("transform", `translate(0, ${height})`);  /* x축을 아래쪽으로 height만큼 이동 */
    svg.append("g").call(yAxis);  /* call : 축 그리기 */

    // 색상 스케일을 정의
    const colorScale = d3.scaleOrdinal(d3.schemeCategory10);  // D3의 기본 10가지 카테고리 컬러를 사용

    // 선 추가 : 각 선 데이터를 순회하면서 그래프 생성
    lines.forEach((line, idx) => {
      const lineColor = colorScale(idx);  // idx를 기반으로 색상을 지정
      let lineEndX = line.points[line.points.length - 1].x;  /* 마지막 x 좌표 */
      let lineEndY = line.points[line.points.length - 1].y;  /* 마지막 y 좌표 */
      let labelY = lineEndY;

      // 범주의 위치가 다른 범주와 겹치는지 확인
      let overlaps = true;
      while (overlaps) {
        overlaps = false;
        for (let y of categoriesY) {
          if (Math.abs(y - labelY) < 20) {  // 20은 글자 크기에 따라 조정 가능
            labelY -= 20;     // 위로 20만큼 이동
            overlaps = true;  // 겹치는 것을 발견하면 overlaps를 true로 설정
            break;
          }
        }
      }
      categoriesY.push(labelY);  // 조정된 Y 위치를 배열에 추가

      // x축 끝에 점선 추가
      svg
        .append("line")
        .attr("x1", lineEndX)
        .attr("y1", lineEndY)  /* 그래프 선 끝 y축 높이 */
        .attr("x2", lineEndY !== labelY ? width + 15 : width + 27)  // 꺾는 선이 있는 경우에는 좌표를 조정
        .attr("y2", lineEndY)
        .attr("stroke", lineColor)
        .attr("stroke-dasharray", "5,5");
      
      // 꺾는 선이 필요한 경우
      if (lineEndY !== labelY) {
        svg
          .append("line")
          .attr("x1", width + 15)
          .attr("y1", lineEndY)
          .attr("x2", width + 15)
          .attr("y2", labelY)
          .attr("stroke", lineColor)
          .attr("stroke-dasharray", "5,5");
        
        svg
          .append("line")
          .attr("x1", width + 15)
          .attr("y1", labelY)
          .attr("x2", width + 30)
          .attr("y2", labelY)
          .attr("stroke", lineColor)
          .attr("stroke-dasharray", "5,5");
      }
      
      // 범주명 추가
      svg
        .append("text")
        .attr("x", width + 35)
        .attr("y", labelY + 5)
        .attr("fill", lineColor)
        .text(line.category);

      // 선 추가
      const path = svg
        .append("path")
        .attr("d", lineGenerator(line.points))
        .attr("stroke", lineColor)
        .attr("fill", "none");
      
      // 툴팁 이벤트 추가
      path
        .on("mouseover", (event, d) => {
          tooltip
            .style("left", `${event.pageX + 10}px`)
            .style("top", `${event.pageY - 10}px`)
            .style("display", "inline-block")
            .html(`${line.category}`);
        })
        .on("mouseout", () => {
          tooltip.style("display", "none");
        });
    });
  }, []);
  
  return (
    <>
      <svg ref={svgRef} width={900} height={400}></svg>
      <div
        ref={tooltipRef}
        style={{
          position: "absolute",
          display: "none",
          background: "#f9f9f9",
          border: "1px solid #ccc",
          padding: "10px",
          borderRadius: "10px",
          pointerEvents: "none"
        }}
      ></div>
    </>
  );
};

export default App;

[프로그래머스] 주차 요금 계산

미주민 — Thu, 13 Jul 2023 06:01:33 +0900

Programmers : 주차 요금 계산

문제 링크

https://school.programmers.co.kr/learn/courses/30/lessons/92341

프로그래머스

코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.

programmers.co.kr

</> 이 글은 코딩테스트 대비와 알고리즘 공부를 위해 문제를 풀고 학습한 내용을 기록한 것입니다. 틀린 부분이나 추가해야 할 부분이 있다면 언제든 댓글로 남겨주세요❗️

문제

이 문제는 객체 를 활용해 차량번호와 시간, 차량번호와 요금을 연결지으면 되는 구현 문제이다.

고려해줘야 할 것이 많지만, 객체에 대해 이해하고 있다면 충분히 풀 수 있는 문제였다.

주차장의 입/출차 내역과 요금표가 주어졌을 때, 차량별 주차 요금을 계산하려고 한다.
요금 (정수 배열 fees)

- [기본 시간, 기본 요금, 단위 시간, 단위 요금]

- 기본 시간 이하일 때, 기본 요금이 청구된다

- 기본 시간 초과분에 대해서는 단위 시간마다 단위 요금이 청구된다

- 단위 시간으로 나누어 떨어지지 않으면 올림한다
입/출차 내역 (문자열 배열 records)

- "시각 차량번호 내역"

- 입차 후 출차된 내역이 없다면, 23:59에 출차된 것으로 간주한다

- 차량번호는 숫자 4개 번호

- 내역은 IN 또는 OUT
차량 번호가 작은 순으로 주차 요금을 정수 배열에 담아 출력해주면 된다.

입출력 예시

2번째 예시를 정리하면 다음과 같다.

차량 3961 = 16시 입차 - 18시 출차, 23시 58분 입차 / 차량 0202 = 16시 입차 - 18시 출차

차량 0202는 120분, 차량 3961은 121분 주차했으므로, 0202는 기본 요금으로 0원이고 3961은 1분 더 주차했으므로 올림해서 총 요금은 591원이다.

3번째 예시에서 차량 1234는 0시 0분에 들어왔지만, 나간 시각이 없기에 23시 59분에 나간 것으로 간주되어 요금은 (1439분 - 1분) / 1분 * 10원 = 14841원이다.

풀이1 : 객체

요금표를 baseT(기본 시간), baseF(기본 요금), unitT(단위 시간), unitF(단위 요금)으로 구조분해할당 해준다.
records를 clock(시각), num(차량 번호), record(내역)으로 할당해준다.

- 시각(clock)도 분해하여 분(min) 단위로 변환해준다(time)
입/출차 내역

- 차량이 들어왔으면, carIn에 num과 time을 쌍으로 넣어준다

- 차량이 나왔을 때, 이전에 누적된 시간이 carOut에 있다면 거기에다가 더해준다

- 차량이 나왔을 때, 이전에 누적된 시간이 없다면 주차한 시간을 carOut에 넣어주고, carIn에서는 제거해준다
주차는 했지만 출차하지 않은 차량

- 23시 59분에 출차한 것으로 간주해 주차 시간을 carOut에 추가해준다
[차량번호, 주차 시간] 형식으로 이차원 배열로 바꾼 뒤, 차량 번호를 기준으로 오름차순으로 정렬해준다.
요금 계산

- 기본 시간보다 짧게 주차했으면 기본 요금을, 그것보다 길게 주차했으면 초과분을 계산해 주차 요금을 정산해준다

- 기본 시간으로 나눴을 때, 나머지는 올림해준다

function solution(fees, records) {
    const answer = [];
    const carIn = {};
    let carOut = {};
    const [baseT, baseF, unitT, unitF] = fees;
    
    // 시간 계산
    records.map((item) => {
        const [clock, num, record] = item.split(' ');
        const [hour, min] = clock.split(':');
        const time = parseInt(hour) * 60 + parseInt(min);
        
        if (record === 'IN') {
            carIn[num] = time;
        } else {
            carOut.hasOwnProperty(num)
                ? carOut[num] = carOut[num] + time - carIn[num]
                : carOut[num] = time - carIn[num];
            delete carIn[num];
        }
    });
    // 오늘 출차하지 않은 차량
    for (const [num, time] of Object.entries(carIn)) {
        carOut.hasOwnProperty(num)
            ? carOut[num] = carOut[num] + 1439 - time
            : carOut[num] = 1439 - time;
        delete carIn[num];
    }
    // 차량번호 오름차순 정렬
    carOut = Object.entries(carOut).sort((a,b) => a[0] - b[0]);
    
    // 요금 계산
    carOut.map((item) => {
        const time = item[1];
        answer.push(
            time <= baseT
                ? baseF
                : baseF + Math.ceil((time - baseT) / unitT) * unitF
        );
    })
    return answer;
}

실행 결과와 채점 결과는 다음과 같다.

[프로그래머스] 오픈채팅방

미주민 — Thu, 13 Jul 2023 01:07:57 +0900

Programmers : 오픈채팅방

문제 링크

https://school.programmers.co.kr/learn/courses/30/lessons/42888

프로그래머스

programmers.co.kr

문제

유저 아이디와 닉네임이 서로 한 쌍이고, 유저 아이디를 활용해 닉네임을 변경할 수 있다는 것만 파악하면 쉽게 풀 수 있는 문제였다.

오픈채팅방에서 닉네임을 바꾸는 방법은 2가지다. 닉네임을 변경하면 기존 메시지의 닉네임도 변경된다.

- 채팅방을 나간 후, 새로운 닉네임으로 다시 들어온다

- 채팅방에서 닉네임을 변경한다
중복된 닉네임을 사용할 수 있다.

- 그렇기에 모든 유저는 [유저 아이디]로 구분한다
입장, 퇴장, 변경에 대한 기록 record 메시지는 다음과 같이 주어진다.

- 입장 : "Enter [유저 아이디] [닉네임]"

- 퇴장 : "Leave [유저 아이디]"

- 변경 : "Change [유저 아이디] [닉네임]"
입장, 퇴장시 다음과 같은 메시지가 출력되며, 최종적으로 보게 될 메시지를 배열 형태로 출력해주면 된다.

- 입장 : "[닉네임]님이 들어왔습니다."

- 퇴장 : "[닉네임]님이 나갔습니다."

입출력 예시

처음에는 Muzi(uid1234)가 들어왔고, 그 다음으로 Prodo(uid4567)가 들어왔다.

그리고 Muzi(uid1234)가 퇴장하고, Prodo라는 닉네임으로 바꿔서 uid1234가 들어왔다.

마지막으로, uid4567이 닉네임을 Ryan으로 변경했다.

최종적으로, uid1234의 닉네임은 Prodo이고, uid4567의 닉네임은 Ryan이다.
이전 입장/퇴장 메시지의 닉네임을 최종 닉네임으로 바꿔주면 된다.

풀이1 : 객체

유저의 닉네임을 변경하기 위해 객체를 활용했다.

유저 아이디를 객체의 key값으로, 닉네임을 value값으로 설정했다.

유저 정보를 받아와 명령어(command), 유저 아이디(uid), 닉네임(nickname)으로 구조분해할당을 해준다.
명령어

1) 입장(Enter) : 유저정보(userInfo)에 uid와 nickname을 key와 value로 넣어준다

- 입장 메시지 "uid님이 들어왔습니다"를 배열 ans에 넣어준다

2) 변경(Change) : 해당 uid의 value값을 새로운 닉네임으로 바꿔준다

3) 퇴장(Leave) : "uid님이 나갔습니다"를 배열 ans에 넣어준다
현재까지는 아이디로 입장/퇴장 메시지가 저장된 상태이다.

- 각 유저 아이디를 최종 닉네임으로 변경해주고, 최종 메세지 배열을 출력해준다

function solution(record) {
    const userInfo = {};
    const ans = [];
    
    // 유저 정보
    record.map((item) => {
        const [command, uid, nickname] = item.split(' ');
        
        if (command === 'Enter') {
            userInfo[uid] = nickname;
            ans.push(`${uid}님이 들어왔습니다.`);
        } else if (command === 'Change') {
            userInfo[uid] = nickname;
        } else if (command === 'Leave') {
            ans.push(`${uid}님이 나갔습니다.`);
        }
    });
    // 입장, 퇴장 기록
    for (let i=0; i < ans.length; i++) {
        let uid = ans[i].split('님')[0];
        ans[i] = ans[i].replace(uid, userInfo[uid]);
    }
    return ans;
}

실행 결과와 채점 결과는 다음과 같다.

[프로그래머스] n진수 게임

미주민 — Wed, 12 Jul 2023 17:34:59 +0900

Programmers : n진수 게임

문제 링크

https://school.programmers.co.kr/learn/courses/30/lessons/17687

프로그래머스

programmers.co.kr

문제

처음 문제를 읽었을 때, "미리 구할 숫자의 개수 t"가 무엇을 의미하는지 이해하기 어려웠다.

출력 형식의 설명을 보면, m명이 돌아가면서 각자 1개씩 숫자를 말하는데, 튜브가 말해야 하는 총 숫자 개수가 t를 의미한다.

이 문제는 진법 변환 과 반복문 에 대해 이해하고 있다면 충분히 풀 수 있는 문제였다.

문제 설명

m명이 0부터 숫자를 하나씩 말하는 게임을 하고 있다.

- 두 자리 이상의 숫자는 하나씩 끊어서 말한다

- 예를 들어, 10은 11번째 사람이 1을 말하고, 12번째 사람이 0을 말한다
숫자는 2진법에서 16진법까지 n진법으로 주어진다.

- 11~16진법에서 10~15는 알파벳으로 출력되는데, 대문자 알파벳으로 출력해준다
m명 중 튜브의 순서는 p번째이며, 튜브는 총 t개의 숫자를 말해야 한다.

- 튜브가 말해야 하는 숫자들을 하나의 문자열로 출력해야 한다

입출력 예시

첫 번째 예시를 살펴보면, 총 2명이서 2진법의 숫자에서 숫자 하나씩 말한다. 이때 튜브의 순서는 1번째이며, 튜브가 총 4개의 숫자를 말해야 하므로, 2명이서 4번 말하면 8개 이상의 숫자가 주어져야 한다.

0, 1, 10, 11, 100까지 말하면 8개 이상의 숫자가 충족된다. 숫자 하나씩 말하므로 0, 1, 1, 0, 1, 1, 1, 0, 0 순으로 말하게 된다. 여기서 튜브가 언급하는 4개의 숫자는 0, 1, 1, 1이므로, "0111"을 출력해줘야 한다.

풀이1

n진법 n, 튜브가 말해야 하는 숫자 개수 t, 총 인원 m, 튜브의 순서 p가 주어진다.
튜브가 t번 숫자를 언급해야 하므로, m명이 t번 언급해줘야 한다.

- 따라서 숫자 게임에서 말해야 할 수들 num의 길이는 m x t보다 작아야 한다

- 11진법 이상에서 10~15에 해당하는 수들은 알파벳으로 나오므로, 대문자로 바꾸어준다
num를 배열로 바꾸고, p번째 말하는 수를 찾아준다.

- m명 중 p번째로 말하므로, 인덱스를 m으로 나눴을 때 나머지가 p인 경우가 튜브의 차례이다

- 다만, 인덱스는 0번째부터 시작하므로 p-1로 해준다
총 t개의 숫자만 찾아줘야 하므로, ans의 길이가 t보다 작은 경우에만 그 수를 ans에 더해준다.

function solution(n, t, m, p) {
    let num = '';
    let ans = '';

    for (let i = 0; num.length < m * t; i++) {
        num += i.toString(n).toUpperCase();
    }
    num.split('').map((item, idx) => {
        if (idx % m  === (p-1)) {
            if (ans.length < t) {
                ans += item;
            }
        }
    });
    return ans;
}

실행 결과와 채점 결과는 다음과 같다.

[React/기술면접] Hook (2)

미주민 — Mon, 10 Jul 2023 05:07:58 +0900

React Hooks

이제 더 다양한 Hook에 대해 살펴볼 것이다.

아직 Hook에 대해 익숙하지 않다면 아래 글을 먼저 읽고 오길 바란다.

https://valueengine.tistory.com/76

[React/기술면접] Hook (1)

React Hooks * 기술면접 질문은 맨 아래에 적혀 있습니다 1. Hook의 등장 배경 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 클래스형 컴포넌트에서는 constructor(생성자)에서 state를 정

valueengine.tistory.com

4. useReducer

useReducer는 여러 개의 하위 값을 포함하는 복잡한 state를 다뤄야 할 때 useState 대신 사용하는 Hook이다.

여기서 알아둬야 할 개념에는 Reducer, Dispatch, Action이 있다. 만약 은행의 거래 내역이 state일 때, 출금(action)을 은행(reducer)에 요구(dispatch)하면 은행은 거래 내역 state를 업데이트 해준다.

4-1. useReducer의 구성

이것을 컴포넌트의 관점에서 정리하면 다음과 같다.

1) useReducer 함수

useReducer 함수는 reducer 함수가 반환한 값으로 state를 갱신하는 역할을 한다.

dispatch : 컴포넌트 내에서 state의 업데이트를 발생시키기 위한 함수
reducer : 컴포넌트 외부에서 state를 업데이트하는 로직을 담당하는 함수
initialState : 초기 state
init : 초기 함수

import React, { useReducer } from 'react';

const [state, dispatch 함수] = useReducer(reducer 함수, initialState, init)

2) action

action은 업데이트를 위한 정보를 가지고 있는 것을 말한다.

dispatch의 인자가 되며, reducer 함수의 두 번째 인자에 할당된다.

action의 형태는 따로 정해져 있지 않으나, 아래의 코드처럼 주로 type이라는 값을 지닌 객체 형태로 사용된다.

dispatch({ type: "document" })

3) dispatch 함수

dispatch 함수는 reducer 함수를 실행시킨다. 이때 dispatch의 인자인 action이 reducer 함수의 두 번째 인자에 할당되며, 컴포넌트 내에서 state의 업데이트를 발생시키기 위해 사용된다.

function Counter() {
  const [number, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <>
      {/* 현재 카운트 값은 state인 number 객체의 count로부터 읽어옴 */}
      <h1>Count: {number.count}</h1>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}

4) reducer 함수

reducer 함수는 컴포넌트 외부에서 state를 업데이트 하는 로직을 담당한다.

reducer 함수는 현재의 state와 action을 인자로 받으며, action의 값에 근거하여 기존의 state를 대체할 새로운 state를 반환해준다. 여기서 핵심은 기존의 state를 새로운 state로 대체(replace)한다는 것이다.

function reducer(state, action) {
  switch (action.type) {
    // action의 type이 "decrement"일 때, 현재 state에서 1을 뺀 값을 반환함
    case "decrement":
      return state - 1;
    // action의 type이 "increment"일 때, 현재 state에서 1을 더한 값을 반환함
    case "increment":
      return state + 1;
    // 정의되지 않은 action type이 넘어왔을 때는 에러를 발생시킴
    default:
      throw new Error("Unsupported action type:", action.type);
  }
}

4-2. useReducer의 장점

useReducer는 한 컴포넌트 내에서 "state를 업데이트 하는 로직"을 그 컴포넌트로부터 분리시키는 것을 가능하게 해준다.

useState를 사용하면 아래처럼 컴포넌트 내부에서 state를 업데이트 해준다.

그러나 useReducer는 state를 업데이트 하는 로직을 외부로 분리시키는 것이 가능하기에, 이 로직을 별도의 파일에서 작성해 가져오는 것도 가능하다. 이로 인해 컴포넌트의 최적화를 이룰 수 있다.

5. useMemo

useMemo는 컴포넌트의 성능을 최적화하는 Hooks 중 하나로, 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

여기서 Memo는 메모이제이션(Memoization)의 줄임말로, 기존에 수행하던 연산의 결과값을 메모리에 저장해서 필요할 때마다 동일한 값을 재활용하는 프로그래밍 기법을 말한다. 즉, 동일한 입력값이 들어올 때마다 중복 연산을 하지 않아 성능을 최적화할 수 있다.

useMemo는 첫 번째 인자로 콜백 함수를 받으며, 이때 콜백 함수는 메모이제이션 해야 할 값을 리턴해주는 함수다.

두 번째 인자로 의존성 배열(dependency array)을 받으며, 배열의 요소 값이 업데이트 될 때만 콜백 함수를 호출해 memoization 된 값을 업데이트해서 다시 memoization 해준다. 만약 빈 배열을 넘겨주면 맨 처음 컴포넌트가 마운트되었을 때만 값을 계산하고, 이후에는 항상 메모이제이션 된 값을 꺼내와서 사용한다.

import React, { useMemo } from 'react';

const value = useMemo(() => {
  return calculate();
}, [item]);

이렇게 좋아보이는 useMemo 역시 무분별하게 사용해서는 안 된다.

useMemo는 값을 재활용하기 위해 따로 메모리를 소비해서 저장해둔다. 따라서 불필요한 값까지 모두 memoization 해버리면 오히려 성능이 악화될 수 있기 때문에 꼭 필요할 때만 적절히 사용해야 한다.

6. useCallback

useCallback는 함수를 메모이제이션 하기 위해 사용되는 Hook이다.

첫 번째 인자로 메모이제이션 할 함수를 받으며, 두 번째 인자로 의존성 배열을 받는다. 이 배열 내에는 어떤 값이 바뀌었을 때 함수를 새로 생성해줘야 하는지 명시해줘야 한다. 만약 빈 배열을 넣어주면 컴포넌트가 렌더링될 때 만들어진 함수를 계속해서 재사용하게 된다.

import React, { useCallback } from 'react';

const memoizedCallback = useCallback(함수, 배열);

7. useRef

useRef는 저장공간(변수 관리), DOM 요소에 접근을 위해 사용되는 Hook이다.

1) 저장공간

대표적인 저장공간인 State는 State가 변경될 때마다 리렌더링되면서 컴포넌트 내부 변수들이 모두 초기화된다. 그러나 Ref 내의 값은 아무리 바뀌어도 컴포넌트가 리렌더링되지 않는다. 즉, Ref를 사용하면 불필요한 렌더링을 막을 수 있으며, 컴포넌트가 아무리 렌더링되더라도 Ref 안에 저장된 값은 그대로 유지된다. 그래서 렌더링을 원치 않는 값을 다룰 때 유용하다.

State의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화
Ref의 변화 -> No 렌더링 -> 변수들의 값이 유지됨
State의 변화 -> 렌더링 -> 그래도 Ref의 값은 유지됨

2) DOM 요소에 접근

ref를 통해 DOM 요소에 직접 접근하는 것이 가능하다.

예를 들어, 클릭을 하지 않아도 로그인 input 창이 포커스되어 있어서 바로 id를 입력할 수 있도록 해주는 것이다.

함수 컴포넌트에서 useRef를 부르면 ref object를 반환해준다. ref object는 { current: 초기값 }으로 이루어져 있다.

import React, { useRef } from 'react';

const ref = useRef(초기값);

ref에 대해 더 자세한 설명은 아래 링크를 참조하길 바란다.

https://valueengine.tistory.com/71

[React/기술면접] ref란?

ref란? * 기술면접 질문은 맨 아래에 적혀 있습니다 일반적으로 DOM 요소에 이름을 달 때 id를 사용한다. 리액트의 public/index.html 파일에서도 div 요소의 id로 root를 설정해 리액트 컴포넌트를 렌더링

valueengine.tistory.com

</> 끊임없이 성장하기 위해 공부한 내용을 글로 작성하고 있습니다. 틀린 부분이나 추가해야 할 부분이 있다면 언제든 댓글로 남겨주세요❗️

References

[React/기술면접] Hook (1)

미주민 — Sun, 9 Jul 2023 21:02:25 +0900

React Hooks

* 기술면접 질문은 맨 아래에 적혀 있습니다

1. Hook의 등장 배경

컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다.

클래스형 컴포넌트에서는 constructor(생성자)에서 state를 정의하고 setState() 함수를 통해 state를 업데이트 해줄 수 있다. 거기다가 생명주기 함수들까지 명확하게 정의되어 있기 때문에 편리하게 가져다 쓰면 된다.

반면, 함수형 컴포넌트에서는 별도로 state를 정의하거나 생명주기에 따른 기능 구현이 불가능했다.

함수가 state를 가지지 못하는 이유는 리렌더링될 때 함수 내에 작성된 모든 코드들이 다시 실행되기 때문이다. 이로 인해 기존에 가지고 있던 state를 전혀 관리(기억)할 수 없기에 함수형 컴포넌트에서는 state를 사용할 수 없었다.

그러나 클래스형 컴포넌트 역시 다음과 같은 단점을 가지고 있었다.

함수형 컴포넌트에 비해 코드가 복잡하고, 재사용성도 떨어진다.
상태 관리 및 생명주기 함수를 사용하기 위한 추가적인 학습이 필요하다.
this가 가리키는 값이 변경되면 문제를 발생시킬 수 있다.

ex> A를 팔로우하려고 했으나 팔로우 되기 이전 B 유저로 바꾸면서 컴포넌트가 리런데링되고, this가 가리키는 값이 B로 변경되어 B가 팔로우됨

이러한 점들 때문에 함수형 컴포넌트에서 부족했던 기능인 state와 생명주기 기능을 가능을 할 수 있게 해주는 것이 hook이다.

2. Hook이란?

Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 "연동(hook into)"할 수 있게 해주는 함수로, 리액트 16.8 버전부터 추가 되었다. 이름 그대로 React state와 생명주기 기능을 갈고리처럼 걸어 원하는 시점에 정해진 함수가 실행될 수 있도록 해준다.

Hook을 사용한 함수형 컴포넌트가 state를 가질 수 있는 이유는 Closure를 이용해 함수형 컴포넌트 바깥에 state를 저장하기 때문이다. 그래서 state가 업데이트 되어도 컴포넌트 바깥에 선언되어 있는 변수들이기 때문에 업데이트 한 이후에도 이 변수들에 접근할 수 있다.

2-1. Hook의 규칙

Hook을 사용하기 위해선 다음과 같은 규칙을 지켜야 한다.

함수(컴포넌트)의 최상위에서만 Hook을 호출

- 그래야 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다
React 함수 내에서만 Hook을 호출

- 일반적인 JavaScript 함수에서는 호출 X

- Custom Hook에서는 Hook을 호출할 수 있다
Hook의 이름이 use로 시작해야 한다

2-2. Hook의 장점

이러한 Hook은 다음과 같은 장점을 가지고 있다.

더 간결한 코드

: 클래스형 컴포넌트처럼 this 키워드나 생명주기 함수 등의 복잡한 문법을 사용하지 않아도 되므로, 코드 작성량이 줄어들고 가독성도 좋아진다.
컴포넌트 로직의 재사용성

: 원하는 기능을 함수로 만들어 필요한 곳에 넣어주기만 하면 되기 때문에 로직을 재사용하기 더욱 쉬워진다.
상태 관리의 용이성

: 다양한 상태관리 hook을 활용해 컴포넌트 내에서 간단하게 상태(state)를 관리할 수 있다.

3. Hook API

Hook에는 각 기능에 따라 여러 Hook이 있으며, 이름 앞에는 use로 시작한다. 개발자가 직접 커스텀 Hook을 만들 때에도 use로 시작해야 한다.

3-1. useState

useState는 함수형 컴포넌트에서 state를 사용하기 위한 Hook이다.

useState를 사용하기 위해선 import해와야 하며, useState의 인자에는 state의 초기값이 들어간다. 이때 useState 함수 내에 선언되는 상태(state)들은 "배열"의 형식으로 저장된다. 이 배열은 state로 선언된 변수와 이 state값을 변경할 수 있는 set 함수를 가지고 있기에 이를 구조분해할당해서 state와 set 함수를 사용한다.

set 함수의 이름은 카멜(camel) 형식으로 "set + 변수명"으로 사용하는 것이 좋다. 예를 들어, 변수명이 name이면, set 함수는 setName이 되면 된다. 그 이유는 각 state마다 별개의 set 함수를 만들어줘야 하기 때문이다. 클래스형 컴포넌트에서는 setState 함수 하나로 모든 state값을 업데이트할 수 있었지만, 함수형 컴포넌트에서는 각 변수마다 별개의 set 함수를 만들어줘야 한다. 따라서 각 state에 대응하는 set함수가 어떤 것인지 파악하기 쉽도록 set + 변수명으로 이름을 지어주는 것을 권장한다.

이러한 set 함수를 통해 state 값을 변경할 수 있는데, state가 변경되면 자동으로 리렌더링이 된다.

import React, { useState } from 'react';

const [변수, set함수] = useState(초기값);

아래의 예시를 보면, count의 초기값은 0이고, 각 버튼에 따라 setCount 함수가 count 값을 업데이트해준다.

import React, { useState } from 'react';

const Counter = () {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>현재 카운터 값은 {count}입니다.</p>
      <button onClick={() => setCount(count +1)}>+1</button>
      <button onClick={() => setCount(count -1)}>-1</button>
    </div>
  );
};

3-2. useEffect

useEffect는 side effect를 수행하기 위한 Hook이다.

여기서 side effect는 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 예를 들면, 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 작업 등이 있을 수 있다. 이 행위를 effect라 부르는 이유는 이 행위가 다른 컴포넌트에 영향을 미칠 수 있고, 렌더링 중에는 작업이 완료될 수 없기 때문이다. 즉, 렌더링 이후에 실행되어야 하는 작업들이다.

1) useEffect 사용법

useEffect의 사용법은 다음과 같다.

여기서 의존성 배열(dependency array)는 이 effect가 의존하고 있는 배열인데, 배열 내에 그 어떤 변수 하나라도 변경되게 되면 effect 함수가 실행된다. 기본적으로 effect 함수는 처음 컴포넌트가 렌더링된 이후와 업데이트로 인한 리렌더링 이후에 실행된다.

import React, { useEffect } from 'react';

// (콜백함수, dependency array)
useEffect(이펙트 함수, 의존성 배열);

아래와 같이 의존성 배열 내에 어떤 value 값이 들어가게 되면, 첫 렌더링 될 때와 value 값이 바뀔 때마다 effect 함수가 실행된다.

useEffect(() => {
  // 작업
}, [value]);

만약 effect 함수가 mount와 unmount 시에 단 한 번씩만 실행되게 하고 싶다면(업데이트될 때 실행되지 않게 하려면), 의존성 배열 자리에 빈 배열을 넣어주면 된다. 이렇게 되면 해당 effect가 props나 state에 있는 어떤 값에도 의존하지 않게 되므로 여러 번 실행되지 않는다.

useEffect(() => {
  // 작업
}, []);

그리고 의존성 배열을 생략하게 되면 컴포넌트가 업데이트될 때마다 호출된다.

useEffect(() => {
  // 작업
});

useEffect에서는 정리(clean-up) 작업을 할 수도 있다.

만약 effect 함수에 타이머를 등록했거나 이벤트 리스너를 등록했다면, return 값으로 정리 작업을 넣어줄 수 있다. 이렇게 함수를 리턴해주면, 해당 컴포넌트가 언마운트될 때 혹은 다음 렌더링 시 useEffect가 실행되기 이전에 clean-up 함수가 실행된다.

useEffect(() => {
  // 구독 작업...
  
  return () => {
    // 구독 해지...
  }
}, []);

아래는 clean-up의 예시이다.

Toggle 버튼을 눌러 Timer 컴포넌트가 화면에 보일지 말지 결정할 수 있으며, Timer가 등장했을 때 1초마다 콘솔창이 찍힌다.

만약 Timer 컴포넌트를 사라지게 한다면, clearInterval가 실행되어 타이머가 중단된다. 만약 이 clean-up이 없다면, Timer는 종료된 것이 아니므로, 화면상에서 Timer 컴포넌트가 보이지 않더라도 콘솔창에서 타이머는 계속해서 작동한다.

import React, { useEffect } from 'react';

const Timer = (props) => {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('타이머 돌아가는 중...');
    }, 1000);

    return () => {
      clearInterval(timer);  // 타이머 clean-up
    };
  }, []);
  
  return (
    <div>
      <span>타이머를 시작합니다. 콘솔을 보세요!</span>
    </div>
  );
};

import React, { useState, useEffect } from 'react';
import Timer from './component/Timer';

function App() {
  const [showTimer, setShowTimer] = useState(false);
  return (
    <div>
      {showTimer && <Timer />}
      <button onClick={() => setShowTimer(!showTimer)}>Toggle</button>
    </div>
  );
}

2) 라이프사이클

이러한 useEffect는 Class의 라이프사이클 함수와 유사한 기능을 수행할 수 있다. 즉, useEffect는 componentDidMount와 componentDidUpdate, componentWillUnmount를 한번에 실행할 수 있다.

아래는 클래스형 컴포넌트에서의 생명주기 함수 코드이다.

class Example extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
    };
  };
}
// componentDidMount 함수
componentDidMount() {
  console.log("mount");
}
// componentDidUpdate 함수
componentDidUpdate(prevProps, prevState) {
  if (this.state.name !== prevState.name) {
    console.log(`update ${this.state.name}`);
  }
}
// componentWillUnmount 함수
componentWillUnmount() {
  console.log("unmount");
}

render() {
  return <div>{this.state.name}</div>
}

useEffect를 활용하면 아래처럼 간단한 코드로 바꿀 수 있다.

const Example = () => {
  const [name, setName] = useState("");
  
  // componentDidMount 함수
  useEffect(() => {
    console.log("mount");
    // componentWillUnmount 함수
    return () => {
      console.log("unmount");
    };
  }, []);
  
  // componentDidUpdate 함수
  useEffect(() => {
    console.log(`update ${name}`);
  }, [name]);
};

React 기술면접 질문

1. React Hook의 장점은 무엇인가요?

더 간결한 코드

: 클래스형 컴포넌트처럼 this 키워드나 생명주기 함수 등의 복잡한 문법을 사용하지 않아도 되므로, 코드 작성량이 줄어들고 가독성도 좋아진다.
컴포넌트 로직의 재사용성

: 원하는 기능을 함수로 만들어 필요한 곳에 넣어주기만 하면 되기 때문에 로직을 재사용하기 더욱 쉬워진다.
상태 관리의 용이성

: 다양한 상태관리 hook을 활용해 컴포넌트 내에서 간단하게 상태(state)를 관리할 수 있다.

</> 끊임없이 성장하기 위해 공부한 내용을 글로 작성하고 있습니다. 틀린 부분이나 추가해야 할 부분이 있다면 언제든 댓글로 남겨주세요❗️

References

도서 <리액트를 다루는 기술>
https://youtu.be/_eq5h9JzN4U
https://youtu.be/qjEcsNYFWYg
https://youtu.be/evJ_O-H-EJI
https://www.youtube.com/watch?v=G3qglTF-fFI&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO

[프로그래머스] 다트 게임

미주민 — Thu, 6 Jul 2023 03:16:45 +0900

Programmers : 다트 게임

문제 링크

https://school.programmers.co.kr/learn/courses/30/lessons/17682

프로그래머스

programmers.co.kr

문제

이 문제는 문자열 과 조건문 에 대한 이해가 있다면 충분히 풀 수 있는 문제였다.

총 3번 다트를 던질 수 있으며, 각 기회마다 0~10점을 얻을 수 있다.
S(1제곱), D(2제곱), T(3제곱) 영역이 존재하며, 각 영역 당첨시 해당 점수가 영역만큼 제곱이 된다.
스타상(*) 영역

- 스타상 당첨시 바로 전에 얻은 점수와 현재 해당 점수가 2배가 된다

- 첫 번째 기회에서 스타상 당첨시 해당 점수만 2배가 된다

- 스타상의 효과는 다른 스타상의 효과와 중첩될 수 있으며, 중첩된 경우는 4배가 된다
아차상(#) 영역

- 아차상 당첨시 해당 점수는 마이너스가 된다

- 스타상의 효과는 아차상의 효과와 중첩될 수 있으며, 이때 -2배가 된다

입출력 예시

4번째 예제는 1S*2T*3S다.

먼저, 1의 1제곱이고 스타상이 적용되어 2배가 된다. 그리고 2의 3제곱에 스타상이 적용되고, 앞선 1에도 스타상이 중첩 적용된다. 마지막으로 3의 1제곱이 온다. 따라서 1*2*2 + (2의 3제곱)*2 + 3이므로, 4+16+3 = 23이다.

5번째 예시는 1D#2S*3S다.

먼저, 1의 제곱이고 아차상이 적용되어 -1이 곱해진다. 그리고 2의 1제곱에 스타상이 적용되며, 앞선 1에 스타상과 아차상이 중첩 적용된다. 마지막으로, 3의 1제곱이 온다. 따라서 (1의 제곱)*(-1)*2 + 2*2 + 3이므로, -2+4+3=5이다.

풀이1 : switch 조건문

여러 if 조건문을 고려해야 하므로 switch문을 사용했다.

문자열 dartResult의 문자 각각을 item에 할당해준다.

- 만약 item이 정수일 경우, tmp에 그 정수 값을 임시로 저장해둔다

- 정수가 10일 수 있고, 이 경우에 tmp에 1이 저장된 상태이므로, 앞선 문자가 1일 경우 10으로 바꿔준다
문자가 정수가 아니라면, 각 제곱 조건을 따져준다.

- 만약 S(1제곱)일 경우는 1배이므로 정수 tmp 그대로 answer에 넣어준다

- 만약 D(2제곱)일 경우, 정수 tmp를 제곱하여 answer에 넣어준다

- 만약 T(3제곱)일 경우, 정수 tmp를 3제곱하여 answer에 넣어준다
스타상과 아차상 조건을 따져준다.

- 스타상은 이전 정수값과 현재 정수값을 2배로 해줘야 하므로, 기존 값을 2배로 재할당해준다

- 아차상은 현재 정수값에 -1을 곱해준다
최종적으로, answer에 담긴 모든 값을 다 더해 출력해준다.

function solution(dartResult) {
    const answer = [];
    let tmp;
    
    for (let i=0; i < dartResult.length; i++) {
        let item = dartResult[i];
        
        if (!isNaN(Number(item))) {  // 정수라면
            tmp = dartResult[i-1] == 1 ? 10 : Number(item);
        } else {
            switch (item) {
                case 'S': answer.push(tmp);
                    break;
                case 'D': answer.push(Math.pow(tmp, 2));
                    break;
                case 'T': answer.push(Math.pow(tmp, 3));
                    break;
                case '*':
                    answer[answer.length-2] = answer[answer.length-2] * 2;
                    answer[answer.length-1] = answer[answer.length-1] * 2;
                    break;
                case '#':
                    answer[answer.length-1] = answer[answer.length-1] * (-1);
                    break;
            }
        }
    }
    return answer.reduce((acc, cur) => acc + cur, 0);
}

실행 결과와 채점 결과는 다음과 같다.

</> 끊임없이 성장하기 위해 공부한 내용을 글로 작성하고 있습니다. 틀린 부분이나 추가해야 할 부분이 있다면 언제든 댓글로 남겨주세요❗️

[프로그래머스] k진수에서 소수 개수 구하기

미주민 — Wed, 5 Jul 2023 23:26:34 +0900

Programmers : k진수에서 소수 개수 구하기

문제 링크

https://school.programmers.co.kr/learn/courses/30/lessons/92335

프로그래머스

programmers.co.kr

문제

이 문제는 진수변환 과 소수(prime number) 가 무엇인지 알고 있으면 풀 수 있는 문제며, 어떻게 푸느냐에 따라 효율성이 달라졌다.

1. 양의 정수 n을 k진수로 변환했을 때, 변환된 수 내에 아래의 조건에 맞는 소수가 몇 개가 있는지 찾아야 한다.

0소수0 : 소수 양쪽에 0이 있는 경우
소수0 : 소수 오른쪽에만 0이 있는 경우
0소수 : 소수 왼쪽에만 0이 있는 경우
소수 : 소수만 있는 경우

2. 위 조건을 쉽게 해석해보면, 소수 양쪽에 0이 있을 수도 있고 없을 수도 있는 모든 경우다.

0이 기준이 되므로, 0을 기준으로 변환된 n을 잘랐을 때 소수가 몇 개가 있는지 파악하면 된다
소수 내에 0이 포함되어서는 안 되므로, 0을 제거해줘도 상관없다

입출력 예시

1번째 예시에서 437674를 3진법으로 변환하면 211020101011이 된다.

0을 기준으로 잘라주면, [211, 2, 1, 1, 11]이 된다. 1은 소수가 아니므로 여기에서 소수는 211, 2, 11이다.

2번째 예시는 10진법이므로 그대로 110011이다.

0을 기준으로 잘라주면, [11, 11]이 된다. 여기서 소수는 11, 11이다.

이때 주의할 점은 110011을 0을 기준으로 잘라주면 ['11', '', '11']로 빈 문자열이 포함되며, 빈 문자열을 정수화하면 0으로 변환되므로 이 역시 고려해줘야 한다.

풀이

총 2가지 방식으로 풀어보았다.

풀이1 : Math.sqrt

정수 N이 소수인지 판별하기 위한 가장 일차원적인 방법은 "N보다 작은 모든 자연수로 N을 나눠보는 것"이다.

그러나 이 판별법은 N 미만의 모든 자연수로 나눈다는 점에서 비효율적이다.

이것보다 나은 방법은 "√N 이하의 모든 자연수들로 N을 나눠보는 것"이다.

N이 16일 때, N은 아래처럼 두 수의 곱으로 이루어져있다.

1 X 16

2 X 8

4 X 4

8 X 2

16 X 1

1부터 15까지의 수로 16을 나눴을 때, 2로 16이 나눠진다는 것은 8로도 16이 나눠진다는 것을 의미한다.

따라서 √N 보다 큰 수로 중복 검사되는 것을 막기 위해 √N까지만 검사하는 것이다.

문제 풀이

n을 k진법으로 변환하고 0을 기준으로 잘라준다.

- 잘려진 수들을 돌면서 각 수 num을 소수 판별 함수 isPrime에 넣어준다

- true를 반환할 경우에는 num이 소수라는 것이므로 count를 증가시켜준다
isPrime 함수

- 소수가 아닌 0과 1은 false로 반환해준다

- 2부터 √N 미만의 모든 자연수로 num을 나눴을 때, 약수가 있다면 소수가 아니므로 false를 반환해준다

- √N 이하의 모든 자연수로 나눠도 약수가 없을 경우는 num이 소수이므로 true를 반환해준다

function solution(n, k) {
    let count = 0;
    n.toString(k).split("0")
     .map((num) => {
        if (isPrime(Number(num))) {
            count++;
        }
    });
    return count;
}

function isPrime(num) {
    if (num <= 1) {
        return false;
    }
    for (let i=2; i <= Math.sqrt(num); i++) {
        if (num % i === 0) {  // 약수가 있다면 소수가 아니다
            return false;
        }
    }
    return true;
}

실행 결과와 채점 결과는 다음과 같다.

풀이2 : 에라토스테네스의 체

소수를 찾는 대표적인 방법 중 하나인 "에라토스테네스의 체"로 풀어보았다.

"에라토스테네스의 체"는 a의 배수들은 a를 약수로 가지고 있어 소수가 아니므로, a의 배수들을 모두 제외시키는 방법이다.

문제 풀이

n을 k진법으로 변환하고 0을 기준으로 잘라주고, 정수화해준다.

- 에라토스테네스의 체로 소수가 아닌 수들을 가려내기 위해 정수들 중 가장 큰 수를 MAX로 뽑아준다.
에라토스테네스의 체

- 0과 1은 소수가 아니므로 true로 noPrime에 넣어준다

- 2부터 MAX의 제곱근 범위까지 돌면서 모든 소수가 아닌 모든 수를 true로 넣어준다

- i의 배수들은 모두 true로 들어간다.
num 중에서 noPrime에 들어가 있지 않다면 소수이므로, count를 증가시켜준다.

function solution(n, k) {
    let count = 0;
    const arr = n.toString(k).split("0").map(Number);
    const MAX = Math.max(...arr);
    
    // 에라토스테네스의 체
    const noPrime = { 0: true, 1: true };
    for (let i=2; i <= Math.sqrt(MAX); i++) {
        if (noPrime[i]) {
            continue;
        }
        for (let j = i * i; j <= MAX; j += i) {
            noPrime[j] = true;
        }
    }

    arr.map((num) => {
        if (!noPrime[num]) {
            count++;
        }
    });
    return count;
}

예시 케이스는 모두 정상적으로 통과했다.

그러나 몇몇 케이스에서는 런타임 에러가 발생했다. 1번째 테스트 케이스는 n은 885733, k는 3이다. 3진법으로 바꾸면 1122222222221이 된다. 이때 MAX가 커지면서 noPrime에 들어갈 수 있는 수의 제한이 있어 런타임 에러가 발생했다.

정수 N 이하의 모든 수 중에서 소수를 찾는 문제라면 Math.sqrt 보다는 에라토스테네스의 체가 좀 더 효율적일 수 있지만, 배열 길이가 너무 큰 경우에는 Math.sqrt를 쓰는 것이 낫다는 걸 배울 수 있었다.

</> 끊임없이 성장하기 위해 공부한 내용을 글로 작성하고 있습니다. 틀린 부분이나 추가해야 할 부분이 있다면 언제든 댓글로 남겨주세요❗️

References

https://st-lab.tistory.com/81

[React/기술면접] 생명 주기 (Life Cycle)

미주민 — Mon, 3 Jul 2023 15:50:28 +0900

생명 주기 (Life Cycle)

혹시 컴포넌트도 수명이 있다는 것을 알고 있나요?

사람이 태어나서 성장하고 생명을 다하는 것처럼 리액트 컴포넌트도 이러한 과정을 겪으며, 이를 생명주기(Life Cycle)라고 한다.

1. 생명 주기

React 컴포넌트에는 생명 주기(라이프사이클)가 존재한다. 생명 주기는 생성(mounting) - 업데이트(updating) - 제거(unmounting) 단계로 구성되어져 있으며, 각 단계마다 특정한 이벤트가 발생하며 그 때마다 사용되는 메서드가 있다. 이러한 생명주기 함수는 클래스형 컴포넌트에서만 사용할 수 있으며, 함수형 컴포넌트에서는 사용할 수 없다. 함수형 컴포넌트에서는 Hooks으로 유사한 기능을 활용할 수 있으므로, 이 부분은 Hooks에서 다뤄볼 것이다.

2-1. 마운트

처음 DOM이 생명된 후 웹 브라우저상에 나타나는 단계를 마운트(mount) 라 하며, 다음과 같은 메서드들이 실행된다.

1. constructor

constructor(props) { ... }

컴포넌트의 생성자 메서드로, 컴포넌트가 생성될 때 가장 먼저 실행된다
이 메서드 내에서 state를 정의할 수 있으며, state가 필요없다면 constructor를 작성하지 않아도 된다
주의
- 해당 함수의 1번째 라인에 반드시 super(props)를 호출해야 하며, 미호출시 props가 생성되지 않는다

2. getDerivedStateFromProps

React 16.3 버전 이후에 나온 라이프사이클 메서드
props로 받아온 값을 state에 동기화해주는 메서드로, 컴포넌트가 마운트될 때와 업데이트될 때 호출된다

3. render

render() { ... }

컴포넌트를 렌더링 해주는 메서드
렌더링할 것이 없는 경우, null 또는 false를 리턴한다
주의
- 여기서 state를 수정해서는 안 되며, state를 수정할 경우 render()가 다시 호출될 수 있다
- 브라우저의 DOM에 접근해서는 안 되며, DOM의 정보를 가져오거나 state에 변화를 줄 때는 componentDidMount에서 처리해야 한다

4. componentDidMount

componentDidMount() { ... }

컴포넌트의 첫 번째 렌더링이 끝나면 호출되는 메서드
이 메서드가 호출되는 시점에는 화면에 컴포넌트가 나타난 상태이다
이 안에서는 JS 라이브러리나 프레임워크 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리할 수 있다

2-2. 업데이트

React 컴포넌트에 변화가 있을 때를 업데이트(update) 라 하며, 다음과 같은 경우에 업데이트를 한다.

props가 바뀔 때
- 부모 컴포넌트에서 넘겨주는 props가 바뀔 때
state가 바뀔 바뀔 때
- setState 함수를 통해 state가 업데이트될 때
부모 컴포넌트가 리렌더링될 때
- 자신에게 할당된 props 또는 state가 바뀌지 않아도 리렌더링된다
this.forceUpdate로 강제로 렌더링을 트리거할 때

이때 실행되는 메서드는 다음과 같다.

1. getDerivedStateFromProps

컴포넌트의 props나 state가 바뀌었을 때 호출된다

2. shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) { ... }

props 또는 state를 변경했을 때, 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드
반드시 true 또는 false 값을 반환해야 하며, false를 반환할 경우 업데이트 과정은 중단된다
이 메서드를 따로 생성하지 않으면 언제나 true를 반환한다
메서드 내부에서 현재 props, state는 this.props, this.state로 접근이 가능하며, 새로 설정될 props와 state는 각각 nextProps, nextState로 접근이 가능하다

3. render

render() { ... }

컴포넌트를 리렌더링해준다

4. getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevState.array !== this.state.array) {
        const { scrollTop, scrollHeight } = this.list
        return { scrollTop, scrollHeight };
    }
}

컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드로, React 16.3 버전 이후에 만들어졌다
이 메서드에서 반환하는 값은 componentDidUpdate의 3번째 파라미터인 snapshot 값으로 전달받을 수 있으며, 주로 업데이트하기 직전의 값을 참고할 때 활용된다

* 예시 : 스크롤바 위치 유지

5. componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot) { ... }

리렌더링(업데이트) 작업이 완료된 후 실행하는 메서드
업데이트가 끝난 직후이므로 DOM 관련 처리를 해도 된다
여기서는 prevProps, prevState를 사용해서 컴포넌트가 이전에 가졌던 데이터에 접근이 가능하다

2-3. 언마운트

언마운트(unmount) 는 마운트의 반대 과정으로, 컴포넌트를 DOM에서 제거하는 과정이다.

1. componentWillUnmount

componentWillUnmount() { ... }

컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드
componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM 등이 있다면, 여기서 제거 작업을 해야 한다

2-4. (추가적인) 라이프사이클 메서드

1. componentDidCatch

componentDidCatch(error, info) {
    this.setState({
        error: true
    });
    console.log({ error, info });
}

React 16 버전에서 새롭게 도입된 메서드
컴포넌트 렌더링 도중에 에러가 발생했을 때 어플리케이션이 먹통이 되지 않고 오류 UI를 보여준다
여기서 error는 어떤 에러가 발생했는지 알려주며, info는 어디에 있는 코드에서 오류가 발생했는지 알려준다
그러나 이 메서드는 자신의 컴포넌트 에러는 잡아내지 못하기에 this.props.children으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있다

</> 끊임없이 성장하기 위해 공부한 내용을 글로 작성하고 있습니다. 틀린 부분이나 추가해야 할 부분이 있다면 언제든 댓글로 남겨주세요❗️

References

도서 <리액트를 다루는 기술>
https://www.youtube.com/watch?v=pjakE0D4CeI
https://chanhuiseok.github.io/posts/react-9/
https://gseok.gitbooks.io/react/content/bd80-bd84-bd80-bd84-c9c0-c2dd-b4e4/react-component-lifecycle-api-c815-b9ac.html

[React/기술면접] ref란?

미주민 — Sat, 1 Jul 2023 19:28:26 +0900

ref란?

* 기술면접 질문은 맨 아래에 적혀 있습니다

일반적으로 DOM 요소에 이름을 달 때 id를 사용한다.

리액트의 public/index.html 파일에서도 div 요소의 id로 root를 설정해 리액트 컴포넌트를 렌더링 시켜준다.

// public/index.html
<div id="root"></div>

// src/index.js
const root = ReactDOM.createRoot(document.getElementById('root'));

그러나 리액트 컴포넌트 안에서 특수한 경우가 아니라면 id의 사용을 권하지 않는다.

그 이유는 HTML에서 id는 유일해야 하는데, 컴포넌트를 재사용할 때마다 중복 id를 가진 DOM이 여러 개가 생겨나기 때문이다.

따라서 리액트에서 DOM에 이름을 달기 위해 ref(reference) 를 사용한다. ref는 전역적으로 작동하지 않고, 오직 컴포넌트 내부에서만 작동하기 때문에 이러한 문제점을 해결할 수 있다.

ref가 어떻게 구성되어 있는지 콘솔을 찍어보면 다음과 같다.

ref는 current 프로퍼티를 가진 객체이다. 뒤에서 살펴보겠지만, ref는 current를 사용해 DOM 요소에 접근할 수 있다.

1. ref를 사용해야 하는 상황

그렇다면 언제 ref를 사용해야 할까? 바로 'DOM을 직접적으로 건드려야 할 때' 이다.

아래와 같은 경우에는 DOM에 직접적으로 접근해야 합니다

특정 input에 focus 주기, 텍스트 선택 영역 혹은 미디어의 재생을 관리할 때
애니메이션을 직접적으로 실행시킬 때
Canvas 요소에 그림 그리기

위와 같은 경우들은 비제어 컴포넌트를 제어하는 경우이다.

즉, React 시스템 내에서 제어하지 않고, 순수 JS를 이용해 컴포넌트를 제어한다는 것이다.

이것이 일반적인 경우와 어떻게 다른지 살펴보고 가자.

1-1. 제어 컴포넌트

import React, { Component } from "react";

class Example1 extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ""
    };
  }

  render() {
    return (
      <input
        value={this.state.value}
        onChange={({ target: { value } }) =>
          this.setState({ ...this.state, value })
        }
      />
    );
  }
}

export default Example1;

위 코드는 React의 상태로 제어하는 컴포넌트다.

state로 input의 value를 관리하기 때문에 입력창에 값을 입력할 때마다 state가 변하게 되고, React에서 state가 변한다는 것은 그때마다 UI를 리렌더링 해줘야 한다는 것을 의미한다. 즉, React의 내에서 input의 value를 제어하게 되면 리렌더링이 반복적으로 일어나 성능을 떨어트릴 수 있다.

1-2. 비제어 컴포넌트

import React, { Component } from "react";

class Example2 extends Component { {
  constructor(props) {
    super(props);

    this.ref = React.createRef();
  }

  render() {
    return (
      <input ref={this.ref} />
    );
  }
}

export default Example2;

그렇다면 React가 해당 input 요소를 관리하지 않으면 문제는 해결된다.

뒤에서 자세히 살펴볼 것이기에 간단하게 설명하자면, ref는 input 요소만 가리키고 있기에 입력창에 아무리 값을 입력해도 state는 변경되지 않으므로 리렌더링이 발생하지 않는다.

2. ref 사용 방법

그럼 이제 ref의 사용법에 대해 자세히 살펴보자. ref를 사용하는 방법에는 2가지가 있다.

2-1. 콜백 함수를 통한 ref 설정

첫 번째 방법은 콜백 함수를 사용하는 것이다. 원하는 요소에 ref라는 콜백 함수를 props로 전달해주면 된다.

아래 코드처럼 input의 props로 ref 콜백함수를 전달해주면, this.inputTag는 input 요소의 DOM을 가리키게 된다. 여기서 ref의 이름인 setInput는 자유롭게 지어주면 된다.

import React, { Component } from "react";

class callbackRef extends Component {
	inputTag = null;
    
    setInput = (ref) => {
    	this.inputTag = ref;
    };

    render() {
        return (
            <div>
            	// this.ref이름
                <input ref={this.setInput} />
            </div>
        )
    }
}

export default callbackRef;

2-2. createRef를 통한 ref 설정

두 번째 방법은 React에 내장되어 있는 createRef 함수를 사용하는 것이다. 이 기능은 React 16.3 버전부터 사용이 가능하다.

이를 사용하기 위해선 먼저 변수에 React.createRef()를 할당해줘야 한다. 그리고 해당 변수를 props로 넣어주면 된다.

만약 DOM에 접근하려면 this.ref이름.current를 사용하면 된다. 콜백 함수 때와 달리 끝에 current 프로퍼티를 붙여 사용해줘야 한다.

import React, { Component } from "react";

class createRef extends Component {
    setInput = React.createRef();

    handleFocus = () => {
        this.setInput.current.focus();
    }

    render() {
        return (
            <div>
                <input ref={this.setInput} />
            </div>
        )
    }
}

export default createRef;

3. 컴포넌트에 ref 달기

리액트에서는 컴포넌트에도 ref를 달 수 있다. 이 방법은 컴포넌트 내부의 DOM 요소를 컴포넌트 외부에서 사용해야 할 때 활용한다.

ref를 다는 방법은 동일하다.

이렇게 할 경우, 컴포넌트 외부에서 컴포넌트 내부의 메서드나 변수에 접근이 가능하다.

예시 : myComponent.handleClick, myComponent.input

<MyComponent
    ref={(ref) => { this.myComponent = ref; }}
/>

React 기술면접 질문

1. ref는 무엇이고, 언제 사용해야 하나요?

ref는 reference의 줄임말로, DOM 요소에 직접 접근해야 할 때 주로 사용되며, 비제어 컴포넌트를 제어하는 경우가 여기에 해당한다.

예를 들어, 입력창의 값을 state로 관리하게 되면 값이 바뀔 때마다 state가 바뀌고, 이로 인해 불필요한 리렌더링이 반복적으로 발생하게 된다. 이러한 문제점을 해결하기 위해 입력창에 ref를 달아주면 입력창의 값을 state로 관리하지 않더라도 외부에서 입력창의 값에 접근할 수 있게 된다.

2. React 컴포넌트 내에서 id가 아니라 ref를 사용하는 이유는 무엇인가요?

HTML에서 id는 유일해야 하는데, 컴포넌트를 재사용할 때마다 중복 id를 가진 DOM이 여러 개가 생겨나기 때문에 이를 방지하고자 ref를 사용한다. ref는 전역적으로 작동하지 않고 오직 컴포넌트 내부에서만 작동하기 때문에 이러한 문제점을 해결해 줄 수 있다.

</> 끊임없이 성장하기 위해 공부한 내용을 글로 작성하고 있습니다. 틀린 부분이나 추가해야 할 부분이 있다면 언제든 댓글로 남겨주세요❗️

References

도서 <리액트를 다루는 기술>
https://ko.legacy.reactjs.org/docs/refs-and-the-dom.html
https://tecoble.techcourse.co.kr/post/2021-05-15-react-ref/