리액트계열 쓰시는분들 변수는 어떻게 선언하시는 편이신가요?

Question

예를 들어서import { useState, useRef } from "react"; import { useForm } = "react-hook-form"; const SomeComponent = () => { const [someState, setSomeState] = useState(null); const { register, handleSubmit } = useForm({ mode: "onChange" }); const idRef = useRef(null); const pwRef = useRef(null); const someArray = ["a", "b", "c"]; const submitHandler = (e) => { onSubmit: (watch) => { const submitData = { id: watch.id, password: watch.password } console.log(submitData); }, onError: (err) => { console.log(err); } } return (

) }일단 예시를 위해 쓸데없는 코드까지 넣어서 아무거나 써보았는데요..위 코드에는 state값, ref, 메서드, 외부라이브러리 사용을 위한 변수 선언 등 여러가지가 있는데 나열 순서를 어떻게 해야하고 줄바꿈은 어떤 기준으로 해야할까요..?각 값을 사용하는 곳 바로 위에서 선언한다는 글도 본 것 같은데, 그럼 코드를 한눈에 보기에 좀 힘들지 않을까 생각이 들기도 하고, 그렇다고 한번에 저렇게 선언하면 이게 맞는건가 싶기도 하고.. 또 줄바꿈은 그냥 변수 정의하다 메서드 정의할때 줄바꿈을 해야하나 싶은데 register, handleSubmit도 메서드인데 저런 것도 줄바꿈해야하나 싶기도하고... 팁이 있을까요..?

몰랑토끼 · Answer

너무 많으면 컴포넌트 자체를 분리해야겠죠근데 저 코드에서 react-hook-form 쓰면 ref 안써도되요

2948284 · Answer

김대리 제가 감히 조언 하나 하겠읍니다.index.js에 var로 모두 선언하여 쓰십시오. 닭 잡는 칼이 있고 소 잡은 칼이..

LostStarz · Answer

저도 변수끼리 위에 몰아놓고 함수는 아래 몰아 놓습니다. 줄바꿈 이런거는 prettier같은 플러그인 쓰시면 자동으로 이쁘게 만들어 줍니다. 물론 처음에 많이 고민되긴 하시겠지만 제 생각에는 이런 것들이 크게 중요하지 않아요 그냥 같이 개발 하시는 팀 컨벤션에 따라가면 됩니다.

리액트계열 쓰시는분들 변수는 어떻게 선언하시는 편이신가요?

3개의 답변

기술 목록