오늘의 react 공부정리

배열의 순서를 바꿔 데이터를 가공하여 사용하는 과정에서 , 이뮤터블로 기존의 배열 인스턴스를 그대로 유지하고 그를 카피한 가공배열을 사용하는게 트렌드인데 , 지금 같이 코드를 짜면 기존 인스턴스를 가공하여 사용하게 된다.

위와 같은 방식으로 [...Array] 의 문법으로 구조분해할당하여 주면 기존 인스턴스를 그대로 유지하며 새로운 카피배열을 얻을 수 있고 , 이를 가공해주면 이뮤터블 방식으로 사용가능하다

객체를 배열로 변환한다

이런식으로 템플릿 리터럴을 매개변수 안에 넣고 map을 돌려서 자동으로 className 을 순서대로 생성해줄 수도 있다.

어떤 인스턴스의 ref 값을 하위 컴포넌트로 전달하기 위해 forwardRef를 사용한다.

기존에 채팅 프로그램의 enter [ 메시지 전송] 을 담당하던 submit 메서드 인데 , 기존 메서드에서는 서버와 상호작용 후 result를 받고 화면에 결과를 출력하는 방식으로 작동하여 사용상 딜레이가 발생하는 불편함이 있었다.

이를 optimistic UI 라고 한다.
그래서 axios로 비동기 통신을 시도 하기 이전에 mutate를 통해 먼저 송신한 메시지를 임의로 만들어 사용자 화면에 먼저 반영하고, 그이후 revalidate로 통신에 실패하면 다시 원상태로 회귀하게 바꾸어 사용성을 증가시켰다.

메시지를 수신 받았을때의 스크롤 위치를 지정하는 해당 메서드는 송수신 딜레이 문제로 버그가 있었는데 , 스크롤 위치 조정 메서드에 setTimeout으로 딜레이를 걸어 해결하였다