[react] class private field 사용예시

서버와의 통신을 하는 동안 우리의 코드는 그동안 너무 많은 데이터를 보여줘왔다.
통신해야하는 주소, 주소의 param은 무엇으로 주어야하는지 등등..
이것을 조금 더 private하게 요청하는 방법으로 class의 private field를 사용해보았다.

// Videos.js

export default function Videos() {
	const {query} = useParams();
  	const [isLoading, error, data:videos] = useQuery(['videos', query],  		() => {
    	const youtube = new FakeYoutube();
      	return youtube.search(query);
    }
  	
  	return (
    ...
    )
}

fakeYoutube는 mock-data를 사용한다는 것을 명시하기 위함이다.
정의된 클래스는 아래와 같다.

// fakeYoutube.js

export default class fakeYoutube {
	async search(query) {
    	return query ? #videoBykeyword(query) : #popularVideo();
    }
    
    async #videoByKeyword(query) {
    	return await axios
          .get('/data/videoByKeyword.json')
      	  .then(res => res.data.items)
      	  .then(items => items.map(item => ({...item, id: item.id.videoId})))
      // 이런식으로 받아온 데이터를 통신 후 가공까지 해서 return 할 수도 있다.
    }
  
  	async #popularVideo() {
		return await axios
			.get('/data/popularVideo.json')
			.then(res => res.data.items);
	}
}

자바스크립트에서의 private field는 #으로 표기한다.
위와 같이 #으로 표기한 함수는 class내에서만 사용가능 하기 때문에 밖에서는 url이나 header, body부분이 노출되지 않는다는 장점이 있다.