본문 바로가기

코드스테이츠(Immersive)/2주프로젝트

2주프로젝트(WebPaper_day08 : React state & axios)

카테고리를 선택하면 axios get 요청을 해서 데이터를 렌더해야한다

- state 부분 수정 , 특정기사 수 만큼만 저장

 

선택한 카테고리들의 state 변화 줘야됨

 

prevState is a name that you have given to the argument passed to setState callback function. What it holds is the value of state before the setState was triggered by React; Since setState does batching, its sometimes important to know what the previous state was when you want to update the new state based on the previous state value

So if multiple setState calls are updating the same state, batching setState calls may lead to incorrect state being set. Consider an example

 

state = {
   count: 0
}
updateCount = () => {
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
}
In the above code you might expect the value of count to be 4 but it would actually be 1 since the last call to setState will override any previous value during batching. A way to solve this to use functional setState

updateCount = () => {
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
}

 

처음 componentDidMount에서 카테고리별로 데이터를 저장해놓고 싶은데, dynamic하게 할 수 있을까?

  : axios.all ?

this.state.map

 

isClicked된 카테고리의 기사들만 어떻게 렌더 할 수 있을까?

 

- state 값을 변화를 주어서 state가 true가 된다면, 컴포넌트에 props를 전달하는 방식으로

- 카테고리별 props를 어떻게 합쳐서 넣어줄까?

: 합치기 보다 각 카테고리별로 넘겨주기로

map을 사용해서 변수 사용 -> setState 문제