오늘은 코드숨 리액트 8주차로 Emotion, Redux Toolkit, PureComponent에 대해 공부했다.
먼저, Emotion은 CSS-in-JS라는 개념을 알아야 한다. 과거 CSS는 xxx.css와 같이 별도의 파일로 관리했지만, 요즘은 JavaScript에서 css를 작성한다. 따라서, CSS-in-JS는 JavaScript에서 CSS를 작성하는 방법론이다. JavaScript에서 css를 작성할 수 있도록 도와주는 라이브러리는 많으며 그 중 styled-components와 emotion이 있고 이번 수업에서는 emotion과 styled-components를 같이 곁들여 웹 페이지를 디자인 해보는 법을 배웠다. 현대 웹사이트는 CSS를 어떻게 작성하는지 배울 수 있어 좋았고, 다음 주부터 프로젝트가 시작되면 디자인은 styled-components와 emotion을 사용해야겠다.
다음으로 Redux Toolkit. 과거에 Redux를 처음 배울 때는 액션 크리에이터, 초기 상태, 리듀서를 모두 작성하고 하나하나 설정해줬어야 했는데 이 모든 것을 한 번에 해결해주는 Redux의 새로운 라이브러리다! 배우면서 느낀 점은 Redux를 처음 배울 때 Redux Toolkit을 배웠다면 Redux를 제대로 이해하지도, 제대로 사용하지도 못했을텐데 Redux를 제대로 이해한 다음에 Redux Tooklit을 배워서 좋았다. 강의대로 진행하면 커버리지 100%를 채우지 못하는 부분이 존재하는데 Redux Toolkit을 다시 복습하면서 커버리지 100%를 만족시켜야겠다.
마지막으로 PureComponent. 함수형 컴포넌트에서 React.memo()를 이용해 PureComponent를 만들 수 있다. PureComponent로 만들 때와 만들지 않을 때 Virtual DOM의 렌더링 방식이 달라진다고 강의에서 말씀해주셨는데, 렌더링 과정이 정확히 어떻게 달라지는지 들으면서 와닿지 않는다는 느낌을 받았다. 내일 PureComponent로 만들 때와 만들지 않을 때 Virtual DOM의 렌더링 방식이 어떻게 달라지는지 공부해보고 TIL로 작성해야겠다.
'TIL' 카테고리의 다른 글
TIL - 20220622 (부제: Promise로 요청 한 번에 하기) (0) | 2022.06.22 |
---|---|
TIL - 20220621 (부제: React.memo()로 성능 최적화하기) (0) | 2022.06.21 |
TIL - 20220619 (0) | 2022.06.19 |
TIL - 20220618 (부제: Github Actions를 위한 환경변수 설정) (0) | 2022.06.18 |
TIL - 20220617 (부제 : webpack에 dotenv, dotenv-webpack 설정) (0) | 2022.06.17 |