김씨가 리액트에서 함수 활용하는 비법 한가지

 

---

 

 

이번 글을 통해 배워갈 내용

1.  리액트 함수의 인자 값에 숫자
2.  리액트에서 함수 인자 타입 확인하기 

 

---

 

메시지를 보내는 함수가 있다고 합니다.

sendMessage('kimc', 'hello@test.com', '2A@DAVBSE')

위와 같이 인자의 수가 3개 이상이고

메시지 보내는 것 같은데 직관적이지 않은 코드를 쓰는 건

다른 개발자들이 코드를 이해하는데 불편하게 되고

결국 유지보수가 힘들게 합니다.

 

 

 

반면 아래 코드는 어떨까요?

sendMessage(user)

유저 정보 메시지를 보내는 함수라는 게 명확합니다.

 

 

따라서 김 씨는 인자를 하나 쓰는 것을 좋아합니다.

 

김 씨의 꿀팁을 대방출합니다.

김 씨는 유저 객체처럼 객체를 만드는 것을 좋아합니다.

class User {
    constructor(userData){
        this.id = userData.id;
        this.name = userData.name;
        this.password = userData.password;
    }
}

그다음 

아래와 같이 사용하는 것을 좋아합니다.

왜냐하면

아래 생성자에서는 인자 순서를 바꿔도 코드에 영향을 주지 않습니다.

 

그리고 sendMessage는 인자가 하나고 직관적입니다.

  const example01 = () => {
      // 생성 후에
      const user = new User({name:'kimc', id: 'hello@test.com', password: '2A@DAVBSE'})
      // 작업
      // ....

      // 전달
      sendMessage(user)
  };

 

마지막으로 

 

const sendMessage = (user)=> {
    // User type 확인
    if(typeof user === 'object' && user.constructor === User){
        // 메시지 전달 작업
        // ...
    }
}

sendMessage 함수에서 인자 값에 타입을 확인해서 맞는 경우만 작업을 합니다.

따라서 타입 체크를 안 하는 것보다는 안전성을 확보할 수 있습니다.

 

전체 코드는 아래와 같습니다

import React from 'react';

function Sample001() {
  const example01 = () => {
      // 생성 후에
      const user = new User({name:'kimc', id: 'hello@test.com', password: '2A@DAVBSE'})
      // 작업
      // ....

      // 전달
      sendMessage(user)
  };

  const example02 = () => {

    // 전달
    sendMessage('kimc', 'hello@test.com', '2A@DAVBSE')
};

  return <div onClick={() => example01()} style={{ width: '30px', height: '30px', backgroundColor:'blue' }}></div>;
}

export default Sample001;


class User {
    constructor(userData){
        this.id = userData.id;
        this.name = userData.name;
        this.password = userData.password;
    }
}

const sendMessage = (user)=> {
    // User type 확인
    if(typeof user === 'object' && user.constructor === User){
        // 메시지 전달 작업
        // ...
        console.log('message sent')
    }
}

 

 

결론

자바스크립트는 prototype 기반 언어이기 때문에 클래스 Dto는 많이 쓰지는 않습니다.

하지만 저는 객체 기반 패러다임을 좋아해서 종종 클래스를 애용하는 편입니다.

(new를 쓰면 GC가 알아서 비 할당해주지만 성능을 중시하는 분들은 위의 방법을 선호하지 않는 경우도 있습니다

메모리 관리를 위해서 new를 프로젝트에서 금지어로 쓰는 경우도 있습니다.)

 

3줄 요약

함수에 인자는 하나가 깔끔

타입 스크립트를 쓰지 못하는 바닐라 JS의  경우 클래스 기반도 사용 가능

필자의 경험상 Prototype 기반도 좋으나 Class가 유지보수는 편함 

 

 

 

 

참조 및 인용

https://stackoverflow.com/questions/1646698/what-is-the-new-keyword-in-javascript#:~:text=The%20new%20keyword%20is%20used,the%20constructor%20function's%20prototype%20property

What is the 'new' keyword in JavaScript?

https://stackoverflow.com/questions/17440517/what-is-the-best-way-to-check-variable-type-in-javascript

what is the best way to check variable type in javascript

https://stackoverflow.com/questions/4869712/new-without-delete-on-same-variable-in-javascript

`new` without `delete` on same variable in Javascript

https://stackoverflow.com/questions/11387127/how-to-pass-prototype-function

How to pass prototype function?

 

---

https://codemasterkimc.tistory.com/50

300년차 개발자의 좋은 코드 5계명 (Clean Code)

 

---