728x90
반응형
트위터 클론코딩(with firebase) - 04
(심층)리액트2023. 2. 7. 10:13트위터 클론코딩(with firebase) - 04

5. NWEETING 5-1. Form and Database Setup - Home.js에 input랑 useState 추가. 새로 생성해준 form 태그 내부에 input을 생성해줌. 하나는 text type의 input을, 하나는 submit type의 input을 생성해줌. - text type의 input : 최대 글자수를 120자로 제한해둠. 그리고 onChange event 실행시 onChange 함수가 함께 실행되도록 함. value는 nweet로 설정하여 nweet 값이 input에 들어오도록 함. useState를 하나 생성해줌. const [nweet, setNweet] = useState(""); 그리고 onChange 함수를 선언해준 후 매개변수로 event를 넣어줌. 함수 내부에..

트위터 클론코딩(with firebase) - 03
(심층)리액트2023. 2. 3. 00:21트위터 클론코딩(with firebase) - 03

4. Authentication 4-1. Using Firebase Auth Router.js에 있던 useState를 App.js로 옮겨줌.(Router로서의 기능만 하도록 하기 위해서) App.js에 useState를 import한 후, Router에 isLoggedIn을 prop으로 전달해줌. App,js 안에 Router.js를 배치시켜주는 이유는? 다른 컴포넌트도 함께 사용 가능하기 때문. 페이지가 바뀌는 Router.js 영역과 계속하여 고정되어 있는 컴포넌트 영역을 같이 배치할 수 있음. (ex. Header, Footer) 이런 식으로 사용 가능. import { useState } from "react"; import "./App.css"; import Router from "./shar..

728x90
반응형
image