[211024] React #06 : ajax(fetch)

생활코딩! React 리액트 프로그래밍 도서를 바탕으로 React 공부시작.

이번 진도는 280P ~ 305P.

목차로는 04. React & Ajax (챕터 04, 끝)

 

1. fetch API

그냥 json 파일 따로 만들어서 fetch API를 통해서 가져 온 거임.

fetch API Browser support

 

컴포넌트에 대한 초기화가 필요하다면,

componentDidMount 에 적용(Vue로 치면 mounted)

 

뭐, 대략 이런 식이랄까.

render() {
    let NavTag = null;
    if(this.state.list.isLoading){
        NavTag = <NowLoading/>;
    } else{
        NavTag = <Nav list={this.state.list.items} onClick={function(id){
            let newArticle = Object.assign({}, this.state.article, {isLoading: true});
            this.setState({article: newArticle});
            fetch(id+'.json')
                .then(function(res) {
                    return res.json();
                })
                .then(function(json){
                    this.setState({article: {item:{title: json.title, desc: json.desc}, isLoading: false}})
                }.bind(this));
        }.bind(this)}/>
    }
    
    return (
        <div>
            {NavTag}
        </div>
    )
}

NavTag 라는 변수로 return내부에 태그를 렌더링 하도록 정의하고,

this.state.list.isLoading 을 통해서 현재 데이터를 가져오는 중인지, 아닌지를 판별한다.

그리고 onClick을 통해서, fetch를 통해서 get으로 해당 URL(여기선 json)로부터 데이터를 가져오고 this.setState를 통해 state를 변경한다.

 

※ GET외에 메서드에 대한 fetch API 사용법은 Using Fetch - MDN을 참고하자

 

2. 프리젠테이션 컨테이너

어떤 특정 데이터에 종속되지않고, props로 전해받아 활용하거나 보여주는 역할만 하는 컴포넌트를 프리젠테이션(presentation) 컴포넌트라고 한다. 그리고 이런 프리젠테이션 컴포넌트에서 활용될 데이터를 처리하고 사용자의 인터랙션을 처리하며 애플리케이션에 종독된 컴포넌트를 컨테이너(container) 컴포넌트라고 한다. 즉, 데이터 처리의 주체를 누가 가질 것인가, 에 대한 구분이다.

 

그리고 이 과정에서 데이터로 인한 서로간의 연관성을 최소화하는 것을 디커플링(decoupling)이라고 한다.

데이터를 보여줄 애는 보여주기만하고,

데이터를 다루는 애는 다루는 것을 목적으로 하는 것이다.