CLASS web

ReactJS

axios 데이터 출력하기

axios 데이터 출력하기

앞에서 했던 axios를 통해 받아온 데이터를 출력하겠습니다.

자, 그럼 다시 Device컴포넌트가 출력되도록 App.js파일을 수정합시다.

/src/App.js

import React from 'react';
import Device from './Device';

function App() {

    return (
        <div>
            <Device />
        </div>

    );
}

export default App;

다음과 같이 다시 Device컴포넌트가 나타납니다.

output axios data

그럼 Device.js 파일을에 state를 추가합시다.

state = {

};

Device데이터가 들어갈 변수는 data로 하겠습니다.

그럼 state를 다음과 같이 작성합니다.

state = {
    data : [],
};

배열을 적용하기때문에 []를 값으로 넣었습니다.

위의 state를 적용하면 코드는 다음과 같습니다.

/src/Device.js

import React, { Component } from 'react';
import axios from 'axios';

class Device extends Component {
    constructor(props) {
        super(props);
        console.log('in constructor');
    }

    state = {
        data : [],
    };

    getMyData = async () => {
        const data = await axios.get('https://www.pinkcoding.com/data/external/ReactJS/axios/');
        console.log('data is ' + JSON.stringify(data));
    };

    componentDidMount() {
        console.log('in componentDidMount');
        this.getMyData();
    }

    componentDidUpdate() {
        console.log('in componentDidUpdate');
    }

    componentWillUnmount() {
        console.log('in componentWillUnmount');
    }

    render() {
        return <div>Here is Device Component</div>;
    }
}

export default Device;

당연하지만 아직까지 화면의 결과는 변한게 없습니다.

output axios data

axios를 통해 받아온 데이터로 디바이스 목록까지 접근하려면 .연산자를 많이 사용해야합니다.

즉, getMyData함수 안의 콘솔로그 소스에 myDeviceData만 출력한다면...

console.log('data is ' + JSON.stringify(data.data.myDeviceData));

위와같이 접근 할 수 있습니다.

이 코드를 줄이기 위해 getMyData함수를 수정하겠습니다.

let data = await axios.get('https://www.pinkcoding.com/data/external/ReactJS/axios/');
data = data.data.myDeviceData;
console.log('data is ' + JSON.stringify(data));

const대신 let을 사용했습니다.

const는 상수이므로 값이 변하지 않기 때문에 다시 값을 대입하려면 사용할 수 없습니다.

콘솔로그 소스가 더 줄어들었죠?

그럼 이 값을 state에 적용합니다.

코드는 다음과 같습니다.

this.setState({data});

간단하죠?

그럼 최종적으로 getMyData함수는 다음과 같습니다.

let data = await axios.get('https://www.pinkcoding.com/data/external/ReactJS/axios/');
data = data.data.myDeviceData;
console.log('data is ' + JSON.stringify(data));
this.setState({data});

getMyData함수를 수정한 Device.js파일의 코드는 다음과 같습니다.

/src/Device.js

import React, { Component } from 'react';
import axios from 'axios';

class Device extends Component {
    constructor(props) {
        super(props);
        console.log('in constructor');
    }

    state = {
        data : [],
    };

    getMyData = async () => {
        let data = await axios.get('https://www.pinkcoding.com/data/external/ReactJS/axios/');
        data = data.data.myDeviceData;
        console.log('data is ' + JSON.stringify(data));
        this.setState({data});
    };

    componentDidMount() {
        console.log('in componentDidMount');
        this.getMyData();
    }

    componentDidUpdate() {
        console.log('in componentDidUpdate');
    }

    componentWillUnmount() {
        console.log('in componentWillUnmount');
    }

    render() {
        return <div>Here is Device Component</div>;
    }
}

export default Device;

화면상에 달라진건 없지만 콘솔로그에서는 디바이스 정보만 표시됩니다.

output axios data

그럼 data state를 이번엔 출력해봅시다.

앞에서와 같이 map함수를 사용합니다.

