15시 코드 리뷰 진행

WebSocket 관련

./src/hooks/websocket.js

webSocket관련해서 하나의 Hook에서 관리가 되고 있는데 생성과 각 이벤트별로 독립적으로 되어야 할 필요성이 있다. 만약에 WebSocket을 여러 곳에서 사용할 경우 현재 onmessage가 useEffect안에서 사용되는데 다른 메시지를 보낼 때 이슈가 생길 수 있다.

또한 return 안에서 socket.current.close() 사용중인데 만약 socket.current가 빈 값일 경우, 소켓 생성 중 오류가 발생했을 때 에러가 날 수 있으므로 ?. 사용하던지, if(socket.current) 조건식을 걸어두던지 해서 사용하면 좋다.

BaseComponent

./src/components/Button

const Button = (props) => {
  const { style, onPress, text, color } = props;
  return (
    <RNButton
      style={[
        {
          alignItems: 'center',
          backgroundColor: theme.main,
          padding: 10,
        },
        style,
      ]}
      onPress={onPress}
    >
      {text && (
        <Text
          style={[
            {
              color: 'white',
            },
            color,
          ]}
        >
          {text}
        </Text>
      )}
    </RNButton>
  );
};

컬러와 같이 기본 값을 지정해야할 경우 props에서 default 값을 지정하는 것을 추천

⇒ const { style, onPress, text, color='white' } = props;

또한 BaseComponent는 props가 추가될 때마다 속성을 추가하기 보다는 ...props로 처리해서 하는 것이 나중에 진행할 때 편할 것

./src/component/CheckBox

...
      <Pressable
        style={[
          {
            ...styles.checkBox,
            backgroundColor: 'white',
            borderColor: 'lightgray',
          },
          style,
        ]}
      >
...

spread 연산자로 style에서 사용할 때 주의할 점으로 현재 style들이 객체로 되어 있어서 괜찮지만, 나중에 animation style 사용할 때는 배열로 사용하기 때문에 style 타입이 맞지 않아 문제가 발생할 수 있다.

따라서 주의해서 사용하면 좋을 거 같다.

⇒ 이 부분은 아직 경험하지 않아서 잘 와닿지 않았다. 애니메이션 사용할 때 주의해야할듯

./src/components/Vote

export default function Vote({ navigation }) {
	...
  useEffect(() => {
    // header Right 완료 버튼
    navigation.setOptions({
      headerRight: () => (
        <Button
          style={{ backgroundColor: theme.background }}
          color={{ color: theme.main, fontSize: 20 }}
          text="완료"
          onPress={handleSubmitVote}
        />
      ),
    });
  }, [navigation, items]);
	...
}

useEffect 안에서 navigation props를 의존성 배열에 넣어놨는데, 백그라운드에서 이동시 navigation 때문에 useEffect 안이 동작하는지 확인해 볼 필요성이 있음

⇒ 즉, 현재 보이는 뷰에서만 동작하는지 아닌지를 확인해야함