javascript에서 class대신 object를 사용하면 안되나요?

안녕하세요! 전체적인 코드의 의도가 뭔지 잘 모르겠지만, react functional component 안에서 객체를 생성하는 코드는, 리렌더 할 때 마다 새로운 객체를 계속 생성해주게 돼요. 객체가 크다면 성능적으로 이슈가 될 수도 있고, 해당 객체를 참조하는 이펙트라도 생기게 된다면 의도치 않은 버그가 생길 수도 있습니다. 하나의 객체를 사용하길 원하시면 catObj를 컴포넌트 밖에서 선언해주시면 됩니다. setState 함수를 객체에서 바로 참조해야 할 이유는 제가 잘 이해를 못하겠네요. useState랑 catObj에서 개별적으로 catName이라는 값을 가지고 있는데, catObj안의 changeCatName으로 무엇을 하고자 하시는지 잘 모르겠습니다. 클래스는 상속이나 클래스에서 제공하는 기능들이 필요한 경우에 주로 사용하고, 한번 쓰고 말 객체의 경우는 object literal로 선언하긴 합니다. 참고 자료 첨부할게요 :) - https://grand-unified-engine.tistory.com/14 - https://www.nextree.co.kr/p7323/ - https://bkdevlog.netlify.app/posts/oop-class-of-js - https://helloworldjavascript.net/pages/270-class.html - https://yozm.wishket.com/magazine/detail/1396/ - https://marmelab.com/blog/2017/02/06/react-is-slow-react-is-fast.html#beware-of-object-literals-in-jsx

잘은 모르지만 class는 틀이고, object는 내용물입니다. 만약 질문자님께서 고양이 하나가 아니라 다른 고양이 객체들을 더 만들고 싶으시면 class가 적절하고, Object 하나만 필요하다면 예시코드처럼 구현하셔도 괜찮을 것 같습니다.

코드만 보고 답변 드리겠습니다 리액트의 함수형 컴포넌트를 사용중이신걸로 보이는데 이에 맞추어 함수형으로 제작하시면 좋을 듯 합니다 1. catObj안의 catId와 catName은 useState로 관리하시는게 좋겠습니다. 이미 catName이 useState에 등록되어 있으므로 catId만 추가하면 되겠습니다 상태값을 useState로 관리하는 이유는 리액트 라이프사이클에 맞추어 값이 변할 때 마다 알아서 리랜더링을 해주고 코드의 흐름을 추적하기가 수월하기 때문입니다 어떤 정형화된 flow대로 앱이 작동하기 때문에 얘기치 못한 에러가 발생하기 어렵게 됩니다 2. getCat은 컴포넌트 밖으로 떼네어 별도의 함수로 관리하는 편이 낫겠습니다. catId를 인자로 받는편이 좋겠죠 getCat을 다른 컴포넌트에서도 사용할 거 같으면 별도의 파일을 만들어 getCat을 임포트하는 방식으로 설계 하시는편이 좋겠고 외부 컴포넌트에서 참조할 게 아니라면 같은 파일에 두셔도 좋습니다 3. changeCatName은 이미 같은 역할을 하는 함수인 setCatName이 있으므로 불필요해 보입니다 만일 더 나은 코드 패턴에 대해 고민중이시면 커스텀 훅에 대해 검색해보세요 cat에 대한 해당 코드는 커스텀 훅으로 다루는 게 최선일 것 같다는 것이 저의 사견입니다