눈내려요~~

니콜라스 강의 보고 따라했다.

 

코드

 

const body = document.querySelector('body');
const MIN_DURATION = 10;
function makeSnowflake() {
  const snowflake = document.createElement('div');
  const delay = Math.random() * 10;
  const initialOpacity = Math.random();
  const duration = Math.random() * 20 + MIN_DURATION;

  snowflake.classList.add('snowflake');

  snowflake.style.left = `${Math.round(Math.random() * window.screen.width)}px`;
  snowflake.style.animationDelay = `${delay}s`;
  snowflake.style.opacity = initialOpacity;
  snowflake.style.animation = `fall ${duration}s linear`;

  body.appendChild(snowflake);

  setTimeout(() => {
    //쌓인 눈송이를 제거, html찌꺼기가 쌓이지 않도록 함
    body.removeChild(snowflake);
    //다시 내려
    makeSnowflake();
  }, (duration + delay) * 1000);
}

for (let i = 0; i < 100; i++) {

  //한번에 떨어지지 않고 한송이 한송이씩 떨어지도록 각 index마다 setTimeout걸어줌
  setTimeout(makeSnowflake, 500 * i);
}

 

* {
  padding: 0;
  margin: 0;
  background: black;
  overflow: hidden;
}

.snowflake {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  top: -8px;
}

@keyframes fall {
  from {
  }
  to {
    transform: translateY(100vh);
    opacity: 0;
  }
}

 

고찰?이라 하면 될까

 

위 코드는 vanilaJS고 리액트에서 사용하려고 이리저리 시도해봤는데, 컴포넌트를 만드는것보다

그냥 index.html에서 렌더링해주는게 맞다는 결론을 내렸다. (SSR은 아님, snowflake.js를 통해 눈송이를 만드니까)

 

왜냐하면 DOM element를 계속 만들고 지우고 하는데 이건 리액트의 가상돔 시스템에 아~주 맞지 않기 때문

 

그래서 그냥 <div id = 'root'> 형제 엘리먼트로 <div class= 'snowflake'>넣어주었다.

이렇게 되면 리액트의 가상돔은 <div id = 'root'> 안에서 돌고, 눈내리는 배경은 <div class = 'snowflake'>에서 렌더링되므로

서로 독립되어 작동한다.

index.html

snow관련 js,css를 public폴더에 넣음

리액트웹에 적용한 모습