TIL. tab

Today I learn

infinity scroll with tabs

이번 프로젝트에서 가장 공을 들인 탭과 무한스크롤이다.

이번 게시글에서는 tab에 관련해서 작성하려고 한다.
우선 탭은 3개가 있고 state에 저장해두고 컴포넌트화 해서 map을 돌렸다.

전체 데이터를 서버에서 받아온다음 탭에 알맞게 보여주는게 아닌 탭을 클릭할때마다 서버에서 데이터를 가져와 보여줬어야했다.
그래서 탭과 그 데이터들의 연결고리를 찾는게 우선과제였고 사실 어렵지 않았다.
아니 어려웠다. 어렵지않았다. .. 어떻게 말해야할지 모르겠다.

프로젝트 중간쯤가서 queryString를 사용했었는데 같이 프로젝트하는 백엔드 개발자분들이 서버에 fetch API주소를 한글로 받게끔 로직을 구성해놓으셨다.
예를들어 아래와같이 querySting로 주고받아야하는 부분이 '먹거리'였다.

export const CATEGORY_FOOD_APIKEY = `${BASE_URL}/private/products?category=먹거리`;

queryString를 사용하기 전까지만해도 이게 왜 문제가 되는지 몰랐었다. 그냥 변수로 저장해서 클릭할때마다 보여주면 되는거 아닌가?라고 생각했었고 실제로도 잘 진행되었다.

하지만 페이지를 새로고침해도 내가 원래 보던 탭이 그대로 보여야하는데 초기세팅으로 돌아가버려서 가장 앞에있는 tab을 보여주는게 문제였다.
이를 수정하려면 this.props.location.search를 사용해서 componentDidMount될때 setState해서 그대로 보여줄 수 있도록 해야하는데 내가 받아온 페이지가 한글로 되어있어서 인식을 못했다. 즉, 내가 원하는대로 나오지 않았다..

이렇게 나온다. 전혀 사용할 수 없게...

이거를 수정하고 싶어서 백엔드 개발자에 물어봤더니 수정하는거 어렵지 않다고했지만, 프론트엔드 개발자들이 다 이걸로 사용하고 있어서 바꿔달라고 요청하기 민망했다. 그래서 우선 새로고침하면 나오는 탭은... 나중에 구현하기로하고 나머지 진행했다.
이런 변수 또한 프로젝트의 묘미가 아니겠는감...ㅎㅎ

무튼! 내가 작성한 코드는 아래와 같다.

constructor(props) {
    super(props);
	
  // tabLists는 변하지 않기때문에 state에 넣어놓고 사용했다.
    this.state = {
      toggleState: '',
      tabLists: ['먹거리', '음료', '디저트'],
      contents: [],
    };
  }
  
  componentDidMount = () => {
    const query = `limit=${LIMIT}&offset=0`;
    const sliceQueryString = this.props.location.search.slice(
      1,
      this.props.location.search.length
    );

    this.props.history.push(`/evaluating${this.props.location.search}`);
    
    fetch(`${privateAPIKEY}?category=${sliceQueryString}&${query}`, {
      headers: {
        Authorization: localStorage.getItem('token'),
      },
    })
      .then(res => res.json())
      .then(res => {
        this.setState({
          toggleState: 0,
          contents: res.results,
        });
      });
  };

  // ## TAB 클릭시 그에 맞는 fetch 함수
  handleTabClick = (tabList, i) => {
    const query = `limit=${LIMIT}&offset=0`;
    this.props.history.push(`/evaluating?${tabList}`);

    this.setState({
      count: 0,
      contents: [],
      toggleState: i,
    });

    if (tabList === this.state.tabLists[i]) {
      fetch(`${privateAPIKEY}?category=${tabList}&${query}`, {
        headers: {
          Authorization: localStorage.getItem('token'),
        },
      })
        .then(res => res.json())
        .then(res => {
          this.setState({
            contents: res.results,
          });
        });
    }
  };

 <ul className="tabs">
    <TabList
      toggleState={toggleState}
      handleTabClick={this.handleTabClick}
      tabLists={tabLists}
      toggleStateNum={toggleStateNum}
     />
</ul>

내가 구현할 수 있었던 부분은 새로고침 되었을때 fetch도 그래도 되고 url도 그대로 있는것까지였다. 무슨 탭을 클릭했는지 그것에 대한 정보는 가져오지못했다. 적어도 지금까지는 구현못했다. 그래서 계속 생각해보고 공부해보면서 방법을 찾아 나갈예정이다.

또 아쉬운점은 애초에 tabLists가 변하지않는 요소라면 오브젝트로 만들어놓고 각 탭에 대한 정보를 key값으로 만들어서 저장해놓고 사용했으면 분명 구현 가능했을 수 도 있다. 그리고 분명 코드가 깔끔하고 효율성있었을거라고 생각한다. 물론 아직 refactoring 하기 전이라서 구현안했지만 곧 다시 효율성있는 코드를 다시 짜볼예정이다.

이번기회를 통해 어떻게 백엔드와 소통을 해야하는지, 코드를 짜기전에 어떤 경우의 수를 생각해야하는지에 대해 느꼈다.