여러개의 부분부분 요소를 하나로 묶을 때 사용할 수 있는 api로 react.fragment 로 써짐.
practice/4-2
42강
git status
git add .
git status
git commit -m "커밋메세지"
git push origin <branch>git remote set-url origin https://{token}@github.com/{git_repository_url
// (github.com 이후 일부 url만 입력)
다시 push를 시도한다.
git status // 현재 checkout한 branch 확인
git checkout // 해당 브랜치로 checkout
git add .
git commit -m "커밋 메시지"
git push origin [브랜치 명]휴 몰라 하다보니 됐다..
backdrop은 그 뒷단에 배경의미함.
이벤트 버블링: 이벤트가 위로 올라가는
오늘은 Overlay(오버레이)에 대해 알아보겠습니다.
Overlay란, 어떤 HTML 엘리먼트 위에 또 다른 HTML 엘리먼트가 겹치게 보이는 효과인데요, 이것을 별도로 다루는 이유는, 경험상 Overlay를 자주 쓰면서도 매번 용법을 까먹거나 헷갈리기 십상이기 때문입니다. Overlay를 익히기 위한 효과적인 방법 중 하나는 직접 코드를 수정해 가면서 이해하는 것인데, 이 때 HTML 엘리먼트마다 테두리가 보이게 해서 즉, 스타일의 border 속성을 '1px solid green' 등으로 부여해서 직접 영역을 확인하는 것이 좋습니다.
useRef는 current의 값을 기억할 수 있다. 그 정도만 알고있으라고함.
브라우저 렌더링이 최소 2번됨
ㄱ 만 누르면 서버에 가서 불러온거다.
49강인데 practice/4-4
여기에서 시작
import React , { useState } from 'react' ;
import Login from './components/Login/Login' ;
import Home from './components/Home/Home' ;
import MainHeader from './components/MainHeader/MainHeader' ;
function App () {
const [ isLoggedIn , setIsLoggedIn ] = useState ( false );
const loginHandler = ( email , password ) => {
// We should of course check email and password
// But it's just a dummy/ demo anyways
setIsLoggedIn ( true );
};
const logoutHandler = () => {
setIsLoggedIn ( false );
};
return (
< React.Fragment >
< MainHeader isAuthenticated = { isLoggedIn } onLogout = { logoutHandler } />
< main >
{ ! isLoggedIn && < Login onLogin = { loginHandler } /> }
{ isLoggedIn && < Home onLogout = { logoutHandler } /> }
</ main >
</ React.Fragment >
);
}
export default App ;
여기서 npm start run하면
아이디 비밀번호 쳐도 버튼 안 눌러지게 되어있음
골뱅이 까지 누르면 버튼이 클릭이 되고 이 화면으로 넘어감.
import React , { useEffect , useState } from 'react' ;
import Login from './components/Login/Login' ;
import Home from './components/Home/Home' ;
import MainHeader from './components/MainHeader/MainHeader' ;
function App () {
const [ isLoggedIn , setIsLoggedIn ] = useState ( false );
useEffect (() => {
console . log ( 'Hello useEffect' );
});
const loginHandler = ( email , password ) => {
// We should of course check email and password
// But it's just a dummy/ demo anyways
setIsLoggedIn ( true );
};
const logoutHandler = () => {
setIsLoggedIn ( false );
};
return (
< React.Fragment >
< MainHeader isAuthenticated = { isLoggedIn } onLogout = { logoutHandler } />
< main >
{ ! isLoggedIn && < Login onLogin = { loginHandler } /> }
{ isLoggedIn && < Home onLogout = { logoutHandler } /> }
</ main >
</ React.Fragment >
);
}
export default App ;
매번 브라우저가 실행이 될 떄마다 즉 렌더링이 될 떄마다 반드시 2개의 쉼표다.
useEffect훅의 2번째 인자에...dependency를 넣어줄 수 있다.
[] 이렇게 해서 dependency를 넣어주게 되면
[] 이렇게 빈배열로 넣을 수 있고
isLoggedIn 넣어줄 수도 있고, 아니면 다른값들을 선언을 해서 넣어줄 수도 있는데
import React , { useEffect , useState } from 'react' ;
import Login from './components/Login/Login' ;
import Home from './components/Home/Home' ;
import MainHeader from './components/MainHeader/MainHeader' ;
function App () {
const [ isLoggedIn , setIsLoggedIn ] = useState ( false );
useEffect (() => {
console . log ( 'Hello useEffect' );
}, []);
const loginHandler = ( email , password ) => {
// We should of course check email and password
// But it's just a dummy/ demo anyways
setIsLoggedIn ( true );
};
const logoutHandler = () => {
setIsLoggedIn ( false );
};
return (
< React.Fragment >
< MainHeader isAuthenticated = { isLoggedIn } onLogout = { logoutHandler } />
< main >
{ ! isLoggedIn && < Login onLogin = { loginHandler } /> }
{ isLoggedIn && < Home onLogout = { logoutHandler } /> }
</ main >
</ React.Fragment >
);
}
export default App ;
import React , { useEffect , useState } from 'react' ;
import Login from './components/Login/Login' ;
import Home from './components/Home/Home' ;
import MainHeader from './components/MainHeader/MainHeader' ;
function App () {
const [ isLoggedIn , setIsLoggedIn ] = useState ( false );
useEffect (() => {
//만약 로그인이 되어있지않다면 isLoggedIn = true
//만약 로그인이 되어있지않다면 isLoggedIn = false
}, []);
const loginHandler = ( email , password ) => {
// We should of course check email and password
// But it's just a dummy/ demo anyways
setIsLoggedIn ( true );
};
const logoutHandler = () => {
setIsLoggedIn ( false );
};
return (
< React.Fragment >
< MainHeader isAuthenticated = { isLoggedIn } onLogout = { logoutHandler } />
< main >
{ ! isLoggedIn && < Login onLogin = { loginHandler } /> }
{ isLoggedIn && < Home onLogout = { logoutHandler } /> }
</ main >
</ React.Fragment >
);
}
export default App ;
쌤이 설명한 것중에 굉장이 중요한 요소다.
기본적으로 state에서 쓰고있는 값들은 "브라우저가 렌더링이 될 때마다 초기화가 됩니다"
Ref를 사용하면 직접 Dom를 참조할 수 있다.
Ref를 사용하면 상태를 사용하지 않고 dom의 값들을 조작할 수 있다.
로그인이 되어있는지 안되어있는지 어떻게 알 수 있을까? 기본적으로 제공하는 메소드다.
pair형태의 값을 저장할 수 있다.
value는 string이다.
import React , { useEffect , useState } from 'react' ;
import Login from './components/Login/Login' ;
import Home from './components/Home/Home' ;
import MainHeader from './components/MainHeader/MainHeader' ;
function App () {
const [ isLoggedIn , setIsLoggedIn ] = useState ( false );
useEffect (() => {
//만약 로그인이 되어있지않다면 isLoggedIn = true
//만약 로그인이 되어있지않다면 isLoggedIn = false
}, []);
const loginHandler = ( email , password ) => {
localStorage . setItem ( 'isLoggedIn' , true );
setIsLoggedIn ( true );
};
const logoutHandler = () => {
setIsLoggedIn ( false );
};
return (
< React.Fragment >
< MainHeader isAuthenticated = { isLoggedIn } onLogout = { logoutHandler } />
< main >
{ ! isLoggedIn && < Login onLogin = { loginHandler } /> }
{ isLoggedIn && < Home onLogout = { logoutHandler } /> }
</ main >
</ React.Fragment >
);
}
export default App ;
true라고 저렇게 적어도 값은 string 값으로 들어간다고함.
boolean true랑 string true는 완전히 다른값이다.
그래서 헷갈리지않게 true -> '1' 로 바꾼다고함
로그아웃을 할 때 이 값을 지워주지않으면?
그러면 브라우저는 isLoggedIn 즉 이즈 로그드인을 로컬스토리지에 그대로 계속 갖고있는거예요.
다음번에 내가 다시 들어왔을때 로그아웃을 했는지를 모르는거죠.
로그드아웃핸들러에도 로컬스토리지에서 이즈로그드인을 없애주는 로직을 추가해줘야함
제거할때는 그냥 key값만 넣어주면 된다고 함.
import React , { useEffect , useState } from 'react' ;
import Login from './components/Login/Login' ;
import Home from './components/Home/Home' ;
import MainHeader from './components/MainHeader/MainHeader' ;
function App () {
const [ isLoggedIn , setIsLoggedIn ] = useState ( false );
useEffect (() => {
//만약 로그인이 되어있지않다면 isLoggedIn = true
//만약 로그인이 되어있지않다면 isLoggedIn = false
}, []);
const loginHandler = ( email , password ) => {
localStorage . setItem ( 'isLoggedIn' , '1' );
setIsLoggedIn ( true );
};
const logoutHandler = () => {
localStorage . removeItem ( 'isLoggedIn' )
setIsLoggedIn ( false );
};
return (
< React.Fragment >
< MainHeader isAuthenticated = { isLoggedIn } onLogout = { logoutHandler } />
< main >
{ ! isLoggedIn && < Login onLogin = { loginHandler } /> }
{ isLoggedIn && < Home onLogout = { logoutHandler } /> }
</ main >
</ React.Fragment >
);
}
export default App ;
application>storage에 있음.
import React , { useEffect , useState } from 'react' ;
import Login from './components/Login/Login' ;
import Home from './components/Home/Home' ;
import MainHeader from './components/MainHeader/MainHeader' ;
function App () {
const [ isLoggedIn , setIsLoggedIn ] = useState ( false );
useEffect (() => {
//만약 로그인이 되어있지않다면 isLoggedIn = true
const storedUserLoggedInInfo = localStorage . getItem ( 'isLoggedIn' );
console . log ( storedUserLoggedInInfo );
//만약 로그인이 되어있지않다면 isLoggedIn = false
}, []);
const loginHandler = ( email , password ) => {
localStorage . setItem ( 'isLoggedIn' , '1' );
setIsLoggedIn ( true );
};
const logoutHandler = () => {
localStorage . removeItem ( 'isLoggedIn' );
setIsLoggedIn ( false );
};
return (
< React.Fragment >
< MainHeader isAuthenticated = { isLoggedIn } onLogout = { logoutHandler } />
< main >
{ ! isLoggedIn && < Login onLogin = { loginHandler } /> }
{ isLoggedIn && < Home onLogout = { logoutHandler } /> }
</ main >
</ React.Fragment >
);
}
export default App ;
이건 login.js
import React , { useState } from 'react' ;
import Card from '../UI/Card/Card' ;
import classes from './Login.module.css' ;
import Button from '../UI/Button/Button' ;
const Login = ( props ) => {
const [ enteredEmail , setEnteredEmail ] = useState ( '' );
const [ emailIsValid , setEmailIsValid ] = useState ();
const [ enteredPassword , setEnteredPassword ] = useState ( '' );
const [ passwordIsValid , setPasswordIsValid ] = useState ();
const [ formIsValid , setFormIsValid ] = useState ( false );
const emailChangeHandler = ( event ) => {
setEnteredEmail ( event . target . value );
setFormIsValid (
event . target . value . includes ( '@' ) && enteredPassword . trim () . length > 6
);
};
const passwordChangeHandler = ( event ) => {
setEnteredPassword ( event . target . value );
setFormIsValid (
event . target . value . trim () . length > 6 && enteredEmail . includes ( '@' )
);
};
const validateEmailHandler = () => {
setEmailIsValid ( enteredEmail . includes ( '@' ));
};
const validatePasswordHandler = () => {
setPasswordIsValid ( enteredPassword . trim () . length > 6 );
};
const submitHandler = ( event ) => {
event . preventDefault ();
props . onLogin ( enteredEmail , enteredPassword );
};
return (
< Card className = { classes . login } >
< form onSubmit = { submitHandler } >
< div
className = { `${ classes . control } ${
emailIsValid === false ? classes . invalid : ''
}` }
>
< label htmlFor = "email" > 이메일 </ label >
< input
type = "email"
id = "email"
value = { enteredEmail }
onChange = { emailChangeHandler }
onBlur = { validateEmailHandler }
/>
</ div >
< div
className = { `${ classes . control } ${
passwordIsValid === false ? classes . invalid : ''
}` }
>
< label htmlFor = "password" > 비밀번호 </ label >
< input
type = "password"
id = "password"
value = { enteredPassword }
onChange = { passwordChangeHandler }
onBlur = { validatePasswordHandler }
/>
</ div >
< div className = { classes . actions } >
< Button type = "submit" className = { classes . btn } disabled = { ! formIsValid } >
로그인
</ Button >
</ div >
</ form >
</ Card >
);
};
export default Login ;
다섯개의 state를 가지고 관리
제거할때는 그냥 key값만 넣어주면 된다고 함.
51강 practice/4-6
