[to-do-list] #1. 초기 설정

https://nomadcoders.co/nwitter/

All Courses – 노마드 코더 Nomad Coders

트위터 클론코딩은 이미 했고, 이를 사용해서 to do list를 만들어보자.

두번 들으니까 이제 슬슬 이해가 간다.

 

~2.2까지 들은 것 정리~

firebase를 곁들인 React로 정리!

2.2는 니꼬쌤이 정리해주시는 게 있어서 2.2까지 듣고 끊는게 나을듯

(리액트 초보자의 이해를 위한 글이라 허접함)

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'components/App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

index는 말해뭐해 index

<App />-> App이 적혀있는 함수로 이동

 

App.js

import React, { useState } from 'react';
import AppRouter from 'components/Router';
import {authService} from 'fbase';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(authService.currentUser);
  return (
  <>
    <AppRouter isLoggedIn={isLoggedIn} />
    <footer>&copy; {new Date().getFullYear()} Jueunkim</footer>
  </>
  )
};

export default App;

AppRouter로 이동하는데 이때, isLoggedIn을 통해서 값이 전달됨.

 

set의 역할

 setValue = (value) => { this.value = value; }

 

Router.js

import React, { useState } from "react";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import Auth from "../routes/Auth";
import Home from "../routes/Home";

const AppRouter = ({isLoggedIn}) => {
    return(
        <Router>
            <Switch>
                {isLoggedIn ? (
                <>
                    <Route exact path="/"> 
                        <Home />
                    </Route>

                </> 
                ) : (
                <Route exact path="/">
                    <Auth />
                </Route>
                )};
            </Switch>
        </Router>
    )
};

export default AppRouter;

받아온 값이 isLoggedIn으로 전달 됨.

로그인 될 시 Home으로, 아닐시 Auth로 이동되게 함.

 

 

Auth.js

import React, { useState } from "react";
//로그인전에 나타남
const Auth = () =>{
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    const onChange =(event) => {
        const {target:{name,value}} = event;
        if(name === "email"){
            setEmail(value);
        } else if(name==="password"){
            setPassword(value);
        }
    };

    const onSubmit = (event) => {
        event.preventDefault();
    };

    return  (
        <div>
            <form onSubmit={onSubmit}>
                <input name="email" type ="text" placeholder="Email" required 
                value={email} onChange={onChange}/>
                <input name ="password" type="password" placeholder="Password" required 
                value={password} onChange={onChange}/>
                <input type="submit" value="Log In" />
            </form>
        
            <div>
                <button>Continue with Google</button>
                <button>Continue with Github</button>
            </div>
        </div>
        );
}
export default Auth;

로그인 안되면 Auth로 오는데 아직 로그인을 구현안해서 여기로 온다.

 

onChange

키를 누르는 순간 = 값이 바뀔때마다 onChange를 쓰게 된다.

event는 무슨 일이 일어났는가?라는 의미이고, 여기서는 input이 변경되었다라는 의미!

event로 부터 많은 정보 중 하나가 target 변경이 일어난 부분이고, target에는 name과 value가 들어가있다.

name은 내가 지정한 것, value는 키보드를 통해 입력된 값이다. 그래서 name이 email이면 state인 email을 변경하게 되고, 그 외에는 state인 password를 바꾸게 된다.

그래서 기본적으로 input을 변경할 때마다 onChange funcation 호출하게 된다. 그 function은 input에 입력한 값들을 토대로 저장시킨다. input은 절대 letter를 추가하지 않고, value를 받아온다.

input안에 value가 없으면 값이 바뀌지 않는다 ! 즉, 작동하지 않는다!! input의 value는 state에 저장되고, state도 바뀌게 된다. 그래서 onChage function을 작성하지 않으면 아무리 입력해도 값이 변하지 않는다.

 

확인하고 싶으면 target 밑에 작성하자. 값을 쓸때마다 값이 변하는 것 확인 가능!

console.log(value); 

 

event.preventDefault();

이벤트 리스너를 만든 이유다. 누군가 form을 submit할 때마다 event를 가져다가 preventDefault! 

preventDefault란 기본행위가 실행되는 걸 원치않는 의미다.

따라서, 이걸 추가하지 않으면 쓸 때마다 새로고침이 되고, 순간마다 코드들이 사라진다.

 

 

깃허브 : https://github.com/Jueunkim429/to-do-list/commit/81c8b65818932ced3b15bac78f5971bda11f8378