TIL, 07.03

코테풀기

코테를 안 풀면 코테적 머리가 굳는 것을 우려해 쉬운 거라도  하루에 한 개씩 풀어야겠다고 생각해 오늘도 3개 정도 풀어보았다 긴 조건문을 쓸 때 가장 좋은 가독성을 가지고 있는 switch!! 나는 switch문을 많이 써보지 않아서 이참에 코테 문제 풀면서 연습해 보았다 확실히 switch문으로 적으니 확실히 가독성이 좋고 나도 정리하기 편했다 자주자주 써먹어야겠다

 

리액트를 다루는 기술

컴포넌트 성능 최적화

컴포넌트 성능을 최적화하기 위해서는 불필요한 리렌더링을 방지해주어야 한다 컴포넌트에 리렌더링을 방지할 때는 shouldComponentUpdate라는 라이프사이클을 사용하면 되지만 함수형 컴포넌트에서는 라이프사이클 메서드를 사용할 수 없기에 React.memo라는 함수를 사용한다 하지만 React.memo를 사용하는 것만으로 컴포넌트 최적화는 끝나지 않는다 업데이트되면 함수도 새롭게 바뀌기 때문이다. 이렇게 함수가 계속 만들어지는 상황을 방지하는 두 가지  방법이 있다

첫 번째는 함수형 업데이트를 해주는 것 새로운 상태를 파라미터로 넣는 대신 상태 업데이트를 어떻게 할지 정의해 주는 업데이트 함수를 넣는 것이다 두 번째로는 useReducer를 사용하는 것이다 기존 코드를 많이 고쳐야 한다는 단점이 있지만 상태를 업데이트하는 로직을 모아서 컴포넌트 바깥에 둘 수 있다는 장점이 있다

 

immer

컴포넌트에서 상태를 업데이트할 때 불변성을 지키는 것은 매우 중요하다

불변성이 지켜지지 않으면 객체 내부의 값을 새로워져도 바뀐 것을 감지하는 못한다

즉 컴포넌트 성능 최적화해서 사용하는 React.memo에서 기존 것과 바뀐 것을 서로 비교하여 최적화하는 것이 불가능한 것이다. 전개연산자를 사용하여 객체나 배열 내부의 값을 복사하고 내용을 변경하는데 문제는 전개연산자로 복사하면 얕은 복사를 하게 된다 얕은 복사를 하면 안쪽까지 복사하는 것이 아닌 가장 바깥쪽에 있는 것만 복사되기 때문에 내부의 값이 객체 혹은 배열이라면 내부의 값 또한 따로 복사해주어야 한다 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 업데이트하는 것이 힘들기 때문에 이럴 경우 immer 라이브러리 쓰면 코드를 매우 쉽게 작성할 수 있다

 

페어로 코드리뷰

만든 사람이 코드리뷰를 하는 것은 한계가 있기 때문에 항해에서 매칭해 준 페어와 함께 코드리뷰를 했다

여기서 제일 중요한 것은 이름을 짓는 것이었다. 변수명이나 함수명 컴포넌트 명 등 각 이름을 이쁘게 지어야 하는 것이다 이름을 딱 보았을 때 이 아이가 어떤 아이인지 어떤 행동을 하는지 어떤 데에 쓰는 것인지 명확하게 지어야 하는데 아직은 다른 사람이 보았을 때 헷갈리수 있게 적은 것도 있었다. 다음에 이름을 지을 때는 그 아이에 맞게 명확하게 지어야겠다