反応性ゆったりパンツクローンコード1

3866 ワード
React テキストリンク

ログインステータス画面(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>
);
callとapplyの役割と違い
ubuntu時間をソウルに変更