프론트엔드(리액트) 컴포넌트 내부/외부 함수 가독성

Question

컴포넌트 내부에 로직이 복잡해질 경우 가독성이 떨어지는 느낌이 드는데 복잡해질 때 어떤식으로 관리하는지 궁금합니다. ChatGPT 에게 물어보니 컴포넌트 상태를 포함하지 않으면 컴포넌트 외부에 함수를 두어서 가독성을 올린다는데 사실 상태값을 포함하지 않는 컴포넌트가 드물어서

Clickin · Answer

입력에 대한 출력이 동일한 순수함수로 만들어서 외부 파일로 빼면 됩니다.상태 업데이트는 해당 함수 호출한 리턴값으로 업데이트해주면 되지 않나요

초밥먹고싶다 · Answer

저는 container, form 컴포넌트를 따로 따로 만들어서 로직과 UI를 따로 분리합니다

younghoo · Answer

상황에 맞게 하시면 됩니다. 혼자하는 거면 하고 싶은데로 하면되구요

세브라이드 · Answer

경험상 로직에 이름들만 제대로 붙여줘도 가독성이 확 올라갑니다.예를 들어 todoList를 관리하는 useState가 있을때 그걸 잘 정리해서 useTodoListStore 로 따로 빼두면 읽기 훨씬 편합니다.

행복할사람 · Answer

저는 재사용이 가능한지 유무를 판단하고 분리를 하는거같습니다.너무 많은 컴포넌트의 분리도 종종 라이프사이클문제에 직면하게 되더라고요

아리까리 · Answer

순수함수성을 가진 custom hook을 만들어 사용합니다.object 형태의 state는 간단한 경우라면 useReducer를 복잡한 경우라면 context api 또는 상태관리 라이브러리를 이용합니다. form state 같은 경우엔 반드시 form data들을 관리해주는 라이브러리를 반드시 사용합니다.대표적으로 react-hook-form 같은 걸 사용합니다.form data는 생각보다 재사용되고 검증하고 삭제하고 갱신하고 다른 값과의 정합성 체크 등 해야할 일이 많기 때문에 단순히 useState만 가지고는 어렵습니다. 이러한 일을 전문적으로 도와주는 라이브러리를 쓰는게 훨씬 낮습니다. 물론 학습차원에서는 직접 만들어보는 것을 추천합니다.[추가내용]adobe에서 관리하고 있는 react spectrum libraries가 있는데요.이 라이브러리를 학습삼아 참고해보시면 도움이 많이 되실듯 합니다.UI는 없고 hook을 실행해서 반환되는 상태나 함수들을 이용해 각자의 UI을 만들 수 있습니다. 상태관리와 조작에 대한 세부동작은 이 hook에서 대부분을 일임하고 개발자는 이것을 이용해 UI를 만들면 됩니다.

프론트엔드(리액트) 컴포넌트 내부/외부 함수 가독성

6개의 답변

Q&A 목록