TIL - 2021.05.24

Today Ariticle

• [react] useState의 비동기적 속성, 함수형 업데이트

• 리뷰는 여기서 - 일일 아티클
  
  

그 외 오늘 참고한 아티클들

• How to Create a Responsive Square with CSS
  

Today Commit Review

깃 commit 캡쳐 이미지

Today I Learned

• width 크기가 유동적인 정사각형 div 만들기

.square {
  position: relative;
  width: 50%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}

• width값을 받아와서 height에 적용하는 방법이 있는지 모르겠으나, (var, calc을 이용하면??) 이 방법은 padding이 width값을 기준으로 적용된다는 원리를 사용한다.
  다만 이 경우 실제 square 돔의 height값이 0이기 때문에 내부 요소에 absolute를 적용해야한다.

• styled-components와 keyframes로 animation을 적용할 때, 해당 컴포넌트가 리렌더링될 조건이 없다면 애니메이션이 최초 한번 밖에 동작하지 않는다!

• 이전 캐로셀을 만들 때도 그렇고 이번에 캘린더를 만들면서도 두 번째부터 애니메이션이 동작하지 않았는데 해당 스타일드 컴포넌트를 컴포넌트 함수 내부에서 정의하니 컴포넌트 함수가 실행될 때 마다 재선언되었기 때문에 애니메이션이 계속 동작했다.

• 스타일드 컴포넌트를 전역에 선언해두면 컴포넌트 함수가 해당 컴포넌트를 가져와서 사용해도 메모리값이 동일하고, props가 변경되지 않았다면 리렌더링 조건이 맞지 않기 때문에 렌더는 되지만 애니메이션이 동작하지 않았다. 아마 이전에 사용했던 애니메이션이 끝난 상태를 가져와 재사용하기 때문인듯.

• 이 문제의 경우 React.memo를 사용하지 않아도 자동으로 되는걸로 보아 styled-components 자체적으로 처리가 되는걸까? 싶다.

• form태그 안에 button은 기본 submit으로 새로고침을 하게 하니, 주의해서 preventDefault를 적용해두자!
  
  

Today Review

• 캘린더 만드는데 며칠이나 걸리는지!
• 그래도 오늘은 키프레임을 사용해서 애니메이션을 적용할 때 마다 한 번만 실행되던 문제를 해결하고 원인도 어느정도 유추할 수 있어서 의미있었다!