개발자
react에서 함수관리를 어떻게 하시나요..?!
안녕하세요 ! 리액트에 대해서 궁금한점이 생겨서 질문 남기게 되었습니다 ! 예를들어 여러 페이지에 아래의 코드처럼 const [name, setName] = useState<string>(‘’); const handleFormChange = (e: React.changeEvent<HTMLInputElement>) => { const { value } = e.target; setName(value); } 관리해야할 state들이있고 입력창에서의 변화를 핸들링해주어냐한다면, 각 페이지에서 저 handleFormChane를 매번 작성해서 넣어주는게 맞을까요…? 아니면 따른 방식이 있는지 궁금합니다 ! 읽어주셔서 감사합니다 !!!
답변 2
인기 답변
구현하시다보면 다른 코드에서도 이 기능 만들었던 것 같은데..?라고 느껴질 때가 있습니다. 그 때 추상화를 고민하시면 됩니다. 예시로 작성하신 코드만 봤을때는 너무 단순해서 따로 함수로 추상화 작업은 필요없어보입니다. 다만, 실무적으로 봤을 때 예시 코드에서 요구사항을 구현하다보면 추상화가 필요한 기능들이 생길 가능성이 높습니다. 폼에서는 특히 validation(유효성 검사) 관련 기능이 여러 폼에서 중복적으로 필요한 경우가 많습니다. 예를 들어, 이메일은 문자열만 입력해야 한다, 문자열을 입력하지 않은 경우 blah blah 메세지 에러를 보여준다. 와 같은 요구사항을 처리하기 위한 로직들의 경우 공통적인 로직들이 되겠죠? 이렇게 중복되는 로직을 함수로 만들고, 여러 컴포넌트에서 재사용한다면 베스트 시나리오가 됩니다. 다만 폼 관련 요구사항은 웹에서 항상 수요가 많기 때문에 react-hook-form 같이 잘 만들어진 라이브러리를 쓰는 것도 좋은 방법입니다. 중복되는 코드를 어떻게 효율적으로 관리해야 할 지 결정하는 게 결코 쉬운 일은 아닙니다. 잘 모르겠으면 이렇게도 써보고 저렇게도 써보면서 유지 보수하기 쉬운 형태의 코드를 찾는 것도 좋은 방법입니다. 저는 로버트 C. 마틴의 "클린 코드" 책을 읽고 추상화와 좋은 코드를 작성하는 방법에 대한 영감을 많이 받았습니다. 경험많은 개발자들의 서적을 읽어보시는 것도 도움이 될거에요.
안녕하세요. 개인 혹은 회사에서 사용하는 것마다 다르지만 주로 저는 객체 단위로 state를 관리하며, 이것도 custom hook을 이용하여 따로 쉽게 관리합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 09월 15일
React는 함수형 컴포넌트의 로직을 재상용하고 추출하는 데 사용할 수 있는 Hook의 개념을 도입했습니다. 이것은 반복되는 로직(예: 상태 관리)을 공유하기에 아주 적합합니다. 여러분이 설명한대로 여러분의 경우에는 핸들러를 각각의 컴포넌트에서 반복적으로 작성하는 대신, Custom Hook을 만드는 것이 좋고 이것은 그런 특정 유형의 로직을 공유하게 됩니다. 다음은 어떻게 사용자 정의 hook를 사용할 수 있는지 간단한 예입니다: ```jsx // useInput.js import { useState } from 'react'; const useInput = (initialValue) => { const [value, setValue] = useState(initialValue); const handleFormChange = (e) => { setValue(e.target.value); }; return [value, handleFormChange]; } export default useInput; ``` 그 다음은 이를 어떻게 사용하는 지 보여줍니다: ```jsx // YourComponent.js import React from 'react'; import useInput from './useInput'; function YourComponent() { const [name, handleNameChange] = useInput(''); return ( <input type="text" value={name} onChange={handleNameChange} /> ); } ``` 위와 같이 각각의 컴포넌트에서 `useInput` hook를 재사용함으로써 이름 변경을 위한 상태 관리와 이벤트 핸들러를 쉽게 공유할 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!