저에게도 꿈이 있었습니다. 클래스로 프론트엔드 코드를 작성하는 꿈
프론트엔드 업무를 하다 보면 자연스럽게 컴포넌트들 만들고, 해당 컴포넌트에서 동작하는 커스텀훅을 작성하게 된다. 그리고 사용자의 액션에 맞춰 원하는 로직을 실행시키게 된다. 하나의 컴포넌트에 하나의 커스텀훅을 사용할때야 단순하겠지만, 하나의 컴포넌트에서 여러개의 커스텀 훅을 사용에 로직을 작성하다보면, 복잡해지기 쉽다.
목차
기존 코드
const { userName, setName, ... } = useUser();
const { storeName, setData, ...} = useStore();
하지만 이렇게 작성하다 보면, 코드가 길어졌을때, 어떤 함수를 실행시켜야 할지, 그리고 여러 커스텀훅간의 관계가 복잡해 질 수 있는 문제가 있다. 쉽게 복잡해 지는 것이다.
원하는 코드
const user = new User():
user.name;
user.setName(); // 아래 코드보다 변수명이 짧아진다.
user.setUserName();
그러다 문득 클래스를 초기화 하는것처럼 사용하면 어떨까 라는 생각이 들었다.
- IDE의 코드제안 기능을 활용할 수 있다.
- 하나의 식별자로 묶이기 때문에 문맥에 대한 정보를 제공해 변수명을 짧게 지을 수 있다. 따라서 응집도 높은 코드를 작성하게 된다.
현재
그러다 문득 꼭 클래스 문법이 아니어도 되는거 아닌가 라는 생각이 들었다. 이미 커스텀훅에서는 객체를 값으로 반환하고 있었고, 클래스 또한 객체를 생성하는 메커니즘에 불과하지 않나라는 생각이었다.
그래서 지금은 이렇게 코드를 작성해서 사용한다.
const user = useUser();
const store = useStore();
이렇게 사용할 경우, 앞서 설명하다시피
1. ide의 코드제안 기능을 잘 활용할 수 있고
2. 커스텀훅을 작성할때, 짧은 변수명을 사용할 수 있고,
3. 커스텀훅에서 새로운 값을 추가로 리턴할때마다, 할당문에 수정이 없어도 되고,
4. 이건 개인적일 수 있지만, 커스텀훅의 리턴값을 특정 식별자로 할당했을때(예, user, store) 해당 식별자와 맞지않는 로직을인가 계속 체크 할수 있게 되서 응집도 있는 코드를 작성할 수 있게 된다.
사용하다보니 장점이 많은 방식이라서 진즉에 왜 이렇게 작성하지 않았나 싶다.
궁금증
class를 사용하고 싶다는 욕구는 사그라들었지만, 프론트엔드에서는 어째서 class문법을 잘 사용하지 않는 것인가 하는 궁금증이 생겼다. 몇가지 드는 생각은
- 언어자체가 class를 사용하지 않아도 충분한 대체제가 있기때문이 아닐까 라는 생각이 들었다. js는 처음부터 class라는 문법이 있었던 것도 아니었고, 기존에는 생성자함수라는걸 활용했다고 들었다.
- 프론트엔드라는 환경이 그렇게 만든것 아닐까 싶었다. 작동환경이 브라우저라는 점, dom이라는 구조, react같은 프레임워크들의 랜더링 방식 등에 영향을 받은게 아닐까 하고 말이다.
하지만, 단숨에 이래서 이렇다라는 결론을 내릴 수 없었다. 그래서 앞으로 다음과 같은 주제의 글을 작성하며 그 이유를 알아가보고자 한다.
- class 문법이 주는 장점과 특징
- 프론트엔드 환경의 특징
- 프론트엔드에서 class 문법의 적용과 한계
끝.