리액트 슬랙 클론코딩 #1

로그인 된 상태인 화면(localhost:3090/workspace/channel)에서 오른쪽 상단 메뉴버튼의 로그아웃 버튼을 누르면 로그인 화면(localhost:3090/login)으로 이동한다.

---

배운 점 :

...
if(!userData){
    return <Redirect to ="/login"/>
}

const onClickCreateWorkSpace = useCallback(()=>{},[])
...

이렇게 쓰면 오류난다!
return 뒤에 hooks 를 쓰면 오류가 나니 다음과 같이 바꿔주자

...
const onClickCreateWorkSpace = useCallback(()=>{},[])

if(!userData){
    return <Redirect to ="/login"/>
}
...

---

...
//리액트의 propTypes 와 동일한 역할. 타입에 대한 변수를 제네릭?으로 넣어준다
interface Props {
    show:boolean;
    onCloseModal:() => void;
    style:CSSProperties;
    closeButton?:boolean;
}

const Menu:FC<Props> = ({children,style,show,onCloseModal,closeButton}) => {
...

---

...
//props들의 기본값을 설정해 주려면 이렇게 쓰면 된다
Menu.defaultProps = {
    closeButton : true,
};
...

---

...
// 변수 뒤에 클론을 붙이면 변수명을 바꿀 수 있다.
const {data:userData,error,mutate} = useSWR('http://localhost:3095/api/users', fetcher)
...

---

const stopPropagation = useCallback((e)=>{
    // 부모태그로 onClick 이벤트가 전달되는 걸 막기 위함. (이벤트 버블링 막기)
    e.stopPropagation()
},[])
    
return (
    <CreateMenu onClick={onCloseModal}>
        <div style={style} onClick={stopPropagation}>
            {closeButton && <CloseModalButton onClick={onCloseModal}>&times;</CloseModalButton>}
            {children}
        </div>
    </CreateMenu>
);