Facts
- 로또 미션 Step2를 제출했다.(5시간)
- css 스터디를 했다.(2시간)
Feelings & Findings
로또 미션 Step2를 제출했다.
로또 미션 2단계는 클래스를 함수형으로 변경하는 것이었다. 함수형으로 변경하는 것 자체는 그렇게 어렵지 않았다. 하지만 성능을 포기할 수 없었기에 useCallback과 useMemo, memo를 알아보게 되었고, 그 뒤로 쉽지 않다는 것을 알게 되었다.
리액트를 함수형으로 구현하게 되면 렌더링이 될 때(state, props가 변경될 때)마다 함수를 새로 생성한다. 이 사실은 알고 있었고, 함수가 새로 생성되면 성능에 좋지 않겠다는 생각이 들어서 useCallback을 찾아보게 되었다. 처음에는 막연하게 useCallback으로 모든 함수를 만들면 되지 않을까라는 생각을 했었다.
useCallback은 간단하게 함수를 메모리에 저장해두고 두 번째 인수로 전달한 값이 바뀌지 않으면 새로 함수를 만들지 않는 것이다. 말만 들었을 땐 모두 두 번째 인수로 빈 배열을 전달해두면 함수를 이제 더 이상 만들지 않을 것이라는 생각에 좋아보인다.
하지만 코드 한줄 한줄이 모두 비용이라고 생각하고, 두 번째 인수에 할당도 해야 하고, 메모리에 저장도 되기 때문에 신중하게 사용해야 한다. 만약 성능 개선이 되지 않는 함수에 useCallback을 사용하게 되면 오히려 성능에 악영향을 끼칠 수 있다. 원래라면 함수가 새로 실행될 때 이전의 함수는 GC의 수거 대상이 되어서 사라지는데, 메모리에 저장된 useCallback을 사용한 함수는 GC의 수거 대상도 되지 않고, 새로운 함수를 또 만들기 때문이다.
그래서 나는 렌더링이 한 번에 많이 발생하는 곳에 사용했다. 딱 한 군데 사용했는데, 당첨 번호를 입력할 때, input 7개에 모두 함수를 전달하고 있기 때문에 비용이 크다고 생각했기 때문이다. 이 함수를 useCallback으로 만들고, input을 memo로 만들어서 input은 더 이상 리렌더링이 발생하지 않도록 했다.
React developer tools로 확인해보면 확실히 렌더링이 줄어든 것을 확인할 수 있다. 기존에는 input에 어떤 값을 입력할 때마다 7개의 input이 모두 반짝거렸었는데, 이젠 입력해도 반짝거리지 않는다. props로 넘겨준 함수가 useCallback을 사용했기에 항상 같은 것을 넘겨주는 것을 input이 알기 때문이다. 즉, props가 변경되지 않아서 렌더링이 발생하지 않는다.
memo는 이렇게 props가 변경되지 않았을 때, 리렌더링을 하지 않기 위해 쓰인다. 다시 말해서 memo를 사용하게 되면 처음 한 번만 memoize하고, 그 뒤에 props가 변경되지 않으면 처음에 memoize된 컴포넌트를 사용하기 때문에 리렌더링을 하지 않는다. 그래서 useCallback과 memo가 셋트로 다니는 것 같다.
useMemo는 useCallback과 다르게 값을 저장해두는 것이라고 하는데, 아직 나의 코드에서는 어디에서 사용해야 할지 모르겠다. 성능과 관련된 것들이라서 깊게 파기에는 무리인 것 같고, 이런 것도 있다는 정도만 알고 있으려고 한다. 왜냐하면 아직 state 끌어올리기와 같은 기초적인 것도 잘 모르기 때문이다.
성능에 너무 신경쓰지 말고 우선 기초에 집중해서 공식 문서를 읽자는 생각을 했다.
css 스터디를 했다.
어제 6~7시간 정도 css를 했는데, 하루종일 뭘 한건지 모르게 의미 없이 지나갔다. 오늘 css 스터디에서 스터디의 방법을 바꾸자는 얘기가 나왔고, 그냥 무작정 웹페이지를 따라하는 지금은 실력 향상에 도움이 될 것 같지 않다는 의견을 냈다. 다른 크루들도 모두 같은 의견이었다. 그래서 css도 페어 프로그래밍으로 진행하기로 했다. 우선은 5명의 인원 모두 함께 진행하기로 했다.
떼코딩을 하는 것의 장점은 각자의 스타일을 알 수 있고, 어떤 곳이 어려운지, 어려운 곳에서 다른 크루는 어떻게 해결을 하는지, 어떤 방법의 원리가 무엇인지 등 여러가지를 배울 수 있다고 생각했다. 단점은 5명이 10분씩만 해도 50분이라서 내 차례가 50분마다 돌아온다는 것이다. 하지만 그 시간도 모두 집중한다면 충분히 장점으로 바꿀 수 있을 것 같다.
오늘 잠깐 떼코딩을 해봤는데, 혼자 css를 공부할 땐 생각해보지도 못한 부분을 생각하게 되어서 어제 하루 종일 공부했던 것보다 많은 도움이 되었다고 생각한다. 이것이 우테코에서 지향하는 페어 프로그래밍의 장점이 아닐까라는 생각을 했다.
Plans
- 로또 미션 2단계 피드백 반영 후 제출
- 새로운 미션 시작
