[Sparta 개발 일지]_210611 4주차

새로 알게된 것

• css keyframes(styled-components)
• forEach()와 map()의 차이점

---

keyframes(styled-components)

1. 애니메이션을 줄 요소를 만든다. boxFade라는 이름의 키 프레임을 생성할 예정.

const Box = styled.div`
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: green;
  animation: ${boxFade} 2s 1s infinite linear alternate;
`;

2. position을 absolute로 주고 기본 위치를 잡는다.

const Box = styled.div`
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: green;
  position: absolute;  // 추가
  top: 20px;           // 추가
  left: 20px;          // 추가
  animation: ${boxFade} 2s 1s infinite linear alternate;
`;

3. 시간의 흐름(%)에 따른 변화를 keyframes로 잡는다. 컴포넌트 이름은 미리 정해놓은 boxFade로 한다.

const boxFade = keyframes`
  0% {
    opacity: 1;
    top: 20px;
  }
  50% {
    opacity: 0;
    top: 400px;
  }
  100% {
    opacity: 1;
    top: 20px;
  }
`;

forEach()와 map()의 차이점

forEach()

• Array 요소를 제공된 함수로 한 번 실행.
• 콜백 함수를 인자로 받아, 배열의 각 요소에 콜백함수를 실행.
• 아무 값도 반환하지 않음. == forEach문 밖으로 return값을 받지 못함.
• 아무것도 리턴하지 않음.
• 단지 제공된 함수로 Array 요소를 호출.
• 이 콜백은 호출하는 Array를 변경할 수 있음.

let num = [1,2,3,4,5];
let newNum = num.forEach(function(e, i) {
  return e;
});
// undefined

map()

• 모든 Array 요소가 제공된 함수로 호출될때 새로운 array를 생성.
• 기존의 배열을 이용해, 새로운 배열을 생성할 때 사용.
• 콜백 함수를 인자로 받아, 배열의 각 요소에 대해서 실행한 결과 값을 반환.
• map의 경우 요소가 아닌 새로운 값을 만들어서 return할 수 있다. return값 자체를 반환

let num = [1, 2, 3, 4, 5];
let newNum = num.map(function(v, i, arr) {
  return v + 1;
});
// 2, 3, 4, 5, 6

+ forEach가 map보다 실행 속도가 더 빠름

---

출처

1. forEach(), map() 차이점:
   https://velog.io/@limes/Javascript-Array-Method-for-each-%EC%99%80-map%ED%95%A8%EC%88%98%EC%9D%98-%EC%B0%A8%EC%9D%B4