인프런 커뮤니티 질문&답변
작성한 질문수
React 훅 구현 원리와 실무 패턴 관련 질문 (useState, useEffect 순서 및 핸들러 구조)
작성
·
27
·
수정됨
1
안녕하세요, 강의에서 훅(useState, useEffect) 사용 규칙과 내부 동작 원리를 공부하다가 궁금한 점이 있어 질문드립니다.
React는 훅을 순서 기반으로 관리한다고 배웠습니다. 그래서 다음과 같은 규칙이 있는 걸로 알고 있습니다:
훅은 컴포넌트 최상위에서만 호출해야 한다.
조건문, 반복문, 중첩 함수 안에서 훅을 호출하면 안 된다.
이와 관련해 궁금한 점은 다음과 같습니다:
개발하다 보면 상태가 많아지고 상태마다 핸들러도 많아지게 되어 코드가 길어지게 됩니다. 그러다 보니 소스코드를 한눈에 파악하기 어려워지는 것 같습니다.
실무에서는 상태별로 핸들러를 묶어서 작성하는 패턴을 많이 쓰나요?
예를 들어:
const [count, setCount] = useState(0);const handleChangeCount = () => { ... };
const [name, setName] = useState('');const handleChangeName = () => { ... };
이런 방식으로도 구현을 하시는지, 아니면 useState는 최상단에서 묶어 관리하고 handler는 handler끼리 useEffect는 useEffect 끼리 작성하는 것이 일반적인지 궁금합니다.
답변 2
1
기능을 구현하다보면 상태가 늘어가는 경우는 빈번한데요. 이때 상태 관리로 인해 파생되는 핸들러나 이펙트도 늘어나 코드 관리가 어려운 순간이 있습니다. 이에 대한 질문을 주신 것 같아요.
저는 상태 관리가 많아져 한 컴포넌트에서 관리하기 어렵다면, 별도의 역할을 하는 컴포넌트로 분리하거나, 커스텀 훅으로 분리해 사용합니다.
관련된 리액트 앨리멘트 반환로직까지 컴포넌트로 분리한다면, 이를 JSX 문법으로 간편히 가져다 사용할수 있을겁니다.
커스텀 훅으로 분리한다면, 추상화 계층으로 복잡한 로직을 숨기고 컴포넌트에서는 이를 통해 관련된 상태와 핸드러를 제공 받을 수 있어요.
다른 사람이 작성한 코드를 많이 보고, 여러 번의 시행착오 경험을 겪으면 균형잡힌 컴포넌트 설계 기법을 갖추실 수 있을거에요.
0
안녕하세요, 인프런 AI 인턴입니다. Jinhee Lee님, 반갑습니다!
React의 훅 사용 규칙에 대해 잘 이해하고 계신 것 같아요. 훅을 사용할 때 최상위에서 호출해야 하며, 조건문이나 반복문, 중첩 함수 안에서 훅을 호출하지 않는 것이 중요합니다. 이에 관련해 실무에서의 상태 관리와 핸들러 구성에 대해 많이 궁금해 하시는 것 같습니다.
실무에서는 상태 관리와 핸들러 작성 방법에 대해 특정한 정답이 있다고 보기는 어렵습니다. 하지만 공통적인 패턴이나 일반적으로 많이 사용되는 방법은 있습니다. 다음은 실무에서 자주 사용되는 패턴입니다:
관련된 상태와 함수 묶기:
- 상태와 그것을 변경하는 핸들러는 서로 가까운 곳에 배치하는 것이 코드 가독성을 높이는 데 도움이 됩니다.
- 예를 들어,
useState와 그에 해당하는 변경 핸들러(handler)를 가까운 위치에 두면 관련된 코드가 분리되지 않아 이해하기 쉽습니다.
- 상태와 그것을 변경하는 핸들러는 서로 가까운 곳에 배치하는 것이 코드 가독성을 높이는 데 도움이 됩니다.
분리된 함수 및 효과 컴포넌트:
- 상태가 많아지면
Custom Hook을 사용하여 비즈니스 로직을 분리합니다.
useEffect내부에 외부로부터 영향을 받지 않는 함수 및 로직을 정리하며, 상태 변화에 따른 부수 효과를 코드가 무리 없이 수행될 수 있도록 최적화합니다.
- 상태가 많아지면
일관된 규칙 따르기:
- 팀 내 규칙이나 스타일 가이드를 따릅니다. 일관성 있는 코드 스타일은 팀원들과의 협업 및 코드를 유지 보수할 때 유리합니다.
useState를 컴포넌트의 시작 부분에 모두 선언한 후, 핸들러 함수들을 따로 구성한 후, hook들과 effect를 묶는 방식도 많이 사용됩니다.
- 팀 내 규칙이나 스타일 가이드를 따릅니다. 일관성 있는 코드 스타일은 팀원들과의 협업 및 코드를 유지 보수할 때 유리합니다.
상태와 핸들러를 어떻게 정리할지는 여전히 개발자의 재량에 달려 있습니다. 가장 중요한 것은 코드의 가독성과 유지 보수성을 고려하여 자신이 속한 팀의 규칙에 맞추는 것입니다.
관련 게시물 참고:
- useState와 핸들러 정리 방법
- 컴포넌트 설계 및 상태 관리
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.