본문 바로가기

React18

[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] Error: Maximum update depth exceeded 해결법 개요이벤트 설정 시 발생하는 무한 루프 문제의 원인과 해결책을 알아보자. Maximum update depth exceeded 에러를 해결해보자.이슈 원인onClick={this.function()} 위와 같이 이벤트를 설정할때 함수에 괄호를 붙이면Render 될때마다 함수를 호출하기 때문에 무한 루프가 발생한다.ex) 함수 호출 => render => 함수 호출 => render ...따라서 괄호가 붙지 않는 즉, 파라미터가 없는 함수는 이슈가 발생하지 않는다.해결책파라미터를 넘기지 않는다면 괄호만 지우면 해결된다.파라미터를 넘겨야 한다면 아래처럼 Arrow function을 사용하면 된다.onClick={() => this.function()} React 2021. 5. 11.
[React] antd 테이블 클릭 시 row 색 변경 개요antd 라이브러리의 table에서 어떤 행을 클릭했을 때 해당 행의 배경색을 바꾸는 법을 알아보자 방법1. Table 탭을 클릭했을 때 클릭한 row의 index를 state에 저장하는 함수 생성clickRow = (index) => { this.setState({ activeIndex: index })}  2. Table 탭의 onRow 파라미터를 사용하여 onClick 생성onRow의 파라미터 record, index가 주어진다.record : data의 전체정보 .[컬럼이름] 으로 세부정보 출력가능 ex) record.userNameindex : 테이블에서 해당 데이터의 행 인덱스(위치) { return { onClick: this.clickRow(index).. React 2021. 5. 11.
[React] antd form 초기화하기 리액트에서 antd로 form을 구성했을 때 내부 요소들을 버튼 클릭으로 초기화 하는 방법을 알아보자 1. React를 import 한다. import React from "react"; 2. HTML의 DOM 메소드 사용을 위해 ref 객체를 생성한다. 생성자에서 this.formRef = React.createRef(); 를 선언하면 된다. class 클래스명 extends Component { constructor(props) { super(props) this.formRef = React.createRef(); } } 3. antd의 Form을 선언할 때 ref 파라미터에 생성한 ref 객체를 넣어준다. 4. 여러가지 FormItem을 선언한다. name 파라미터에 초기화에 사용할 키 값을 넣는다.. React 2021. 4. 29.
[React] state의 list가 undefined로 인식돼서 find가 동작하지 않을 때 문제점 리액트 웹 개발 도중 state의 list가 undefined되어서 find가 동작하지 않는 오류가 나왔다. 기본적으로 find는 빈 리스트에서는 실행오류가 난다. 오류의 이유는 리스트에 값이 채워지지 않았기 때문이다. result=[ { "grade": 1, "count": 0 }, ... (중략) { "grade": 9, "count": 0 } ] HTTP GET으로 위의 데이터를 불러와서 (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 0: {grade: 1, count: 0} 1: {grade: 2, count: 0} 2: {grade: 3, count: 0} 3: {grade: 4, count: 0} 4: {grade: 5, count: 0} 5:.. React 2021. 4. 2.

티스토리툴바