JavaScript에서 바로 사용하는 Tip 4가지

1. Includes를 사용해 || 대체하기.

||는 JS를 활용한 개발을 하다 보면 정말 많이 사용하게 되는 없어서는 안 될 중요한 요소이다.

하지만 많은 것을 비교하는 상황이 된다면 오히려 코드의 가독성을 해치는 요소가 된다.

그럴 때 이 방법을 사용한다면 조금 더 가독성 좋게 사용할 수 있다.

// ...other codes

if (
    isFirstLoading ||
    isSecondLoading ||
    isThirdLoading ||
    isFourthLoading ||
    isFifthLoading
  )
    return <p> 로딩 중... </p>;

if (
    [
      isFirstLoading,
      isSecondLoading,
      isThirdLoading,
      isFourthLoading,
      isFifthLoading,
    ].includes(true)
  )
    return <p>로딩중...</p>;

2. Every를 사용해 && 대체하기.

||와 마찬가지고 정말 많이 사용하는 && 역시 비슷한 방법으로 Every를 활용하여 변경할 수 있다.

// ...other codes

if (
    isFirstLoading &&
    isSecondLoading &&
    isThirdLoading &&
    isFourthLoading &&
    isFifthLoading
  )
    return <p> 로딩 중... </p>;

if (
    [
      isFirstLoading,
      isSecondLoading,
      isThirdLoading,
      isFourthLoading,
      isFifthLoading,
    ].every((e) => e)
  )
    return <p>로딩중...</p>;

3. 텍스트 복사하기.

텍스트 복사하기 또한 많이 사용하지만 간단하게 처리할 수 있다.

const copyToClipboard = (test: string) => {
    navigator.clipboard
      .writeText(test)
      .then(() => alert('복사 성공 :)'))
      .catch(() => alert('복사 실패 :('));
  };

하지만 안드로이드 웹뷰를 작업할 경우에는 위 방식은 권한 문제등이 발생할 수 있기 때문에 작업하는 프로젝트가 안드로이드 웹뷰라면 아래 방식을 추천한다.

npm install react-copy-to-clipboard

import { CopyToClipboard } from 'react-copy-to-clipboard';

// other codes...

const [text, setText] = useState('');

const onCopy = () => {
  alert('텍스트가 복사되었습니다.');
};

// other codes...

  <input value={text} onChange={(e) => setText(e.target.value)} />

  <CopyToClipboard
    text={text}
    onCopy={onCopy}
  >
    <p>복사하기</p>
  </CopyToClipboard>
  
// other codes...

4. 배열 안의 객체 값 변경하기.

개발을 진행하는 중 가장 많이 접하는 데이터는 배열 내부의 객체 형태일 것이다.

그리고 좋아요 버튼과 같이 단순한 변경을 위해 전체 리스트를 처음부터 불러오는 방법이 무척 비효율적이라는 것은 누구나 공감할 것이다.

그런 상황에 간단하게 배열 내부의 객체 값을 변경하는 방법이 있다.

const userList = [
    {
    	name: "홍길동",
        age: 20,
    },
     {
    	name: "김철수",
        age: 21,
    },
     {
    	name: "김맹구",
        age: 22,
    },
     {
    	name: "김짱구",
        age: 23,
    },
     {
    	name: "김이슬",
        age: 24,
    },
];

const newUserList = userList.map((item) => item.age === 21 ? { ...item, age: 20} : item);