[State] 되지만 안 되는 동작

React는 컴포넌트를 기본 단위로 사용할 수 있습니다. HTML tag를 이용해서도 출력할 수 있다. 모든 그리기 동작을 컴포넌트화할 필요는 없습니다. 컴포넌트화하면 코드 가독성이 올라가고 재사용성이 올라가서 유지보수에 좋지만 State 관리 소요가 늘어나는 것이 단점입니다.

컴포넌트를 State에 넣어서 관리해도 괜찮을까요? 컴포넌트가 하나의 출력 단위로서 State 등 여러가지 값을 가지고 있는데 이를 다시 State에 넣어서 해당 State로 출력을 하면 동작할까요?

반은 맞고 반은 틀립니다. 동작이 되긴 합니다. 의도한 결과물이 화면에 잘 나와요. 아무 문제가 없어 보일 수 있지만 뭔가 좀 찝찝합니다.

사실 컴포넌트를 State에 넣는 것 자체가 어불성설인 것 같습니다. 초기에 구조를 짤 때는 그럼에도 불구하고 동작하니까 그러려니 넘어갔는데 지금에 와서 미정의 동작을 일으켜버렸습니다. State에 넣은 컴포넌트가 Select나 input type="month" 등에서 정상적으로 데이터를 가져오지 못하는 것이었습니다. 해당 컴포넌트를 State에 넣지 않고 함수를 통해 반환해 출력하니까 정상적으로 값을 가져올 수 있게 됐습니다.