이번 미션에서는 크루 코드에 대한 피드백은 짧게 가도록 하겠습니다.
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 + 태그를 주고 싶지 않다면 <React.Fragment>
를 명시해줍시다.
export default memo(ClearButton);
memo는 렌더링 결과를 메모이징합니다.
📖 같은 props로 렌더링이 자주 일어나는 컴포넌트라고 생각되는 부분을 memo로 래핑
해보았습니다.
memo의 두번째인자는 props가 만약 객체라면, 객체비교는 얕은비교이므로다른 비교 동작을 원할때 두 번째 인자로 별도의 비교 함수를 제공할 수 있습니다!
const calculatorReducer = (state, action) => {
// ...
}
dispatch({ type: SET_NUMBER, inputNumber: target.textContent });
dispatch할 때에는 action 객체({type, payload})
하나만 보내줍니다.
Reducer 내부의 state는 알아서 잘 가지고 있어요.