210907 기록할 코드

hover 했을 때 다른 class 스타일 속성 변경

/* scss 형식 */
.headers {
    height: 600px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    padding-right: 20px;
    margin-bottom: 80px;
    opacity: 70%;

    &:hover {
      .pre,
      .next {
        opacity: 0.2;
      }
    }

.headers 요소에 hover가 되었을 때, .pre, .next 요소의 opacity를 0.2 (=20%)로 변경한다

객체 속성값 추가, 변경, 삭제

1. 객체 속성 추가 & 변경

속성 추가와 같은 방법으로 속성을 수정한다
기존 속성이 있으면 변경하고, 속성이 없으면 추가한다

객체["속성"] = 속성값;
객체.속성 = 속성값;

// 하위객체인 경우
객체.객체.객체.속성 = 속성값;
객체.객체["속성"] = 속성값;

2. 객체 속성 삭제

1. delete 연산자를 사용하고
2. delete 연산자는 삭제후 true/false 반환값을 반환하는데 삭제에 성공하면 true, 실패하면 false를 반환한다

삭제시 조건문 체크를 이용해 삭제 성공 여부에 따른 추가 처리를 할 수 있다

delete 객체.속성;

fetch() network fending

fetch() 함수로 API 데이터를 요청했고 데이터르 받았을 때만 렌더링되도록 로직을 구현했는데
GoodsList 컴포넌트가 렌더링되지 않아서 네트워크 탭을 확인했는데 아래와 같이 pending 상태였다

pending: initial state, neither fulfilled nor rejected. fulfilled: meaning that the operation completed successfully

서버쪽과 동일한 와이파이를 이용하지 않아 발생했던 pending 이었다 👍🏻

이벤트 함수 작성했을 때 오류발생

<button onClick={this.btnChange()}>메뉴</button>

이런식으로 onClick이벤트를 작성하면 오류가 발생하는데

오류메시지
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

오류가 발생하는 이유

• 함수를 부른다 > render를 다시한다 > 또 함수를 부른다 > 반복
• 함수를 부른다? : {} 블럭안에 함수명+() 이렇게 썼기때문에 바로 호출의 의미가 된다.

오류를 해결하는 방법

this.btnChange() 이렇게 작성하지 말고
아래 코드처럼 btnChange로 작성하거나
매개변수가 필요한 경우에만 this.btnChange(매개변수)의 형태로 작성한다

<button onClick={this.btnChange}>메뉴</button>
<button onClick={() => this.btnChange(param)}>메뉴</button>