codesoom-react week2

Facts

단숫 숫자를 표시하는 기능 및 간단 TODOLIST 구현

Findings

1> 라이브러리 import 문과 로컬 컴포넌트 import 문을 분리하자

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

2> App.jsx 에서는 추상화된 컴포넌트들을 위치시키자

App.jsx 에 컴포넌트를 추상화하지 않고 세부사항을 나열하는 것을 지양하자

Before

<div className="counter-container">
      <HeaderTitile />
      <AddOneButton onClick={handleAddOne} numberToShow={number} />
      <br />
      {[1, 2, 3, 4, 5].map((numberToAdd) => (
        <AddSpecificNumberButton
          numberToAdd={numberToAdd}
          onClick={() => {
            handleAddSpecificNumber(numberToAdd);
          }}
          key={numberToAdd}
        />
      ))}
    </div>

After

<div className="counter-container">
  
      <Page onClick={handleAddNumber} number={number} />
    </div>

3> 컴포넌트 이름을 지을때는 기능만 설명하기 보다 어떤걸 보여주는지, 어떤역할을 하는지를 포괄하는 이름을 짓자

function AddSpecificNumberButton({ onClick, number }) {}

=> function Number({ onClick, number }) {}

4> 관심사를 분리하자

컴포넌트의 역할이 단순 보여지는 역할인지 상태,함수를 관리하는지 생각해서 컴포넌트 이름을 짓고

꼴리는대로 상태, 함수선언을 남발하지 않아야 한다.

예를 들어 TodoListPage 라는 컴포넌트가 있다면 보여주는 역할만 담당해야 한다.

때문에 TodolistPage 컴포넌트 내부에 상태, 함수를 선언하지 않고 view 를 담당하지 않는 상위 컴포넌트에

상태, 함수를 정의하고 단순히 props 을 전달하는 역할만 해야 한다.

5> 함수 내부 parameter 이름은 함수명에 의미를 내포했다면 단순하게 명명하자

예를들어 아래처럼 이미 함수이름에서 뭔가를 삭제한다는 의미를 내포했다면 굳이 parameter 에 삭제한다는 내용을 적을 필요가 없다.

const handleDeleteTodo = useCallback(
    (indexToDelete) => { ...
      
      => const handleDeleteTodo = useCallback(
    (index) => { ...

Feelings

가독성 좋게 코드를 작성하는 능력은 단시간에 얻을 수 있는 것이 아니다..
기능 구현하는데 들어가는 시간보다 더 많은 시간이 들어간다.
하지만 조금만 생각 없이 코드를 작성하면 가독성이 떨어진다.

기능도 잘 되면서 가독성이 좋은 코드를 작성하려면 꾸준히 피드백 받으면서 고쳐나가는 수 밖에 없다