리액트 useState 와 함수 관리 어떻게 하는게 좋나요?

Question

안녕하세요.

스타트업에서 일하고 있는 신입 프론트엔드 개발자 입니다.

현재 쓰고 방식은

// 이메일 동의 통신
const [emailAgreed, setEmailAgreed] = useState();
const handleEmailAgreementClick = () => {
생략
}

//  새로운거
const [새로운거, set새로운거] = useState();
const 새로운거함수 = () => {
생략
}

이렇게 리액트에서 작성을 하고 있습니다.

const [등등, set등등] = useState();

전부다 위로 올려서 적는게 좋은건가요?

아니면 제가 하는 방식 해도 사용해도 문제가 없을까요?

정병훈 · Answer

음.. 아마도 회사마다 기준이 다를 것 같아서 제가 있는 회사에서 가지고 있는 기준을 말씀드려보자면,

const 선언이 필요한 부분이 컴포넌트 최상단에 선언됩니다.
useState와 같이 컴포넌트 내에서 필요한 react-hook을 선언합니다.
마지막으로 컴포넌트 안에서 생성해서 사용되는 함수들을 선언합니다.

방식에 따라 장단점이 있을 것 같은데 컴포넌트 내부에서 선언되는 useState나 함수가 많지 않다면 말씀하신 방법대로 사용하셔도 될 것 같고 조금이라도 개수가 많다라는 생각이 들면 useState와 함수들을 따로 모아두는게 좋은것 같습니다.

중요한건 같이 작업을 하시는 동료 개발자분들과 협의하여 기준을 만드는것 같아요!