리액트에서 Ajax 요청하기 (왜 Ajax요청을 "componentDidMount"에서 해야할까?)

---

안녕하세요, 처음코딩입니다.

오늘은 리액트에서 Ajax 요청을 할 때 겪었던 문제와, 문제를 해결하기 위해 시도했던 방법과 결론, 그리고 과정 속에서 느낀 점을 정리하려고 합니다.

혹시 리액트에서 Ajax 요청을 하신 적 있으신가요?

그렇다면 아마 componentDidMount 메서드에서 처리하셨겠군요!

그럼 왜 componentDidMount메서드에서 처리하셨나요? 

저는 처음에 공부할 때 제가 참고한 책과, 리액트의 공식 문서에서 componentDidMount에서 네트워크 요청을 처리하라고 제시했기 때문에 별 의심없이 사용했습니다.

하지만 라이프사이클 메서드를 공부하면서 또 스택오버플로우에 흥미로운 질문을 보고 "왜"라는 질문을 던지기 시작했습니다.

리액트 공식문서 - componentDidMount

---

겪었던 문제 : 

리액트에서는 왜 Ajax요청을 "componentDidMount"에서 해야할까?

---

해결하기 위해 시도했던 방법 : 

1. 저와 비슷한 의문을 품고 있는 사람들을 먼저 찾기 위해 구글링을 시작했습니다.

다음과 같은 글을 발견했는데, 이 질문을 보고 Ajax요청을 componentWillMount에서 처리하는게 굳이 componentDidMount로 처리해서 리렌더링 하는 것보다 효율적인거 같다는 생각이 들었습니다.

componentDidMount에서 처리해야한다는 게 더 궁금해졌습니다.

---

2.직접 코드를 작성해서 componentWillMount메서드에서 Ajax 요청이 가능한지 실험을 해보았습니다.

 

git파일로 이미지를 클릭하시면 움직입니다.

이처럼 잘 작동이 되어 componentDidMount를 사용해야한다는 의문이 더 커지는 찰나,

콘솔창에 있는 경고가 눈에 띄었습니다!

---

3. componentWillMount 사용 시 에러 발생

에러가 반가운 것은 처음입니다

아마 이 에러가 없었으면 왜 componentWillMount 메서드로도 동작이 가능한지 찾아봤어야 했을 겁니다.

에러 덕분에 공식 홈페이지를 다시 찾아보게 되었고 아래와 같은 글을 발견하게 되었습니다!!

 

---

결론 : componentWillMount 메서드는 레거시 메서드이기 때문에 componentDidMount 메서드를 사용해야 한다.

---

과정에서 느낀 점  :

개발 분야는 정말 빠르게 변화하는 세상인 덕분인지 어떤 자료에서는 

개발을 처음 공부하는 입장에서는 개발 분야는 빠르게 변화하는 세상이라서 그런가 17년도 글에서는 componentWillMount 메서드를 사용하라고 권장하는 의견도 있는 것을 보고 놀랍기도 했다

그래서 개발자는 지속적인 자기계발이 필요하다는 말이 와닿았고, 레거시 코드를 주의해야겠다는 생각도 들었다.

 

앞으로도 사용 방식에 대해서도 능동적으로 "왜" 라는 물음을 지녀야 겠다!

 

---

Reference

stackoverun - stackoverrun.com/ko/q/11451167

리액트 공식문서 -ko.reactjs.org/docs/react-component.html#unsafe_componentwillmount