state에 접근하기 위해 this.state를 사용했던거 기억하시죠?

render()함수안에 다음의 코드를 넣어서 결과를 봅시다.

console.log('is ' + JSON.stringify(this.state.data));

그럼 render() 함수는 다음과 같습니다.

render() {
    console.log('is ' + JSON.stringify(this.state.data));
    return <div>Here is Device Component</div>;
}

결과를 보면 다음과 같습니다.

output axios data

위의 이미지에 보이는 노란박스가 render()함수 안에서 실행된 내용입니다.

그럼 화면에 출력합시다.

render함수의 return문을 수정합니다.

return (
<div>
    {
    this.state.data.map((myDeviceData) => {
        return <p>name : { myDeviceData.name }</p>;
    })
    }
</div>
);

map함수안에서 데이터를 전달할 때 return문을 사용함을 잊지마세요.

자, 그럼 최종소스는 다음과 같습니다.

/src/Device.js

import React, { Component } from 'react';
import axios from 'axios';

class Device extends Component {
    constructor(props) {
        super(props);
        console.log('in constructor');
    }

    state = {
        data : [],
    };

    getMyData = async () => {
        let data = await axios.get('https://www.pinkcoding.com/data/external/ReactJS/axios/');
        data = data.data.myDeviceData;
        console.log('data is ' + JSON.stringify(data));
        this.setState({data});
    };

    componentDidMount() {
        console.log('in componentDidMount');
        this.getMyData();
    }

    componentDidUpdate() {
        console.log('in componentDidUpdate');
    }

    componentWillUnmount() {
        console.log('in componentWillUnmount');
    }

    render() {
        return (
            <div>
                {
                this.state.data.map((myDeviceData) => {
                    return <p>name : { myDeviceData.name }</p>;
                })
                }
            </div>
        );
    }
}

export default Device;
output axios data

결과와 같이 이제 우리는 axios를 통해서 가져온 데이터를 화면에 출력했습니다. Yeah~!~!~!~!

하지만 콘솔로그를 보면 다음의 경고문구가 있습니다.

index.js:1 Warning: Each child in a list should have a unique "key" prop.

ReactJS는 각 데이터마다 고유번호가 있어야합니다.

그 값은 key이름을 사용합니다.

p태그의 속성에 key속성을 추가하고 key값을 입력해줍니다.

Device.js 파일의 render에 있는 다음의 코드를 수정할게요.

return <p>name : { myDeviceData.name }</p>;

p태그에 key속성을 추가하고 key값 적용하면...

return <p key={ myDeviceData.key }>name : { myDeviceData.name }</p>;

그럼 render함수의 최종코드는 다음과 같습니다.

아니, 혹시 모르니 Device.js파일의 전체 코드를 표시할게요.

혹시 모른다는 의미는 누군가는 헤멜수 있기 때문입니다.

/src/Device.js

import React, { Component } from 'react';
import axios from 'axios';

class Device extends Component {
    constructor(props) {
        super(props);
        console.log('in constructor');
    }

    state = {
        data : [],
    };

    getMyData = async () => {
        let data = await axios.get('https://www.pinkcoding.com/data/external/ReactJS/axios/');
        data = data.data.myDeviceData;
        console.log('data is ' + JSON.stringify(data));
        this.setState({data});
    };

    componentDidMount() {
        console.log('in componentDidMount');
        this.getMyData();
    }

    componentDidUpdate() {
        console.log('in componentDidUpdate');
    }

    componentWillUnmount() {
        console.log('in componentWillUnmount');
    }

    render() {
        return (
            <div>
                {
                this.state.data.map((myDeviceData) => {
                    return <p key={ myDeviceData.key }>name : { myDeviceData.name }</p>;
                })
                }
            </div>
        );
    }
}

export default Device;
output axios data

자 이제 오류없이 깔끔하게 데이터가 표시됩니다.. ^^





댓글 0개

정렬기준

PinkCoding

PinkCoding

X

PinkCoding

Web Scratch Pad

X

loading

            
            
        

컨텐츠로 돌아가기