[TIL] 210715

이번에는 현재 온라인인 유저들을 나타내주는걸 React에선 어떻게 하는지 살펴봤다. 이번에도 비슷한 흐름으로 "useEffect" ➡ "setState" ➡ "렌더링" 하면 될거같았다. 먼저 고민됐던게 하나의 컴포넌트에서 socket을 연결해주면 다른컴포넌트에서도 socket을 연결이 되나? 였다. 일단 시간도 부족하고 모르겠으니 따로 한번 연결해줘서 만약에 충돌이 일어나면 빼주면 되니 한번 더 연결선언해주고 확인하니 연결이 됐다.

📂 useEffect

이번엔 이벤트 기반이 아닌 연결됐을때 바로 "join" 이라는 이벤트이름으로 유저가 접속했다는걸 nickname과 함께 보내준다. 그럼 서버에서 "아 그래? 온라인 유저목록에 넣어서 보내줄게"라고 currentOn으로 리스트를 보내온걸 받는다.

useEffect(() => {
    socketRef.current = io.connect("연결주소");
    socketRef.current.emit("join", { nickname });
    socketRef.current.on("currentOn", (currentOn) => {
      setCurrentOn(currentOn);
    });
    return () => socketRef.current.disconnect();
  }, []);

📂 setState

그럼 위에서 똑같이 useState 빈배열로 설정하고 이 형태에 따라서 리스트가 들어올것이다.

const [currentOn, setCurrentOn] = useState([]);

📂 유저목록 렌더링 해주기

받아온 리스트를 정해진 틀안에 넣어서 보여주기만 하면 된다. 하지만 유저목록이 업데이트 될때마다 리스트가 바꿔져야 하는데 그냥 리스트만 렌더링해주니 새로고침을 해야 바뀌어서 중간에 유저목록 칸을 한번 비워주려고 return (null)을 줬다. 단점인게 누군가 refresh 할때마다 해당 닉네임이 깜빡깜빡거린다 나갔다가 바로 들어온걸로 인식해서 그러는거같았다. 좀더 좋은 방법인 redux를 사용해서 새로고침을 안하고도 할수있다고 하는데 아직 거기까지 공부하기에는 무리인거같다.

 const showCurrentOn = () => {
    if (!currentOn.length) {
      return <div>Please refresh...</div>;
    }
    return currentOn.map((current, index) => (
      <Wrapper margin="0px 0px 5px 0px" key={index}>
        <Grid is_flex bg="#f7f9f9">
            <Grid is_flex left >
              <Image shape="circle" />
              <Text padding="0px 10px" bold>{current}</Text>
            </Grid>
          <Grid width="0%"></Grid>
        </Grid>
      </Wrapper>
    ));
  };

  const emptyspace = () => {
    return (null);
  };
  
  return (
    <Container>
      <ChattingMode>Users</ChattingMode>
      <UserWrap>
        {emptyspace()}
        {showCurrentOn()}
      </UserWrap>
    </Container>
  );
};

📂 Result

깃헙 https://github.com/dennis9352/99naru