2019-8-29 오늘의 이슈

이슈 상태관리?

구독 서비스를 보여주는 Dashboard컴포넌트와 그 하위 컴포넌트들에는 user의 상태를 전달해준다. 상태관리가 어렵기때문에 이제는 Redux를 써야될거 같다.

<Button key="2" onClick={this.sortByPrice(this.props.data.subscriptions)}>
                          가격 순
                        </Button>,
                        <Button key="1" type="primary" onClick={this.sortByLeftDay(this.props.data.subscriptions)}>
                          남은 일
                        </Button>

onClick을 만들었는데, 렌더링이 되자마자 둘다 실행이 되고 버튼이 안먹었다. 알고보니 onClick은 함수를 받기때문에 리턴값이 아니라 함수를 전달해야됬다.

<Button key="2" onClick={() => {this.sortByPrice(data.subscriptions)}}>
                         가격 순
                       </Button>,
                       <Button key="1" onClick={() => {this.sortByLeftDay(data.subscriptions)}}>
                         남은 일
                       </Button>

위의 방식으로 함수를 호출하니 Button onClick이슈는 해결이 됬다. 그리고 엄청난 문제가 있었다….
onClick 이후 subscriptions을 sorting을 해야되는데, list.sort()를 사용하게 되면 원본 배열이 바뀌기때문에. 리액트에서 렌더링을 못한다고 한다. 이 부분은 리액트가 렌더링하는 원리와 관련이 있는데, 아직까지는 학습의 부족으로 설명을 못하겠다.

sortByPrice = (subscriptions) => {
    // subscriptions.sort((a, b) => (a.price > b.price) ? -1: 1);
    const sortedSubscriptions = Object.assign([], subscriptions).sort((a, b) => (a.price > b.price) ? -1 : 1);
    this.setState({subscriptions: sortedSubscriptions}, () => {
      console.log(this.state)
    });
  };

  sortByLeftDay = (subscriptions) => {
    const sortedSubscriptions = Object.assign([], subscriptions).sort((a, b) => (this.calLeftDay(a) > this.calLeftDay(b)) ? -1 : 1);
    this.setState({subscriptions: sortedSubscriptions}, () => {
      console.log(this.state)
    });
  };

결국 Object.assign()을 통해 새로운 배열을 만들고, setState를 이용했다. 이 방법을 사용하면 sortBy..메서드가 실행이 될때마다. 상태가 변경이 되고 그에따른 렌더링이 될거라는 이야기를 들었다.
문제는 어떻게 보여줄것이냐가 문제다.

느낀점

처음에 react를 할때 redux. nextjs등등 뭐가 많다고 이야기를 들었다. 멘토님께서 말씀하시기를 아무리 redux, nextjs를 알고있어도 실제로 관리의 어려움을 느끼고 나서야 그 도구들의 필요성을 느낀다고… 지금이 딱 그때이다. Dashboard에서 수많은 컴포넌트들에 user정보를 전달해주고 렌더링을 기다려야되니 상태관리를 위한 store를 만들어야겠다. 내일은 잘 하기를…

Written on August 29, 2019