[리액트] 실시간 채팅 구현하기 (socket.io, Nodejs) - 3
2023. 1. 27. 22:23
리액트
https://ryuwc.tistory.com/234 [리액트] 실시간 채팅 구현하기 (socket.io, Nodejs) - 2 1탄에 이어 글을 작성한다. Client 먼저, 아래의 라이브러리들을 설치해준다. npm i query-string npm i socket.io-client 클라이언트 에서 socket 설치 npm i react-emoji 이모지를 사용하기위해 설치 npm i react-scroll-t ryuwc.tistory.com 2편에 이어서 작성하겠다. 이번 편에서는 만들어논 컴포넌트들을 어떻게 작성해야 하는지 중점으로 두겠다. Server users.js파일을 생성한 후 아래와 같이 작성한다. const users = []; // This is the function that will..
[리액트] 실시간 채팅 구현하기 (socket.io, Nodejs) - 2
2023. 1. 27. 15:57
리액트
https://ryuwc.tistory.com/233 [리액트] 실시간 채팅 구현하기 (socket.io, Nodejs) - 1 https://www.youtube.com/watch?v=ZwFA3YMfkoc 위 영상을 기반으로 제작합니다. Client 세팅 (CRA) create-react-app을 통해 client 쪽을 세팅한다. 서버는 Nodejs express를 사용할 것이다. 리액트 라우터를 설치해주고 Join ryuwc.tistory.com 1탄에 이어 글을 작성한다. Client 먼저, 아래의 라이브러리들을 설치해준다. npm i query-string npm i socket.io-client 클라이언트 에서 socket 설치 npm i react-emoji 이모지를 사용하기위해 설치 npm ..
[리액트] 실시간 채팅 구현하기 (socket.io, Nodejs) - 1
2023. 1. 26. 22:05
리액트
https://www.youtube.com/watch?v=ZwFA3YMfkoc 위 영상을 기반으로 제작합니다. Client 세팅 (CRA) create-react-app을 통해 client 쪽을 세팅한다. 서버는 Nodejs express를 사용할 것이다. 리액트 라우터를 설치해주고 Join과 Chat 컴포넌트를 만들어 Join페이지를 통해 Chat페이지로 이동할 것이다. 우선, App.js에 라우터 설정을 해주자 import React from 'react' import { Routes, Route } from 'react-router-dom'; import Chat from "./pages/Chat"; import Join from "./pages/Join"; function App() { retur..
[리액트] lottie-web 라이브러리 두 번 로드되는 문제 (Strict mode)
2022. 12. 31. 20:11
리액트
lottie-web lottie-web을 쓰면 useEffect훅에 ref에 lottie를 집어 넣을텐데, 이 때 svg가 두 번 로드되는 문제가 있다. 아마 DOM에 추가되기 전에 한번, 그 후 한번 이렇게 두 번 되는 것 같다. 아래와 같이 clean-up 함수를 이용해주면 해결된다. 리액트의 Strict mode (추가) useEffect훅에 의존성에 빈 배열 해놨는데 로그 찍으면 계속 두 번씩 찍혀서 이상했는데 찾아보니까 Strict mode라는게 작동해서 디버깅을 더 엄격하게 하는 거였음 index나 패키지에서 없애면 됨 (구글링해보셈) 리액트 맘에안드네
[리액트] react.memo()로 불필요한 재평가 방지하기
2022. 12. 30. 21:03
리액트
react.memo()로 불필요한 재평가 방지하기 현재 리액트는 컴포넌트가 가지고 있는 state가 바뀌면 그것들이 그 컴포넌트 함수가 재평가된다. 문제는 이 때 state나 props에 아무 관련이 없는 자식 컴포넌트들도 다시 재평가 된다는 것이다. 예를 들어 아래와 같은 상황이 있으면 App 컴포넌트에서 버튼을 누르면 state가 변경되므로 app컴포넌트가 재평가 되어 콘솔에 App RUNNING이 찍히고 그 바로 아래 자식인 DemoOutput에서도 콘솔이 찍히고, 그 자식인 MyParagraph에서도 콘솔이 찍힌다. 즉, 자식의 자식까지 모두 다 재평가 된다는 것이다. 간단한 앱이면 상관이 없지만 규모가 큰 프로젝트면 이를 방지해야한다. 이를 방지하기 위해 react.memo()를 사용한다. re..
[리액트] Forward Refs
2022. 12. 28. 21:28
리액트
Forward Refs 리액트에서는 ref를 props로 내려주지 못한다. 여기서 ref를 props로 내려받고 activate함수를 통해 현재 ref에 focus하는 함수를 만들고 부모 컴포넌트에서 이를 실행하려했지만, 오류가 뜬다. 이럴 때는 아래와 같이 해주면 된다. 자식에서 useImperativeHandle 사용 사진의 순서대로 변경해주면 된다.
[리액트] 리액트 훅 사용을 위한 규칙
2022. 12. 26. 22:25
리액트
리액트 훅 사용을 위한 규칙 리액트 훅은 리액트 함수에서만 호출해야 한다. (리액트 컴포넌트 함수, 사용자 정의 훅) 리액트 훅은 리액트 컴포넌트 함수 또는 사용자 정의 훅 함수의 최상위 수준에서만 호출한다. 합당한 이유가 없다면, 참조하는 모든 항목을 의존성으로 useEffect 내부에 호출한다.
[리액트] context
2022. 12. 26. 21:42
리액트
context 지금까지는 App의 state를 변경하고 사용하기 위해 props를 계속해서 자식의 자식.. 한테 넘겨주고, 자식은 App이 필요한 데이터를 부모로 올려주고 올려주고, 이 데이터는 다른 App의 자식이 사용하는 경우도 있었다. 이 방법이 잘못된 방법은 아니지만 번거럽고, 효율적이지 못하다. 그래서 컴포넌트 전체에 사용할 수 있는, 리액트에 내장된 state저장소가 있다. 리액트 context이다. 이를 사용하면 액션을 트리거할 수 있다. 그런 다음 긴 prop체인을 만들지 않고 관련된 컴포넌트에 직접 전달할 수 있다. 로그인 여부 context 만들기 우선 관리할 state를 React.createContext를 통해 객체 형태로 만들어준다. 그리고 이제 나(context) 여깄어! 라고 ..