week4 멘토링

• 한 주간 진행 상황
• 코드 공개
• 하면서 막혔던 부분 / 어려웠던 부분 / 궁금한 부분

4주차 멘토링 질문 사항

• useState나 useRef를 사용해야 할 상황의 구분이 어렵습니다
  • 전 주 금요일에, useState를 너무 많이 사용하니 useReducer 등으로 정리하라는 피드백을 받았습니다.
  • 이번 주에 코드를 정리하는 과정에서, useRef로 동일 기능을 수행할 수 있어 useState를 통한 동작을 useRef로 대체했습니다.
  • 다만 react에서는 DOM에 직접적으로 접근하는 것을 지양하도록 권장합니다.
    • 이 뜻이 querySelector나 getElementBy~ 대신 useRef를 사용하라는 것인지는 잘 모르겠습니다.
  • 해서 DOM 접근을 피하기 위해 useState/useReducer로 상태 관리를 하는 것이 좋은지, useRef로 할 수 있는 작업이라면 굳이 useState를 쓰지 않는 것이 나은지 궁금합니다.

Feedback

• useRef의 사용은, react의 렌더링을 피한 값 설정을 위함

• 보통 useState, setState를 통한 값 변경을 위주로 사용

• React는 DOM의 상태에 무관하게, React 자신의 상태를 DOM에 업데이트하는 일방적 관계

• useRef를 통해 DOM에 대한 의존성을 지니게 되면, 타 라이브러리와 연계하는 과정에서 버그가 발생할 수 있음

• 명령형 프로그래밍 / 선언형 프로그래밍 <- React

  • 두 방식의 차이를 이해하고 React에 걸맞은 방법으로 코딩하기 바람

• DOM에 직접 값을 할당하는 것보다는, React에게 상태를 업데이트하게 만들 것

  • e.target 등으로 값을 가져오는 것 자체는 큰 문제가 없음

• 타이핑 결과에 따라 계속 랜더링 되는 경우가 있다면, 쓰로틀링 디바운스 등을 이용할 수 있다. 대표적으로 lodash에서 debounce 함수를 제공하며, RxJS의 observable을 사용할 수도 있다. 단, RxJS의 사용은 굉장히 고도화된 주제이다.

• 방의 세션 유지를 할 때 주소를 이용해서 처리해보기.

• 컴포넌트는 최대한 멍청하게. 주어진 데이터를 보여줄 수 있게만 하기.

• 비즈니스 로직을 분리해서 컨트롤러로 만들어보기.

• 보안 이슈? S3 접근이라면, 그 접근이 가능한 url은 모두가 접근이 가능하기 때문에 보안상의 문제가 생길 수 있다. 이 부분을 어떻게 제어할것인가?