controllers와 커스텀hooks의 파일형식 차이 이유 및 사용 기준이 무엇인지 궁금합니다🧐🤔

[gygy7151]

저희 프로젝트 아키텍처를 분석해보니까
controllers 폴더는 js파일이 있고,
hooks폴더에는 jsx파일들이 있는데

왜 커스텀 hooks은 jsx파일로 작성하셨는지 궁금합니다!

두번째론, 일부 컨트롤러에선 hooks이 사용되는 것을 발견하게 되었습니다.
어떤 로직들은 반드시 컨트롤러로 작성되어야 하는게 좋고,
어떤 로직들은 반드시 hooks로 작성되는 것이 좋은지

사용 기준이 모오오오오오옵시 궁금합니다!
@mdgarden @IGhost-P
선생님들의 넓은 아량으로 여기 미생 리(액트)린이 블루를 구제해주신다면
받은 은혜 기억하고 열심히 리액트를 아그작아그작 씹어먹는 갓생으로
거듭나겠뜹니댜..
굿밤이옵니댜.ㅎㅅㅎ

[mdgarden]

넘 좋은 질문이에여!!

1. 왜 커스텀 hooks은 jsx파일로 작성하셨는지 궁금합니다!

요건...저도 모르겠네여! ㅎ....
말씀하신대로 hooks는 html을 돌려주는게 아니라서 js파일로 작성해도 되는 걸로 알고 있습니다.
그냥 폴더에 다른 훅스들이 이미 jsx로 작성되어있어서 저도 아무 생각 없이 맞춰서 jsx 파일로 작성했네요...
이 부분은 나중에 리팩토링 하면 좋을 것 같습니다.

2. 어떤 로직들은 반드시 컨트롤러로 작성되어야 하는게 좋고,
   어떤 로직들은 반드시 hooks로 작성되는 것이 좋은지

이건 조금 서로 다른 카테고리의 이야기들인데요, 먼저 컨트롤러는 뭐고 hooks는 뭔지에 대해서 설명드리면 좋을 것 같습니다.
컨트롤러 는 디자인패턴의 용어입니다.
모델(백엔드)에 데이터를 요청하거나 전송할 경우, 뷰(프론트)에서 컨트롤러(API 요청들)에 요청하는 것이 일반적인 MVC구조 입니다. MVC 디자인 패턴에 대해서 검색해보시면 좋을 것 같아요!

Hooks는 리액트에서 상태관리를 좀 더 편하게 도와주는 일종의 도구입니다. 훅스가 없어도 리액트 코드는 짤 수 있습니다. 훅스를 사용하면 리액트의 라이프 사이클을 잘 몰라도 상태관리를 쉽게 할 수 있다는 점과 여러모로 코드가 간결해지기 때문에 사용하는 것입니다.

어떤 로직들을 컨트롤러로 사용하고, 어떤 로직들을 훅스로 사용하냐고 질문주셨는데 위의 두가지 사항을 종합해서 보면 "백엔드에 요청하거나 연결하는 로직"은 "반드시" 컨트롤러로 분류하고 있으며, 훅스는 상태관리를 "편리하게" 하기위한 함수이기 때문에 반드시 훅스로 작성하지 않아도 됩니다. 다만 훅스를 쓰지 않는다면 코드가 좀 많이 길어지고 라이프사이클도 관리해야하기 때문에 굳이 훅스를 쓰지 않아야할 이유가 없다면 훅스를 쓰는게 좋겠죠. 훅스 없이 리액트 코드를 짜보는걸 찾아보시면, 훅스가 왜 필요한지 알 수 있으실 것 같습니다. 마침 제가 얼마전에 비슷한 내용을 정리해놓은게 있었으니 한번 이것도 읽어보시면 좋을 것 같아요~

mdgarden/CS-wiki#37

[mdgarden]

• 추가

일부 컨트롤러에선 hooks이 사용되는 것을 발견하게 되었습니다.

