[Code Review] 03. React 실습 과제_코드 관련 (구조 분해 할당)

(정의) 구조 분해 할당

배열이나 객체의 속성을 분리해 그 값을 변수에 담을 수 있게 하는 ES6 문법으로, 코드를 직관적이고 간결하게 작성할 수 있게 한다. 함수, 배열, 객체에서 모두 사용 가능하다.

// 일반 함수
const user = {
  name: 'coder',
  age: '29',
  job: 'programmer',
};

const getUserInfo = ({ name, age, job }) => {
  return `제 이름은 ${name}이고 나이는 ${age}살이며 ${job}입니다.`;
};

getUserInfo(user);

// 컴포넌트 함수
// ProductList.js
const ProductList = () => {
  return (
    <ul>
      {PRODUCT_LIST.map(product => (
        <li key={product.id}>
          <ProductItem product={product} />
        </li>
      ))}
    </ul>
  );
};

// ProductItem.js
const ProductItem = ({ product: { title, price, quantity } }) => {
  return (
    <>
      <span>{title}</span>
      <span>{price}</span>
      <span>{quantity}</span>
    </>
  );
};

코드 리뷰 내용 정리

check 1. props 대신 구조 분해 할당 적용으로 간결한 코드 구현 하기

Check 2. boolean값을 가지는 state 값의 경우 의문형으로 설정하기

check 3. 중복되는 부분은 최대한 최소화해서 코드 작성

import React from "react";
import "./Count.scss";

const Count = () => {
const Count = ({ count, onChange }) => {
  const handleCount = (value) => {
    if (count + value < 1) return;
    onChange(count + value);
  };

  return (
    <div className="count">
      <div className="countInput">
        <button onClick={handleCount}>-</button>
        <div className="countInputText">1</div>
        <button onClick={handleCount}>+</button>
        <button
          onClick={() => {
            handleCount(-1);
          }}
        >
          -
        </button>
        <div className="countInputText">{count}</div>
        <button
          onClick={() => {
            handleCount(1);
          }}
        >
          +
        </button>
      </div>
      <button className="resetBtn" onClick={() => {}}>
      <button className="resetBtn" onClick={() => onChange(1)}>
        reset
      </button>
    </div>