📌
🚨열심히 프로젝트 중 예상치못한 오류가 발생했습니다 ....🚨
useState로 관리하던 users state가 값이 변경된 값이 참조가 안되는 경우가 있었는데요 열심히 구글링하고 찾아보니 useRef로 값을 저장해놓으면 리렌더링이 되어도 state의 값이 초기화 되지않고 변경된 값으로 유지가 가능하다고 하여 이용하였습니다!!
function usePrevious(users) {
const ref = useRef();
useEffect(() => {
ref.current = users;
});
return ref.current;
}
usePrevious(users);
function onClickCameraOffHandler() {
// eslint-disable-next-line no-use-before-define
console.log(stream);
stream.getVideoTracks().forEach((track) => {
console.log(track);
track.enabled = !track.enabled;
});
if (!cameraOff) {
cameraBtn.current.innerText = '켜기';
cameraOff = !cameraOff;
videoRef.current.style.display = 'none';
userCardImgRef.current.style.display = 'block';
client.current.publish({
destination: `/pub/chat/camera`,
body: JSON.stringify({
type: 'CAMERAOFF',
nickname: myNickName,
roomId: param.roomId,
}),
});
} else {
userCardImgRef.current.style.display = 'none';
videoRef.current.style.display = 'block';
cameraBtn.current.innerText = '끄기';
client.current.publish({
destination: `/pub/chat/camera`,
body: JSON.stringify({
type: 'CAMERAON',
nickname: myNickName,
roomId: param.roomId,
}),
});
cameraOff = !cameraOff;
}
}
case 'CAMERAOFF': {
// console.log(prevusers);
console.log(data);
setUsers((oldUsers) =>
oldUsers.map((user) =>
user.nickName === data.nickname
? { ...user, isCameraOn: false }
: user,
),
);
console.log(users);
break;
}
function Audio({ stream, nickName, isCameraOn, keyword }) {
const videoRef = useRef(null);
const userCardImgRef = useRef(null);
const [userkeyword, setUserKeyword] = useState('키워드');
const [userList, setUserList] = useState('');
function cameraOnHandler() {
if (isCameraOn === true) {
videoRef.current.style.display = 'block';
userCardImgRef.current.style.display = 'none';
} else {
videoRef.current.style.display = 'none';
userCardImgRef.current.style.display = 'block';
}
}
useEffect(() => {
cameraOnHandler();
}, [isCameraOn]);
useEffect(() => {
if (videoRef.current) {
videoRef.current.srcObject = stream;
}
setUserKeyword(keyword[`${nickName}`]);
}, [stream, keyword]);
☝
대체 이미지를 보여주기 위해 stream 으로 전송하는 fram의 값을 이미지 파일로 보내거나 하는 방식을 생각 해 보았는데.... mdn과 수많은 구글링을 시도해보았으나 찾지 못했습니다 ㅠㅠㅠ 결국 대체이미지를 보여주는 로직의 step이 좀 길어졌는데요
그래도 원하는 결과를 낼수 있어서 다행입니다 : )