야근시렁

실제 프로젝트를 하다보면, 다양한 케이스가 존재합니다. 

우리가 보통 생각하는 map 은 데이터가 이미 존재하고 해당 데이터를 map 으로 돌린다. 

특히 리액트 프로젝트에서 return 부분에서는 for문을 사용할 수 없다.

라고 인식하기 때문에, 특정 숫자를 지정해서 반복문을 돌려야 하는 경우 불가능 하다고 생각하는 분들도 있을 것 같습니다. 

방법은 여러가지가 있습니다만, 만약 배열을 돌리는 수가 적은 경우 그냥 [1,2,3] 로 돌려도 됩니다. 

<div>
    {[1,2,3].map((_, idx) => (
      <p key={idx}>item {idx}</p>
    ))}
</div>

하지만, 돌려야하는 그 수가 많은경우 저렇게 사용하면 비효율적이기 때문에, Array함수를 사용하여 배열을 만들어 사용하는것이 좋습니다. 단, Array(5) 이렇게 하면 5자리 배열이 생성되는건 맞지만 각각의 요소는 undefined 이므로, 대신 fill로 대충 값을 채워준뒤 사용하면 됩니다. 

<div>
    {Array(5).fill(null).map((_, idx) => (
      <p key={idx}>item {idx}</p>
    ))}
</div>

그러면 이를 이용해서 다음과 같은 배열도 만들수 있습니다. 

var menu=["햄버거", "치킨", "피자"]; 라는 데이터가 있는데,

무조건 5개의 UI가 나와야하고, 값이 없는경우는 "준비중"으로 표시한다고 가정해 봅시다.

그러면 우리는 위에서 배운 Array를 사용해서 구현할 수 있겠습니다. 

※ 아래 코드를 보기전에 문제처럼 먼저 구현해보면 좋을 것 같네요!😀

function App() {
  const menu = ["햄버거", "치킨", "피자"];
  return (
    <div>
      <ul>
        {
          menu.map((item) => (
            <li>{item}</li>
          ))
        }
        {
          Array(5 - menu.length).fill(0).map((item, idx) => (
            <li>준비중</li>
          ))
        }
      </ul>
    </div>
  )
}

onKeyPress는 보통 input 에서 엔터키를 눌러 함수를 호출하는데 많이 사용했었습니다. 

그런데 어느 순간부터 deprecated 되었다는 warning 메세지를 받고, 찾아보니 사실은 오래전부터 W3C의 UI Events 명세에는 2016년부터 "keypress" 이벤트들을 deprecated로 표시 하였다고 한다. 😥

이를 대체할 방안은 onKeyDown을 사용하는 것이다. 

애시당초 keydown, keyup 이벤트로 대부분의 것들을 처리할 수 있었기 때문에 keypress 자체 사용이 줄어든것 같다. 

onKeyPress 와 onKeyDown 의 차이점 

우선 이벤트 발생 시점이 onKeyPress의 경우 문자의 키가 눌렸을때 발생 된다. 그렇기 때문에 문자가 아닌 fn 같은 키를 누르면 호출이 동작이 안될 수 있다. onKeyDown의 경우는 거의 모든키가 눌렸을때 발생된다. 

그렇기 때문에 onKeyDown을 사용하면 shift, alt, backspace 등 많은 키값을 가지고 활용할 수 있다. 

여기 간단한 예제가 있다. 이를 확인해 보고 직접 사용해보면 좋을 꺼 같다. 

function App() {
  const handleAlert = () => {
    alert("함수호출~!");
  };

  return (
    <div>
      <input type="text" onKeyDown={handleAlert} placeholder="여기에 키를 누르세요" />
      <button onClick={handleAlert}>Alert 버튼</button>
    </div>
  );
}

export default App;

또한, f12 로 개발자 도구를 사용하는 방지하는 코드도 만들 수 있다. 

이는 크게 도움이 안될 수도 있지만 나름 보안상으로 필요할 때가 있다. 

function App() {
  useEffect(() => {
    const preventF12 = (e) => {
      if (e.keyCode === 123) { // F12의 keyCode는 123입니다.
        e.preventDefault();
        e.stopPropagation();
      }
    };

    window.addEventListener('keydown', preventF12);

    return () => {
      window.removeEventListener('keydown', preventF12);
    };
  }, []);

  return (
    <div>
      F12 키를 눌러도 개발자 도구가 열리지 않습니다.
    </div>
  );
}

Object형 데이터는 어떻게 map을 돌려야 할까.

const person = {
  id: 15,
  name: "홍길동",
  age: 33
};

이렇게 생긴 데이터가 있다고 하자.

Object.keys() 함수를 사용하면 각 object의 key 값을 배열로 나열해 준다. 

const user = {
  id: 15,
  name: "홍길동",
  age: 33
};

const keys = Object.keys(user);
console.log(keys); // ['id', 'name', 'age']

그리고 만약  value 값을 return 하고 싶다면 이렇게 한 뒤 key값들을 map이나 for문으로 돌려주면 된다. 

const user = {
  id: 15,
  name: "홍길동",
  age: 33
};

Object.keys(user).map((key, idx) => (
  <p>key: {key} - value: {user[`${key}`]}</p>
))

이외 객체의 key값을 추가하고 삭제하는 방법도 알아보자.

const user = {
  id: 15,
  name: "홍길동",
  age: 33
};

user.location = "Seoul"; // key값과 value값을 추가 
delete user.age; // age 속성 삭제

그리고 잘 사용되지는 않지만, 찾아본것들 중에 객체를 배열로 변환하는 두 가지 함수를 더 발견했다. 

Object.values()는 객체의 value 값들을 배열로 만들어준다. 

const user = {
  id: 15,
  name: "홍길동",
  age: 33
};

const userValues = Object.values(user);
console.log(userValues); // [15, "홍길동", 33]

또한, Object의 key값과 value값을 배열로 한번 묶고 배열로 리턴해주는 함수도 있었다. 

(즉, 이중배열로 리턴된다.)

const user = {
  id: 15,
  name: "홍길동",
  age: 33
};

const userEntries = Object.entries(user);
console.log(userEntries); // [['id', 15], ['name', '홍길동'], ['age', 33]]

위의 두 가지는 쓸 일이 많아 보이지는 않지만, 언젠가 쓸 수 있게 되는 상황이 오면 미리 공부해 둔 것이 뿌듯할 것 같다. 😘