실제 배포를 위해 기존 코딩에서 localhost부분을 제거하고 프록시 처리를 한다.
props로 받은것은 가급적 deps에 넣어서 사용
소켓통신을 위한 훅을 짜고 있었을때 다소 문법이 생소했는데 , 우선 리턴값이 SocketIOClient.Socket 혹은 undefined 변수일 수 있으므로 ,
이렇게 함수형 선언을 할때 타입스크립트 오류를 위해 기입해준다
소켓혹은 // undefined상태의 미연결 소켓 과 disconnect 함수가 반환 될 예정이므로
웹소켓을지원하지 않는 구형 브라우저 지원을위한 http신호 송신을 차단하고 바로 소켓으로만 통신하게 하기 위해 transports 옵션에서 websocket 옵션을 선택한다.
다음과 같이 매개변수로 받을 chatData가 undefined일수있는 상황에선 에러가 발생하게 된다.
문법을 다음과 같이 바꿔준다
이모션을 통해 css 파일에서도 변수를 사용할 수 있고 , 변수의 boolean 여부에 따라 추가적인 스타일의 적용여부를 결정할 수 있다
스타일드컴포넌트를 쓰다보면 이렇게
export const Method = styled.tag``; 를 쓰는데,
여기서 다양한 함수 콜 방식중 Method`; 방식이 쓰인다. 이는 Method(); 와 동일한 방식이며, `의 사이에 매개변수를 넣어준다
Mention 컴포넌트는 MentionsInput만을 부모로 받도록 설계 되어있는 라이브러리다. 이러한 이미 커스텀된 컴포넌트를 스타일드 해서 사용하고 싶을경우 Method = styled(MentionsInput)``; 문법으로 선언해서 사용 할 수 있다.
이렇게 커스텀 했을때 공식문서에 후술된 주의사항이 있는 경우가 있다. 지금 경우에는 Ref 부분을 inputRef 요소로 바꾸어 적용해야하는 상황이 었는데 , 이런부분이 내가 설계하고 생각한 부분에 영향을 줄 수 있으므로 항상 참고자료를 꼭 확인할 것
불필요한 리렌더링으로 인한 리소스 낭비를 막기 위해 일부 요소나 메서드에 memo를 걸어준다. 이를 통해 해당 부분을 캐싱하여 리렌더링을 막을 수 있고, useMemo 에서 deps에 요소를 넣어 deps의 요소가 바뀔때 리렌더링 하도록 한다.
이렇게 컴포넌트 자체에 memo를 걸어 줄 수도 있다.
