[React] this.setState는 두번째에서 콜백을 받는군요...?

The Modern React Bootcamp / Colt Steele

 

이번에는 joke api를 이용해서 유머를 가지고 오고 그걸 화면에 띄운 다음에 투표를 할 수도 있는 실습을 했다. dad joke가 우리나라로 치면 아재개그쯤 되려나... 여튼 이번 실습에서 중점적으로 본 건 api를 이용해서 data를 받은 다음 this.setState를 이용해서 어떻게 변경하며, 그리고 window.localStorage를 이용해서 받았던 data를 저장해서 새로고침을 해도 그 내용이 사라지지 않고 유지되도록 했다. 아니, this.setState에 두 번째 인자로 콜백함수를 받을 수 있잖아...? 공식문서를 제대로 들여다보니 this.setState를 이용해서 state 변경, 또는 함수 이용, 그리고 두번째 인자로 콜백함수 받는 거. state를 변경한 다음에 그리고 콜백함수가 작동한다. 

 .
 .
 }
      this.setState(
        state => ({ loading: false, jokes: [...jokesArr, ...state.jokes] }),
        () =>
          window.localStorage.setItem('jokes', JSON.stringify(this.state.jokes))
      );

이런 식으로 this.setState로 state를 설정해주고 그 변경된 것을 localStorage에 저장하도록 설정하는 것. 

 

 

 

물론 방대한 양의 데이터를 저장할 때는 이런 식으로 localStorage에 저장하는 것이 좋지 않지만, 적은 양의 데이터이기 때문에 간단한 실습을 할 때는 이렇게 데이터를 저장하곤 한다. 그래서 정리해본다. 데이터를 로컬저장소에 저장하고 그걸 다시 받아서 쓰는 방법.

 

 window.localStorage.setItem('jokes', JSON.stringify(this.state.jokes))

setItem('(로컬저장소에 저장할 이름)', string), 이처럼 두번째에는 string 형식으로만 넣어야 하기 때문에 JSON.stringify를 이용하여 JSON을 string으로 변환해주고

 

 

 this.state = {
   jokes: JSON.parse(window.localStorage.getItem('jokes') || '[]'),
   loading: false
};

저장한 string을 다시 JSON으로 변환할 때는 JSON.parse를 이용한다. JSON.parse에 or 조건문을 붙인 건 로컬저장소에 저장된 데이터가 없으면 빈 배열을 반환하기 위해서. 안 그러면 에러가 날 수 있습니다... 여기서 가로 하나 잘못 써서 왜 계속 에러가 나는 지 의문이었기 때문에 다시 정리한다.

 

 

 

---

 

udemy에서 리액트 강의를 총 2개를 결제했는데 이분은 스타일링하는 거까지 보여주는 편인고, 다른 분은 리액트의 본질적인 부분에 더 접근하면서 스타일링은 semantic UI를 사용해서 마무리한다. 두 분의 강의는 각각의 장점이 존재하는데 그걸 믹스해서 하나의 강의만 듣고 싶은 마음이 조금 드네... 프론트엔드로 취업을 생각하니까 스타일링 역시 무시할 수 없는 부분이라 이렇게 보여주는 것 역시 나쁘지 않는데, 내가 스타일링에 신경을 쓰는 편이라... 크흡