코드리뷰 정리 - 리액트 로또

일관된 타입 유지
1 - 타입스크립트를 사용하면 해결될 문제이지만 한번 더 짚고 넘어가자. state가 string을 받았다면 이후에도 계속 string을, number를 받았다면 이후에도 number를 유지하도록 구현을 하자. 예측할 수 있는 코드를 작성하는 것이 중요하다.

관심사 / 책임
1 - 컴포넌트의 관심사와 책임을 잘 파악하자. 이 피드백의 경우에는 당첨 번호를 입력받는 컴포넌트에서는 결과 확인하기 버튼을 클릭했을 때, 부모에게 당첨 번호를 넘겨주기만 하고, 모달은 모달 컴포넌트에서 열도록 관심사를 분리하라는 피드백이다. 따라서 네이밍도 중요한데, 단순하게 컴포넌트 내에 있는 동작에 따라 네이밍을 하는 것이 아니라, 컴포넌트의 관심사에 맞춰서 네이밍을 해야 변경에 취약해지지 않는다고 한다.
2 - 결제 관련 컴포넌트에서 금액을 입력받는다면 금액이 로또 구매를 위한 금액인지, 컴퓨터 구매를 위한 금액인지에 대해서는 관심이 없다. 단지 금액을 입력 받고, 부모 컴포넌트에게 금액을 전달해줄 뿐이다. 만약 disable 기능이 필요하다면 props로 받아서 사용하자.
3 - 재사용을 하기 힘들 때에는 네이밍을 구체적으로 하자. 특히 실무에서는 모달로 결과를 보여줬다가 페이지를 이동해서 보여주도록 변경될 수도 있는데, 이런 것까지 고려해서 재사용을 고려해보자.
4 - 위와 같다.

re-export
1 - index.js는 주로 로직이 아닌 외부로 export할 모듈을 모아주는 용도로 사용한다. 따라서 re-export를 할 파일을 모아서 사용해보자. import를 한 경로에서 모두 할 수 있기 때문에 굉장히 편리하다. 순환 참조만 조심해서 사용하자.

JSX
1 - JSX에서 &&로 조건부 랜더링을 하는 경우 식이 boolean, null, undefined로 평가되면 무시된다는 것을 이해하자. 이 경우, falsy 값이 JSX에서는 무시되는구나 라고 착각할 수 있는데, 0은 falsy 값이지만 JSX에서는 0으로 표시가 되기 때문에 falsy 값이 무시된다고 착각하면 안된다. 0을 조심하자.

제어/비제어 컴포넌트
1 - 리액트에서는 되도록이면 제어 컴포넌트를 사용하자. 제어 컴포넌트를 사용하면 리액트가 추구하는 방향인 single source of truth의 원칙에도 부합하게 된다. 왜냐하면 비제어 컴포넌트로 DOM이 값을 관리하게 한다면 제어권이 DOM에게 넘어가기 때문인데, 이 경우 리액트가 어떻게 제어를 할 수 없어진다. 또한, 비제어 컴포넌트를 사용하게 되면 실시간 인풋 검사를 할 수 없게 되고, 코드도 더 복잡해진다.
따라서 제어 컴포넌트를 사용해 안전하고 믿을 수 있는 값을 사용하도록 하자.
2 - 여기도 역시 제어 컴포넌트를 사용하라는 리뷰어님의 말씀이 있다.
3 - 제어 컴포넌트를 사용하면, onSubmit이 아닌 다른 곳에서도 해당 value를 사용할 수 있다.

ref
1 - ref는 사용해야 할 때만 사용하자. ref로 DOM을 연결할 경우, DOM에 접근해서 컨트롤하는 것이기 때문에 리액트가 추구하는 방향이 아니다. 정말 어쩔 수 없는 경우에만 사용해야 하는데, ref를 사용해야 할 경우는
포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
애니메이션을 직접적으로 실행시킬 때.
서드 파티 DOM 라이브러리를 React와 같이 사용할 때이다.
선언적으로 해결될 수 있는(상태를 가지고 해결할 수 있는)문제는 ref를 사용하지 않는 것이 좋다고 공식 문서에 나와 있다.

기타
1 - 리액트에서는 DOM을 직접 조작하는 코드를 지양하자. 상태로 가지고 있는 것이 리액트가 지향하는 바이다.