React

클래스형 컴포넌트 상태관리 JSON & AXIOS

🕵️‍♀️이번 수업은 클래스형 컴포넌트에서 AXIOS를 가져와서 구현한다.

전체 코드

(()=>{
    class AppComponent extends React.Component {
        constructor(props){
            super(props);
            this.state = {
                title:'주소를 JSON 데이터 AXIOS',
                arr:{
                    번호:001,
                    이름:'주주'
                },
                arr2:[
                    {번호:1,이름:'Aㅇㅇ', 연락처:'010-1111-1111'},
                    {번호:2,이름:'Bㅇㅇ', 연락처:'010-2222-2222'},
                    {번호:3,이름:'Cㅇㅇ', 연락처:'010-3333-3333'},
                ],
                회원:[],
                성적표:[],
                주소록:[]
            }
        }
        axiosfn = () => {
            axios.get('./data/member.json')
            .then((response)=>{
                this.setState({
                    회원: response.data.회원
                })
                console.log(response.data.회원);
                console.log(this.state.회원);

                this.setState({
                    성적표: response.data.성적표
                })
                console.log(response.data.성적표);
                console.log(this.state.성적표);
                this.state.성적표.map(function(item){
                    console.log(item);
                })
                this.setState({
                    주소록: response.data.주소록
                })
                console.log(response.data.주소록);
                console.log(this.state.주소록);
            })
            .catch((error)=>{console.log('오류',error)})
        }
        /* 생명주기 마운트 life cycle*/
        componentDidMount(){
            this.axiosfn();
        };
        render() {
            const result=this.state.arr2.map(function(item){
                return(
                    <tr>
                        <td>{item.번호}</td>
                        <td>{item.이름}</td>
                        <td>{item.연락처}</td>
                    </tr>
                )
            })
            const result2=this.state.회원.map(function(item){
                return(
                    <tr>
                        <td>{item.이름}</td>
                        <td>{item.거주지}</td>
                        <td>{item.취미}</td>
                    </tr>
                )
            })
            return (
                <div id='app'>
                    <div>
                        {this.axiosfn}
                    </div>
                    <h1>{this.state.title}</h1>
                    <h2>{this.state.arr.번호}</h2>
                    <h2>{this.state.arr.이름}</h2>
                    <table>
                        <thead>
                            <tr>
                                <th>번호</th>
                                <th>이름</th>
                                <th>연락처</th>
                            </tr>
                        </thead>
                        <tbody>
                            {result}
                        </tbody>
                    </table>
                    <div>
                        <table>
                            <thead>
                                <tr>
                                    <th>이름</th>
                                    <th>거주지</th>
                                    <th>취미</th>
                                </tr>
                            </thead>
                            <tbody>
                                {result2}
                            </tbody>
                        </table>
                    </div>
                </div>
            );
        }
    }
    ReactDOM.render(
        <AppComponent/>,
        document.getElementById('root')
    )
})()

member.json

