컴포넌트는 HTML을 반환하는 함수 potato라는 컴포넌트를 만들고 렌더링 시키면 에러가나는 이유는(오타가있지만 신경쓰지않겠다😅) react application은 하나의 컴포넌트만 렌더링할 수 있다. 여기선 App, Potato두개의 컴포넌트 그렇다면 App옆에 대신 안에 넣어보자. 정상작동! 그나저나 포테이토 넘 귀엽자나.. 이렇게 하나의 파일에서 컴포넌트 생성도 가능하다. ++ 참고로 업데이트되어 이젠 React.strict으로 감싸준다면 두개의 컴포넌트도 렌더링 가능하다.

[Spinner.js] [bucket.js] [App.js] render안의 내용이 로드가 되었을때만 나오고 아니면 스피너가 나오게한다. import Spinner from "./Spinner"; render() { return ( 내 버킷리스트 {!this.props.is_loaded? () :( {/* 컴포넌트를 넣어줍니다. */} {/* */} {/* Route 쓰는 법 2가지를 모두 써봅시다! */} ( )} /> {/* */} {/* 뒤로가기 기능까지 추가해보기 */} ()}/> {/* 인풋박스와 추가하기 버튼을 넣어줬어요. */} 추가하기 { window.scrollTo({top:0, left:0, behavior: "smooth"}); }}>위로가기 )} ); } }

부트스트랩처럼 이미 다 만들어진 ui를 가져다 쓸 수 있다. styled-components쓰던 것처럼 사용 가능 yarn add @material-ui/core @material-ui/icons https://material-ui.com/ Material-UI: A popular React UI framework React components for faster and easier web development. Build your own design system, or start with Material Design. material-ui.com Detail.js페이지의 버튼을 바꿀것이니 일단 import해준다. import Button from "@material-ui/core/Button"; imp..

[bucket.js] import {firestore} from "../../firebase"; 1. 데이터 load하기(이니셜스테이트가 첫 화면에서 나타나고있는데 대신 파이어스토어의 데이터를 불러온다.) 파이어스토어의 컬렉션들을 전역변수로 만들어놓고 시작 파이어베이스랑 통신하는 함수 만든다 [App.js] 파일에서 import load bucketFB 호출할 수 있도록 그리고 componentDidMount에서 호출 this.props.load(); 콘솔로 찍어보고 잘 나오면 이제 리덕스 스토어에 넣어준다. = 리듀서 만져준다. (액션이 디스패치됐을때 리듀서에서 처리한다. 그러니 디스패치를 먼저 해준다.) 리듀서 생성 2. 데이터 추가하기 [bucket.js] 리듀서 고쳐주기 원랜 버킷이라는곳에 텍스트..

firestore 데이터를 리덕스 스토어에 넣으려면 비동기통신을 하는데 이때 미들웨어가 필요하다. yarn add redux-thunk 리덕스 데이터를 수정할때 디스패치를 사용해서 액션을 감시했다. 액션이 디스패치(발생)되면 리듀서를 실행했다. = 액션이 디스패치되고 리듀서에서 처리한다. = 동기통신(하나가 끝나면 다음것 실행) 파이어스토어에서 우리가 데이터를 달라고 응답을 보내면 파이어스토어가 우리에게 데이터를 줄때까지 기다려야한다. 그래야 받아온 데이터를 리듀서에 넣고 상태값 업데이트 하라고 한다. 이때 미들웨어는 이 사이에서 사전작업이다. 어떤 액션이 디스패치되고 리듀서에서 처리하기 전 이 사이에 사전 작업을 할 수있도록 도와주는 중간다리 redux-thunk는 미들웨어 중 하나 configStor..