React와 관련한 글을 메일링서비스로 받아보던 중 이해하기 쉽고 clap 수가 높은 글을 발견해 번역해봤습니다. 원본 글에서 댓글을 통해 반박 내용이 있는데, 번역본에도 포함했습니다. 원본 글은 https://levelup.gitconnected.com/react-antipatterns-to-avoid-7134940f4f04 입니다. 리엑트(React)는 인터렉티브한 모던 웹앱을 만들기 위해 가장 많이 사용하는 프론트엔드 라이브러리입니다. 모바일 앱을 만들 때에도 쓸 수 있죠. 이번 글에서 우리는 리액트에서 피해야 할 안티패턴에 대해 알아볼 것입니다. 컴포넌트에서의 bind()와 함수들 우리가 리액트 class 컴포넌트에서 bind를 호출할 때, 우리의 props 안에서 반복적으로 부르지 않아야 합니다..

componentDidUpdate()에서 setState()를 즉시 호출할 수도 있지만, ... 조건문으로 감싸지 않으면 무한 반복이 발생할 수 있다는 점에 주의하세요. - React 공식문서 componentDidUpdate(){ ... this.setState({currentAddress:items[0].region.area3.name}); } React로 프로젝트를 진행하다 특이한 현상을 발견했습니다. 화면을 render한 직후 다음 단계에서 외부 API 호출을 하기 위해 componentDidUpdate()를 사용하는데 여기서 위의 코드처럼 setState()를 사용하니 무한루프에 빠지는 것입니다. 특히나 외부 API를 호출하는 로직이 들어가있어 이 상태로 5분만 내버려두면 한달치 무료 호출량을 ..