[TIL] 0206

WaffleCard Refactoring

• Jira티켓 이동 자동화는 깃허브 연결외에도 따로 자동화 기능을 설정해줘야했다
• MyPage컴포넌트 리팩토링을 했다
  • MyPage에 닉네임/비밀번호 변경 모달 포함되어있는데,
  • api사용 로직과 context실행 후 받은 값을 부모인 페이지에서 props으로 넘겨받도록 해
    순수한 컴포넌트로 리팩토링한 후 스토리북에 등록했다

---

TypeScript Project

Digital Clock을 구현했다

• 반복함수를 걸어주는 과정에서 콜백함수를 this.setState로 바로 넣어주니 실행이 안됐다.
  this.render가 인식되지 않음 → 더 알아봐야겠음

// (x)
 mount() {
   setInterval(
     this.setState
   , 1000);
 }

// (o)
 mount() {
   setInterval(() => {
     this.setState();
   }, 1000);
 }

• 원하는대로 날짜, 시간 데이터들을 포맷해주는 함수도 있었다

    const options = {
        weekday: 'short',
        hour: 'numeric',
        minute: 'numeric',
    };

    const time = new Intl.DateTimeFormat('en', options)
        .format(new Date())
        .toUpperCase();
    timeArea.textContent = time;

재렌더링 관련 의문점 해결

• HexColors를 구현했을 때 글씨 색이 계속 바뀌는 애니메이션을 css로 구현을 했는데 처음에 상태(배경색 코드)가 바뀔 때마다 모든 html이 다시 렌더링되도록 구현하니까 상태가 바뀔 때마다 css애니메이션도 처음부터 재생되었다

  → html을 처음에만 생성하고 배경색이 바뀌어야할 땐 직접 해당돔에 접근해서 textcontent와 background-color 속성 값만 변경해주니까 해결되었다

• 그런데 리액트는 상태가 변할 때마다 돔이 다시 렌더링되는데 어떻게 구현할지 궁금해졌다

  → 구현해본 결과 styled component와 scss두 경우 다 상태가 변해도 애니메이션이 다시 시작되지 않았다
  → 전부 새로 재렌더링 되는 것은 가상 돔이고, 진짜 돔에는 변한 돔에만 접근해서 값을 바꿔주는 것이지 새로 생성하는 것이 아니기 때문이었다