React 이미지 기반 SNS 기능 구현 : 3. 배운 점

왜인지 애잔한 게시물 내용들

React 이미지 기반 SNS

(2021.03.28 ~ 2021.04.01)
두번째✌ 리액트 프로젝트를 마쳤습니다.

📝 도전하고 싶은점

Redux가 아닌 다른 상태관리 라이브러리를 사용해 볼 수 있기를

react를 배우며 자연스레 redux를 함께 배웠지만 다른 상태관리 라이브러리도 존재함을 알게 되었다. 다른 것을 사용해보아야 redux가 어떤 장점을 가졌기에 많이 사용되고 있는 지, 어떤 목적과 특징을 가진 방식인지를 더 이해할 수 있다고 생각한다.
아래는 velopert님의 글이다. '모르고 안 쓰는 거랑, 알고 안 쓰는거랑은 다르기 때문'이라는 말이 와 닿는다.
상태관리 라이브러리의 미학

📝 배운 점

• Debounce와 Throttle을 이용해 과도한 이벤트 발생을 제어할 수 있다. 이벤트 실행 전에 일정 시간 텀을 두는 원리이다. 이 둘의 차이점은 별도 게시물로 정리해 올릴 것이다. 발생하는 이벤트를 전부 반영하지 않고 일정시간 텀을 둠으로써 과도한 리렌더링도 방지할 수 있고 무한 스크롤 구현에도 활용할 수 있다.
• 컴포넌트별 defaultProps를 설정해둠으로써 주어진 props가 없어 발생하는 오류를 방지할 수 있다.
• FileReader의 필요성, 사용자가 input태그를 통해 업로드한 파일은 File이라는 객체로 받아오게 되는데 여기서 끝이 아니라 파일의 내용을 읽기 위해서는 FileReader라는 객체를 사용해야 한다. FileReader-MDN문서
• state 변화는 리렌더링으로 이어져 성능에 직접적인 영향을 미친다. select 태그에 값이 잘 들어오고 있는 지 확인해 보려다가 과도한 리렌더링(Debounce와 Throttle도 사용하지 않음)으로 React에서 에러를 보이는 현상도 경험했다. 다른 컴포넌트에 즉각 반영이 필요하고 리렌더링 해야하는 데이터인지 신중하게 고민하여 판단해야 한다는 것을 배웠다. 사용성을 위해 가능한 리렌더링을 줄이는 것이 좋겠다.
• 프로젝트 시작 전에 자바스크립트 호이스팅과 변수 선언 방식에 따라 TDZ가 발생하는 이유, 객체의 프로퍼티, 콜백, 프로토 타입을 다시 복습했는데 프로젝트 전, 후로 다시보니 추상적으로 느껴지던 개념이 조금은 더 또렷해졌다. 의식하며 코드를 작성해야지!