react 컴포넌트 분리는 어떻게 하나요?

Question

지금 한 페이지에 모든 코드를 다 넣고 있는데요. 
동작에 이상은 없지만 같이 프로젝트를 하는 팀원이 코드를 보기쉽게 분리하라고 합니다.
파일을 만들어서 기존의 코드를 일단 쪼개려고 하는데요 분리하면서 생기는 스타일 문제나 기능의 문제들이 혹시 있을까 걱정이 됩니다. 조언 부탁드려요

엄홍재 · Answer

어떤 걸 쪼개려고 하시는지는 모르겠습니다만 각 부분들을 컴포넌트화 해서 그걸 각 페이지에서 사용하는 것들은 react에서 가능합니다. 또한 파일을 만들어서 쪼개도 스타일 이슈는 없어요!

단, 각 부분에서 사용하는 데이터들이 다르니 해당 컴포넌트로 props를 잘 내려줘야합니다.

상위 컴포넌트에서 사용하던 state를 하위컴포넌트에서 조작하려면 setState를 잘 내려줘서 사용하면 됩니다. 이 부분만 잘 고려하면 분리하는건 어렵지 않을것 같네요!

마지막으로 컴포넌트를 분리하고 분리한 파일을 어떻게 관리할지는 팀원과 잘 상의해서 작업의 효율성을 위해 결정하시면 좋을 것 같아요!

LHS · Answer

컴포넌트를 재사용가능한 작은단위로 잘 쪼개는 습관이 중요합니다.

객체지향 언어에서도 비슷하게 추상화라는 개념을 쓰는데, 디테일한 동작에 신경쓰지 않고, 큰 틀에서 어떤것들이 필요한지 고민하고, 작은 단위의 컴포넌트들은 레고처럼 조립해서 쓸 수 있도록 만들면 가독성도 좋고, 새로운 페이지를 개발할때도 매우 효과적입니다