리액트 리팩토링

대단한 영상을 발견했다. profy dev라는 채널을 운영하는 시니어 개발자이신 분이다. 주니어가 작성한 코드를 보고 리팩토링하여 복잡한 코드 개선, 버그 발생 가능한 코드 개선을 통해 유지보수하기 매우 쉬워졌다.

리팩토링 포인트는 아래와 같다.

derived state

: 다른 state로 부터 파생될 수 있는 state는 굳이 state로 만들지 않는것. useState를 최대한 줄여 리랜더링을 피할 수 있다.

single source of truth

: 어떤 state를 공유하고 싶다면 한곳에 보관하자. 여러곳에서 보관하면 여러곳의 state의 sync를 맞춰야하니 당연히 setState가 여러번 일어날거고 그럼 버그가 발생하기 쉬워진다.

그외

1. array대신 Map을 사용하기
2. 한꺼번에 setState를 하기
3. useEffect사용을 줄이기
4. styled(Component) 를 사용해서 기존 Component를 재 스타일링 하기

등등 여러가지 리팩토링 기법을 이용해 코드를 대폭 개선시켰다. 너무 신기하고 시원하다.

아래 영상을 참고!

single source of truth

derived state