저번시간에는 Ajax가 무엇인지, 그리고 Ajax를 이용해서 컴포넌트를 초기화하고, 상태변경 해보았다.
요번시간에는 저번 실습 내용을 바탕으로 데이터 종속성을 제거하는 리팩토링 실습을 해보려 한다 :)
책에서 말하길,
Nav 컴포넌트의 componentDidMount 라는 메서드가 호출될때, fetch API를 호출하는 ajax의 방법도 좋지만 Nav 컴포넌트가 내부적으로 Ajax 호출 기능까지 가지면 기능이 상당히 많은 컴포넌트가 된다고 한다.
이렇게 되면 다른 곳에 가져다 쓸 수 없기 때문에 Nav 컴포넌트가 어떤 특정한 데이터에 종속되지 않게 하는 것이 좋다고 한다.
언제든지 네비게이션 컴포넌트를 다른 곳에 가져다 쓸 수 있으니, 데이터를 종속시키지 않게 하고 그 겉부분만 가져다 사용하면 재사용성이 높아지기 때문에 미래의 나 자신을 위해 요번 실습은 앞으로 작업을 할때에도 생각하면서 코드를 짜는게 좋겠다!
✏️ 디커플링(decoupling)
컴포넌트가 어떤 특정한 데이터에 종속되지 않게 하는것을 의미한다. 그래서 컴포넌트를 만들때, 데이터와는 상관없이 데이터를 표현하기만 하는 컴포넌트를 만드는 것을 '디커플링(decoupling)'이라고 한다.
📍 프레젠테이셔널(presentational) 컴포넌트
: 데이터에 종속되지 않은, 순수하게 보여주는 역할만 담당하는 컴포넌트
📍 컨테이너(container) 컴포넌트
: 프레젠테이셔널 컴포넌트를 둘러싼 데이터를 처리하고 사용자의 상호작용 등을 처리하는, 어플리케이션에 완전히 종속된 컴포넌트
º
º
✒️
앞에서 언급했듯, Nav 컴포넌트는 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트의 기능을 모두 갖고 있다.
그래서 프레젠테이션을 담당하는 부분만 남기고, 컨테이너 기능은 이미 컨테이너 역할을 하는 ReactAjax 컴포넌트에 분산 시켜야 한다.
Article 컴포넌트가 프레젠테이셔널 컴포넌트를 이미 잘 나타내고 있는데, 코드를 잠깐 보면
class Article extends Component {
render(){
return(
<aritcle>
<h2>{this.props.title}</h2>
{this.props.desc}
</article>
);
}
}요렇게 props만 넘겨주면 다른곳에서도 재활용할 수 있는 보여주는 기능만 있고 다른 기능은 존재하지 않는다.
이렇게 프레젠테이셔널 컴포넌트로 Nav 컴포넌트를 만들어보자.
// ReactAjax.js 파일
import React, { Component } from 'react';
class Nav extends Component {
render(){
let listTag = [];
for(let i = 0; i < this.props.list.length; i++) {
const li = this.props.list[i];
listTag.push(<li key={li.id}><a href={li.id} data-id={li.id} onClick={function(e){
e.preventDefault();
console.log('trigger');
this.props.onClick(e.target.dataset.id);
}.bind(this)}>{li.title}</a></li>)
}
return(
<nav>
{listTag}
</nav>
);
}
}
class Article extends Component {
render(){
return(
<article>
<h2>{this.props.title}</h2>
{this.props.desc}
</article>
);
}
}
class ReactAjax extends Component {
state = {
article:{title:"Welcome", desc:"Hello, React & AJax"},
list: []
}
componentDidMount(){
fetch('list.json')
.then(function(result){
return result.json();
})
.then(function(json){
console.log(json);
this.setState({list:json});
}.bind(this));
}
render(){
return(
<div className="ReactAjax">
<h1>WEB</h1>
<Nav list={this.state.list} onClick={function(id){
fetch(id+".json")
.then(function(result){
return result.json();
})
.then(function(json){
this.setState({
article:{
title:json.title,
desc:json.desc
}
})
}.bind(this));
}.bind(this)}></Nav>
<Article title={this.props.title} desc={this.props.desc}></Article>
</div>
);
}
}
export default ReactAjax;원래 Nav 컴포넌트에 있던 componentDidMount 메소드를 ReactAjax 컴포넌트로 옮겼다. componentDidMount 메소드가 다루는 값이 state.list이기 때문에 state에 list도 넣어주었다.
그리고 Nav 컴포넌트에서는 list의 데이터를 props로 가져와 사용했다.
자, 이렇게 Nav 컴포넌트는 프레젠테이셔널 컴포넌트가 되었다. 그리고 ReactAjax 컴포넌트는 컨테이너 컴포넌트의 역할을해 데이터를 처리할 수 있게 되었다.
✏️ XML & JSON
fetch API를 호출 할 때, json 파일을 사용하게 되면서 그동안 XML과 JSON을 대충 알고 있어서 정확하게 개념 정리를 하고 넘어가려고 한다.
테이블과 같이 어떤 구조를 가진 정보를 한 줄의 텍스트로 표현해서 서버에 전달하는 데이터 형식이 XML, JSON 이다. 즉, 서버와 주고받는 적합한 데이터 형식인 텍스트를 기술하기 위한 데이터 형식이다.
주로 복잡합데이터(구조화된 데이터)를 다룰 때 이용한다. 구조는 문자열과 숫자 등의 순수값, 여러 데이터들이 나여된 배열, 항목들과 데이터로 이루어진 테이블 형태일 수도 있다.
📍 XML
'Extensible Markup Language'의 약자로 많은 응용 분야에서 데이터를 저장하고 전달하게 하는 데이터 형식이다. XML은 데이터를 저장하고 전달한 목적으로 만들어졌고, 저장되는 데이터의 구조를 기술하기 위한 언어이다. XML은 마크업언어를 정의하기 위한 언어라고 할 수 있다.
또한, 태그라는 형식을 사용하는데 코드가 HTML과 비슷하다. HTML이 XML형식으로 웹을 표현할 수 있도록 만든 언어이다. 그래서 XML을 마크업 언어라고 하기 보다, 마크업 언어를 정의하기 위한 언어라고 한다.
주석을 달 수도 있고, 태그를 통해 정보들을 보여주기때문에 중첩해서 작성할 수 있지만 태그를 열고 닫아야 하므로 아무래도 가독성이 좋지는 않다. 그래서 이런 단점을 보완하는 데이터 표기 방식인 JSON을 사용한다.
// XML 형식 예제
<address-book>
<entry>
<name>김철수</name>
<pic>face.gif</pic>
<address>000-000 00시 00구 00동 0가 00-000</address>
<tel>02-000-0000</tel>
<email>cheolsu@mm.hankook.ac.kr</email>
</entry>
<entry>
<name>김영희</name>
<pic>face2.gif</pic>
<address>000-000 00시 00구 00동 000빌라</address>
<tel preferred="true">02-000-0000</tel>
<tel>000-000-0000</tel>
<email>younghee@hankook.ac.kr</email>
</entry>
</address-book>📍 JSON
'JavaScript Object Notation'의 약자로 쉽게 데이터를 교환하고 저장하기 위해 만들어진 텍스트기반의 데이터 교환 표준이다. JSON은 자바스크립트 객체(key:value)표기법으로써, 간단하게 구조화된 정보를 표시 할 수 있다. 텍스트 기반 이기 때문에 어떠한 프로그래밍 언어에서도 JSON형식의 데이터를 읽고 사용할 수 있다.
중괄호({})와 더블코테이션("")을 사용한 데이터 형식이고 공백이나 종료태그로 인한 사이즈낭비가 없어서 용량을 절약할 수 있다. 그리고 XML과 다르게 주석을 달 수 없다.
// JSON 형식 예제
{
"Melon" : [ {
"Locaiton" : "Seoul",
"price" : 70000
}, {
"Location" : "Daejeon",
"price" : 55000
} ],
"Mango" : [ {
"Location" : "Cheongju",
"price" : 30000
}, {
"Location" : "Jeju",
"price" : 23000
} ]
}💡 무조건적으로 JSON이 좋은 것은 아니다.
: JOSN은 문법 오류에 취약하다고 한다. 그래서 데이터를 작성하다가 오타가 하나 나면 데이터 전체를 사용할 수 없게 된다. 하지만 XML은 태그를 이용해 닫는 태그 바깥쪽에 오타가 있더라도 컴퓨터가 읽을 수 있다.
그러므로 경우에 따라 선택해서 사용하면 된다.
출처
https://kr98gyeongim.tistory.com/108
https://velog.io/@brgndy/XML-%EA%B3%BC-JSON-%EC%A0%95%EB%A6%AC-%EB%B0%8F-%EB%B9%84%EA%B5%90
생활코딩! 리액트 프로그래밍 책
