더 나은 개발자가 되었을까?
▪︎ 회고
금주는 코드숨의 마지막 강의 8주차 였다.
더 나아가기 라는 주제와 맞게 Redux toolkit, Emotion, use Memo/Callback 등을 활용하여 리펙터링 할 수 있는 방법을 배울 수 있었다.
코드숨을 진행하며 8주라는 시간이 정말 금방 지나갔고 많은 일들이 있었던 것 같다.
첫 주에 목표했던 나는 '당당한 개발자' 가 되었을까?
되돌아 보면 나는 조금은 더 나은 프론트엔드 개발자가 되었지만 아직 당당한 개발자가 되진 못한것 같다. 하지만 내가 개발자로써 더 나아갈 수 있는 방향과 코드숨을 끝으로 새로운 출발을 하기 위한 준비가 되었다고 느꼈다.
성취감, 스스로 이루어낸 행복개발뿐만 아니라 코드숨 기간동안 100일간 12kg 감량이라는 목표도 달성했고
앞으로도 목표를 설정하고 달성하는 행복을 느끼며 즐겁게 성장하는 삶을 살아가고 싶다 😄
▪︎ 학습 내용
- React.memo 잘 사용하기
* 적절한 사용
컴포넌트가 같은 props로 자주 렌더링되거나,
무겁고 비용이 큰 연산이 있는 경우
* 조심해서 사용해야하는 경우
props가 자주 변경되는 컴포넌트같은 경우,
props의 동등 비교를 위해 비교 함수를 계속 수행하기 때문에 부적절하다.
콜백 함수를 props로 받는 컴포넌트의 경우,
리렌더링을 할 때 마다 부모 컴포넌트가 다른 콜백 함수의 인스턴스를 넘길 가능성이 있다.
useCallback을 사용하면 해당 컴포넌트가 랜더링되더라도,
함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환하기 때문에 적절하게 사용한다.- return 단일 Object 할때 return 문구 생략
자연스럽게 사용하고 있었지만 가끔 생략하는 경우도 있어 한번 더 정리// before
() => {
return {
data
}
}
// after
() => ({
data
})-
styled-components / emotion 차이
1) emotion이 styled-components보다 번들 사이즈가 조금 더 가볍다.
2) emotion은 css props를 지원 해준다.
3) 성능적 차이는 버전에 따라 차이가 있지만 거의 없는 편이다.
- Redux Toolkit
Object return 역할만 수행하는 action creater는 자동으로 구현 할 수 있다.지금 마음가짐을 유지하고 끝까지 최선을 다해서 성장하길!🔥
