리액트2 [React] 비동기 통신에서 this가 먹지 않을 때 개요HTTP 비동기 통신 중 반환 부분에서 this가 예상대로 작동하지 않아 컴포넌트 내 함수와 객체를 사용할 때 발생하는 오류를 해결해 보자.문제점http 비동기 통신할 때 결과 return 부분(then {})에서컴포넌트 내 함수 및 객체 이용을 위해 this를 쓰면 먹지 않는 오류가 있었다.해결책var self = this 비동기 통신 이전 this를 변수에 저장한 다음 해당 변수를 this 용도로 사용해야 한다.ex)self.state.orderIdx 이유return 부분에서 this를 사용할 경우 리액트는 this를 http return을 날린 서버 쪽의 this로 판단한다.비동기 depth 1까지는 컴포넌트 내 this로 자동 변환해주는데depth2부터는 얄짤 없다. React 2021. 6. 1. 더보기 ›› [React] Link와 <a>태그의 href의 차이 리액트에서 페이지를 이동할 때는 태그의 href 대신 Link를 사용해야 한다. 이유 태그의 href로 이동하면 상태 값을 잃고 속도가 저하된다. 리액트는 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 프레임워크로 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산을 로드하는 애플리케이션이다. 해당 이유로 페이지를 새로 불러오게 되면 앱이 지니고 있는 상태가 초기화되고, 렌더링 된 컴포넌트도 모두 사라지고 새로 렌더링을 해야 한다. 상태 유지와 속도의 효율성을 위해 새로운 페이지를 불러오는 대신 업데이트하는 방식으로 구현해야 한다. 태그의 href는 페이지를 이동시킬 때 페이지를 새로 불러오게 된다. 따라서 상태.. React 2021. 3. 29. 더보기 ›› 이전 1 다음
