[TIL] 0126

15 Beginner JavaScript Projects의 1번 문제 구현

레퍼런스

scss적용 안됐던 이유
웹팩 공식 설정을 안봐서..

(x)
@import url('./_home.scss');
@import url('./_hexColors.scss');

(o)
@import '_home.scss';
@import '_hexColors.scss';

• css animation을 처음 사용해봄 → css만드로 글씨색을 자동으로 바꿀 수 있음
• 문제는 state를 사용해 state변경 시 재렌더링을 해주면
  버튼 누를때마다 모든 돔이 다시 생기기 때문에 글씨 컬러 애니메이션도 처음부터 시작하게됨
  => state+재렌더링 사용 안하고 그냥 이벤트 달아줘서 누를때마다 돔에 접근해서 값을 바꿔줌

.hex-color_container {
  ...
  animation: changeColor 5s infinite alternate;
                         한번 실행 시 5초 / 무한 반복  / 지정된 방향 -> 반대 방향 순
  @keyframes changeColor {
    0% {
      color: indigo;
    }
    20% {
      color: blue;
    }
    40% {
      color: green;
    }
    60% {
      color: yellow;
    }
    80% {
      color: orange;
    }
    100% {
      color: red;
    }
  }
}

의문점

리액트는 전부 재렌더링 할텐데 어떻게 구현할까?