[레벨2 - 미션1] 계산기 기억에 남는 피드백

이번 미션에서는 크루 코드에 대한 피드백은 짧게 가도록 하겠습니다.

기본값 주기

const [firstOperand, setFirstOperand] = useState(
    prevFirstOperand ?? DEFAULT_VALUE.firstOperand,
  );

단축평가를 잘 씁시다! (아래에서도 설명)

단축 평가 잘 쓰기

this.state = memoizedState
      ? memoizedState
      : {
          firstOperand: '0',
          secondOperand: '',
          operation: null,
          isError: false,
        };
// 위의 삼항 연산자보다는

// 아래처럼 단축평가
this.state = memoizedState  ?? {
          firstOperand: '0',
          secondOperand: '',
          operation: null,
          isError: false,
        };

key 값을 입력해야하는 Fragment

만약 key를 입력해야하는 Fragment + 태그를 주고 싶지 않다면  <React.Fragment>를 명시해줍시다.

memo

export default memo(ClearButton);

• memo는 렌더링 결과를 메모이징합니다.

  📖 같은 props로 렌더링이 자주 일어나는 컴포넌트라고 생각되는 부분을 memo로 래핑해보았습니다.

• memo의 두번째인자는 props가 만약 객체라면, 객체비교는 얕은비교이므로다른 비교 동작을 원할때 두 번째 인자로 별도의 비교 함수를 제공할 수 있습니다!

useReduceer

• 상태관리 꿀

const calculatorReducer = (state, action) => {
	// ...
}

dispatch({ type: SET_NUMBER, inputNumber: target.textContent });

• dispatch할 때에는 action 객체({type, payload}) 하나만 보내줍니다.

• Reducer 내부의 state는 알아서 잘 가지고 있어요.