Object.keys()

Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다.

 

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// ['a', 'b', 'c']

 

예)

 

// todo.d.ts

// d.ts는 타입스크립트 코드의 타입 추론을 돕는 파일이다.
export type TodoType = {
  id: number;
  text: string;
  color: "red" | "orange" | "yellow" | "green" | "blue" | "navy";
  checked: boolean;
};

// index.tsx

import React from "react";
import { NextPage } from "next";
import TodoList from "./components/TodoList";
import { TodoType } from "../types/todo";

const todos: TodoType[] = [
  { id: 1, text: "마트 가서 장보기", color: "red", checked: false },
  { id: 2, text: "수학 숙제하기", color: "orange", checked: true },
  { id: 3, text: "코딩하기", color: "yellow", checked: false },
  { id: 5, text: "요리 연습하기", color: "blue", checked: true },
  { id: 6, text: "분리수거 하기", color: "navy", checked: false },
  { id: 7, text: "할 일", color: "red", checked: false },
  { id: 8, text: "할 일2", color: "orange", checked: false },
];

const app: NextPage = () => {
  return <TodoList todos={todos} />;
};

export default app;

// TodoList.tsx
import React, { useMemo } from "react";
import styled from "styled-components";
import palette from "../../styles/palette";
import { TodoType } from "../../types/todo";


interface IProps {
  todos: TodoType[];
}

type ObjectIndexType = {
  [key: string]: number | undefined;
};

const TodoList: React.FC<IProps> = ({ todos }) => {

  const todoColorNums = useMemo(() => {
    const colors: ObjectIndexType = {};

    todos.forEach((todo) => {
      const value = colors[todo.color];

      if (!value) {
        // 존재하지 않는 키
        colors[`${todo.color}`] = 1;
      } else {
        // 존재하는 키
        colors[`${todo.color}`] = value + 1;
      }
    });
    return colors;
  }, [todos]);
  

  return (
    <Container>
      <div className="todo-list-header">
        <p className="todo-list-last-todo">
          남은 TODO<span>{todos.length}개</span>
        </p>
        <div className="todo-list-header-colors">
          {console.log(Object.keys(todoColorNums))}
          {Object.keys(todoColorNums).map((color, index) => (
            <div className="todo-list-header-color-num" key={index}>
              <div className={`todo-list-header-round-color bg-${color}`} />
              <p>{todoColorNums[color]}개</p>
            </div>
          ))}
        </div>
      </div>
    </Container>
  );
};

export default TodoList;

 

 >>> 잘 모르겠으면 콘솔 찍어보기 

  const todoColorNums = useMemo(() => {
    const colors: ObjectIndexType = {};

    todos.forEach((todo) => {
      console.log(todo.color);
      
      const value = colors[todo.color];
      console.log(value);
      
      if (!value) {
        // 존재하지 않는 키
        colors[`${todo.color}`] = 1;
      } else {
        // 존재하는 키
        colors[`${todo.color}`] = value + 1;
      }
    });
    console.log(colors);
    return colors;
  }, [todos]);

(console.log)

red
undefined

orange
undefined

yellow
undefined

blue
undefined

navy
undefined

red
1

orange
1

colors : {red: 2, orange: 2, yellow: 1, blue: 1, navy: 1}

Object.keys(todoColorNums)): ['red', 'orange', 'yellow', 'blue', 'navy']