[React.js] Firebase Realtime 데이터베이스 불러오기

Firebase 목록

 

[REACT.JS] CREATE-REACT-APP 없이 REACT.JS 프로젝트 생성하기

[GIT] GITHUB에 프로젝트 올리기 (GIT COMMAND 사용)

[REACT.JS] ROUTER 적용하기 [MULTIPLE ROUTER]

[FIREBASE] FIREBASE 데이터 베이스 생성 [REALTIME DATABASE]

 

Firebase에서 생성한 Realtime 데이터베이스를 React.js에서 불러옵니다.

 

query-string 모듈 설치

$ yarn add query-string

src/components/About.js

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import OperatingSystem from './OperatingSystem';


const apiUrl = 'https://firstproject-a04bf.firebaseio.com/'

class About extends React.Component {

    constructor() {
        super()
        this.state = {
            productions: {}
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        return nextState.productions != this.state.productions
    }

    componentDidMount() {
        this._getApi()
    }

    // Firebase Realtime Database를 가지고 온다.
    _getApi = () => {
        fetch(`${apiUrl}/OS.json`)
            .then(res => {
                if (res.status !== 200) {
                    throw new Error(res.statusText)
                }
                return res.json()
            })
            .then(productions => this.setState({productions: productions}))
    }

    render() {
        return (
            <div>
                <h1>About</h1>

                <ul>
                    {
                        Object.keys(this.state.productions).map(id => {
                            const product = this.state.productions[id]
                            return (
                                <li key={id}>
                                    <Link to={{
                                        pathname:`${this.props.match.url}/${product.name}`,
                                        search: `?company=${product.company}`
                                    }}>
                                        {product.name} [by {product.company}]
                                    </Link>
                                </li>
                            )
                        })
                    }
                </ul>

                <Route path={`${this.props.match.path}/:os`} component={OperatingSystem} />
                <Route exact path={this.props.match.path}
                    render={() => <h3>OS를 선택하세요.</h3>}
                />
            </div>
        );
    }
}

export default About;

 

/src/components/OperationSystem.js

import React from 'react';
import queryString from 'query-string'

class OperatingSystem extends React.Component { 
    
    constructor() {
        super()
        this.state = {
            os: ''
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            os: queryString.parse(nextProps.location.search)
        })
    }

    componentDidMount() {
        this.setState({
            os: queryString.parse(this.props.location.search)
        })
    }

    render() {
        return (
            <div>
                <h3>{this.props.match.params.os}</h3>
                <p>Company: {this.state.os.company}</p>
            </div>
        );
    }
}

export default OperatingSystem;

 

Firebase 목록