{
    "회원":[
        {"이름":"가ㅇㅇ","거주지":"화성","취미":["잠자기","먹기"]},
        {"이름":"나ㅇㅇ","거주지":"평택","취미":["독서","영화보기"]},
        {"이름":"다ㅇㅇ","거주지":"시흥","취미":["영화보기","맛집가기"]},
        {"이름":"라ㅇㅇ","거주지":"시흥","취미":["등산","영화보기"]},
        {"이름":"마ㅇㅇ","거주지":"화성","취미":["수영","독서","등산"]},
        {"이름":"바ㅇㅇ","거주지":"오산","취미":["등산","맛집가기"]},
        {"이름":"사ㅇㅇ","거주지":"종로","취미":["잠자기","음악"]}
    ],
    "성적표":[
        {"이름":"가ㅇㅇ","국어":100,"영어":100,"수학":100},
        {"이름":"나ㅇㅇ","국어":100,"영어":100,"수학":100},
        {"이름":"다ㅇㅇ","국어":100,"영어":100,"수학":100},
        {"이름":"라ㅇㅇ","국어":100,"영어":100,"수학":100},
        {"이름":"마ㅇㅇ","국어":100,"영어":100,"수학":100},
        {"이름":"바ㅇㅇ","국어":100,"영어":100,"수학":100},
        {"이름":"사ㅇㅇ","국어":100,"영어":100,"수학":100}
    ],
    "주소록":[
        {"이름":"가ㅇㅇ","주소":"서울시 강남구", "전화":"010-1234-1234"},
        {"이름":"나ㅇㅇ","주소":"서울시 강남구", "전화":"010-1234-1234"},
        {"이름":"다ㅇㅇ","주소":"서울시 강남구", "전화":"010-1234-1234"},
        {"이름":"라ㅇㅇ","주소":"서울시 강남구", "전화":"010-1234-1234"},
        {"이름":"마ㅇㅇ","주소":"서울시 강남구", "전화":"010-1234-1234"},
        {"이름":"바ㅇㅇ","주소":"서울시 강남구", "전화":"010-1234-1234"},
        {"이름":"사ㅇㅇ","주소":"서울시 강남구", "전화":"010-1234-1234"}
    ]
}

👨‍💻전체 코드 구성은 위와 같고 컴포넌트가 하나이므로 순번을 매기며 복습을 하면서 작성한다

---

AppComponent (최상위 컴포넌트)

#01

(()=>{
    class AppComponent extends React.Component {
        constructor(props){
            super(props);
            this.state = {
                title:'주소를 JSON 데이터 AXIOS',
                arr:{
                    번호:1,
                    이름:'주주'
                },
                arr2:[
                    {번호:1,이름:'Aㅇㅇ', 연락처:'010-1111-1111'},
                    {번호:2,이름:'Bㅇㅇ', 연락처:'010-2222-2222'},
                    {번호:3,이름:'Cㅇㅇ', 연락처:'010-3333-3333'},
                ],
                회원:[],
                성적표:[],
                주소록:[]
            }
        }

클래스형 컴포넌트를 만들어주고 AppComponent 를 만들어 준다. 생성자 함수 constructor로 state값을 초기화하기위해 적어준다.

---

#02

axiosfn = () => {
            axios.get('./data/member.json')
            .then((response)=>{
                this.setState({
                    회원: response.data.회원
                })
                console.log(response.data.회원);
                console.log(this.state.회원);

                this.setState({
                    성적표: response.data.성적표
                })
                console.log(response.data.성적표);
                console.log(this.state.성적표);
                this.state.성적표.map(function(item){
                    console.log(item);
                })
                this.setState({
                    주소록: response.data.주소록
                })
                console.log(response.data.주소록);
                console.log(this.state.주소록);
            })
            .catch((error)=>{console.log('오류',error)})
        }

다음 data폴더안에 json을 불러오기 위해 axiosfn 함수를 만든다 비동기 처리로 불러올때는 get , then , catch 를 쓴다.

get()

get : 가져오는 경로를 작성한다.
('./data/member.json')

then()

then : 가져오는데 성공했다면 reponse를 지정하고 setState값 (변하는 값) 을 초기 state 인

회원:[],
성적표:[],
주소록:[]

에 넣어준다.

this.setState({
	회원: response.data.회원
    })
this.setState({
	성적표: response.data.성적표
    })

를 넣어주고 성적표는 map 반복문을 쓴다.

this.state.성적표.map(function(item){
                    console.log('성적표map:',item);
                })

성적표는 map함수를 썼기 때문에 콘솔로그에 전부 다 나온다. 회원과 주소록은 배열로 나타나고 성적표는 맵함수 썼기 때문에 전부 나온다

이어서

this.setState({
               주소록: response.data.주소록
             })

주소록도 setState에 넣어주고 then 문을 닫는다.

catch()

catch문은 error가 발생했을시 , 비동기처리 실패시 나타내는 함수이다.

catch((error)=>{console.log('오류',error)})

이렇게 사용하여 비동기처리 실패시에 콘솔창에서 확인 가능하다.

---

#03

componentDidMount(){
            this.axiosfn();
        };
        render() {
            const result=this.state.arr2.map(function(item){
                return(
                    <tr>
                        <td>{item.번호}</td>
                        <td>{item.이름}</td>
                        <td>{item.연락처}</td>
                    </tr>
                )
            })
            const result2=this.state.회원.map(function(item){
                return(
                    <tr>
                        <td>{item.이름}</td>
                        <td>{item.거주지}</td>
                        <td>{item.취미}</td>
                    </tr>
                )
            })
            return (
                <div id='app'>
                    <div>
                        {this.axiosfn}
                    </div>
                    <h1>{this.state.title}</h1>
                    <h2>{this.state.arr.번호}</h2>
                    <h2>{this.state.arr.이름}</h2>
                    <table>
                        <thead>
                            <tr>
                                <th>번호</th>
                                <th>이름</th>
                                <th>연락처</th>
                            </tr>
                        </thead>
                        <tbody>
                            {result}
                        </tbody>
                    </table>
                    <div>
                        <table>
                            <thead>
                                <tr>
                                    <th>이름</th>
                                    <th>거주지</th>
                                    <th>취미</th>
                                </tr>
                            </thead>
                            <tbody>
                                {result2}
                            </tbody>
                        </table>
                    </div>
                </div>
            );
        }
    }
    ReactDOM.render(
        <AppComponent/>,
        document.getElementById('root')
    )
})()