컨트롤러에서 요청을 보낼 때 해당 유저의 정보와 jwt를 취득해야하는데, 유저 정보를 가져올 때 훅스를 사용하고 있습니다.

[gygy7151]

우와...마당 제가 궁금한 것들이 여기 글에 다 모여 있어요!!! 너무너무너무너무너무너무 고맙습니당!!
Model이 백엔드 였다는걸 몰랐는데 이번에 새롭게 알게 되었네요!
혹시 백엔드 서버가 없이 로컬 서버에 돌리는 경우에는 모델이 로컬 서버가 되는 게 맞을까여? @mdgarden
그런데요 궁금한게 한가지 더 있어여 마당
사실 이건 지난번에 댄하고 이야기 나누었던 부분인데요,
flux디자인 패턴이 다른 멘토 개발자 분께서 훨씬 좋은 패턴이라고 최근 2~3년 사이 MVC모델이 아닌
flux 패턴이 많이 사용된다고 언급해주셔서 저희 프로젝트에도 flux디자인 패턴이 도입되었다고 알고 있는데 혹시
맞을까여?? @IGhost-P

[gygy7151]

귀한 시간내어 답변해주셔서 정말 정말 고맙습니다 마당~~~💕💕

[mdgarden]

백엔드 서버가 없이 로컬 서버에 돌리는 경우에는 모델이 로컬 서버가 되는 게 맞을까여?

모델은 데이터베이스를 조작하는 것을 담당한다고 보면 됩니다. 현재 저희 프로젝트의 모델은 전부 백엔드에서 담당하고 있으므로 프론트에서는 모델이 없다고 생각하셔도 무방할 것 같습니다.
백엔드 서버인지 로컬 서버인지는 실행되는 환경이 다른 것이지 역할이 달라지는 것은 아닙니다.

flux 패턴에 대해서는 처음 듣는 것 같네요 🤔
블루도 혹시 알아보시고 새로 알게 된 내용이 있으면 flux랑 mvc랑 어떻게 다른지 정리해주시면 좋을 것 같아요!
저도 좀 더 알아보고 오겠습니다.

[IGhost-P]

사실 모든 hook 관련 로직은 파일 이름 부터 앞에 ues를 붙혀 사용하라고 하더라구요..! 그래서 hooks 폴더 안으로 모아져있으면 좋겠다고 생각합니다!
hooks로 만드는 이유는 간단하게 2가지를 생각하시면 편할것 같아요

1. 컴포넌트안에서 너무 복잡한 로직으로 처리가된다
2. 다른 컴포넌트에서도 사용되는 로직이다

근데 해당 로직에서 useEffect나 useState처럼 hook을 사용해야하는 경우는 하나의 커스텀 hook으로 만들기위해서 hook으로 만들고
그 이외에 hook 사용을 할 필요 없는 로직이라면 util 함수로 처리해버려요~!

[gygy7151]

오옹.. hooks관련 로직인데 use 키워드 안붙여진것들이 있으면 리팩토링 할 필요가 있겠네여?
깔끔하고 명확한 답변 고맙습니다 댄!!😌👍

[mdgarden]

hooks관련 로직인데 use 키워드 안붙여진것들이 있으면 리팩토링 할 필요가 있겠네여?

눈에 띄어서 댄 대신 보충 하겠습니다 🙇‍♀️
리액트 훅스는 애초에 use로 시작하거나 대문자로 시작하지않으면 에러가 나서 use로 시작하지 않는 훅스(혹은 대문자로 시작하지않는 훅스)가 있을 수 없습니다.
이건 리액트에서 정해둔 규칙이기 때문에 무조건 에러가 나게 되어있어요. 공식 문서도 같이 한번 읽어보심 좋을 것 같아욥

https://ko.reactjs.org/docs/hooks-faq.html#what-exactly-do-the-lint-rules-enforce