---

componentDidMount()

constructor생성자가 먼저 읽어지고난 다음 밑에 쓰여질 render를 읽어와서 axiosfn 함수를 읽어주지 못하였다.
순서를 보자면 componentDidMount를 쓰기전에는
1. constructor
2. render
까지만 읽고 더이상 읽어주지 못했다.

componentDidMount를 사용하여 axiosfn함수를 넣어준다면
1. constructor
2. render
3. axiosfn 가 읽어졌다!
4. render <- 다시 읽어진다.

axiosfn함수를 읽게 되어서 테이블에 setState의 값들이 들어가게 된다.

render()
각 데이터들이 테이블화가 되어 들어오게될 자리이다.

우선 tbody에 넣을 변수를 지정한다

const result=this.state.arr2.map(function(item){
                return(
                    <tr>
                        <td>{item.번호}</td>
                        <td>{item.이름}</td>
                        <td>{item.연락처}</td>
                    </tr>          
                )
            })

const result2=this.state.회원.map(function(item){
                return(
                    <tr>
                        <td>{item.이름}</td>
                        <td>{item.거주지}</td>
                        <td>{item.취미}</td>
                    </tr>
                )
            })

result는 state 초기값 arr2를 맵함수를 실행하여 각 td에 item의 번호 , 이름 , 연락처를 넣었다.

result2는 data폴더의 member.json에서 가져온 회원데이터를 map함수를 실행하여 각 td에 item의 이름 , 거주지 , 취미를 넣었다.

return (
  		<div id='app'>
    		<div>
              {this.axiosfn}
    		</div>
    		<h1>{this.state.title}</h1>
    		<h2>{this.state.arr.번호}</h2>
    		<h2>{this.state.arr.이름}</h2>
    		<table>
                <thead>
                    <tr>
                      <th>번호</th>
                      <th>이름</th>
                      <th>연락처</th>
                    </tr>
                </thead>
                <tbody>
                  	{result}
                </tbody>
    		</table>
    		<div>
              <table>
                <thead>
                    <tr>
                      <th>이름</th>
                      <th>거주지</th>
                      <th>취미</th>
                    </tr>
                </thead>
                <tbody>
                  	{result2}
                </tbody>
              </table>
    		</div>
  		</div>
);

테이블의 html 구성이다. 여기에 h1 , h2 에 state 초기값 title과 arr 의 번호 이름을 넣어준다.

각 thead에 번호 , 이름 , 연락처 / 이름 , 거주지 , 취미 를 적어주고.

위에서 만든 각 변수들 result를 넣어준다.

---