DAY 16) 1. 클래스컴포넌트?? 근데, 클래스는 또 뭐야?? => Class-Component 2. This ?! 뭔데 이게 자꾸 말썽인거야! => this 3. 컴포넌트가 살아 숨쉬나? 생명주기가 있대! => Component-Lifecycle

송인호·2022년 5월 30일
0

dailyStudy

목록 보기
13/35

이번주 할것

백엔드를 만들어 본다.
fireBase를 이용하면 백엔드 개발자 없이 프로젝트 만들 수 있다.

오늘 할 것

1 교시

1. 댓글 무한스크롤(list)

hasMore가 true일 때 마우스 스크롤이 내려갈 때 loadMore이 실행된다.

마우스를 내리면 (1~20) (21~30) 까지의 데이터를 불러와 10개씩 계속 추가 된다.

데이터가 없으면

이부분을 실행시켜 기존 꺼를 써주며 끝낸다.

2. 댓글 수정(write)

업데이트버튼을 누그게 되면 isEdit이 true가 되며 리렌더링이 일어난다.
그러면 isEdit=== true 부분이 나타난다.

defaultValue 값을 보여주기 위해 el={props.el}도 넘겨준다.

바뀐 부분
readOnly 부분은 이중부정연산자를 이용해 boolean값으로 바꿔준다.

있으면 값 추가 시켜주기

setIsEdit 을 state 끌어올리기를 사용

2 교시

스프레드 연산자를 통해 함수를 하나로 최적화 시키는 방법을 배운다.

객체에서 키는 중복이 될 수 없다.

객체에서 동일한 키에 대해 위에 있는 키는 사라지게 되고 아래 키로 덮어 쓰기가 된다.

아랫것이 위에를 덮어 쓰기 할 것이기 때문에 상관없다.
위에 동일한 값들은 스프레드 연산자를 이용 할 수 있다.

밑 부분은 중복된 값으로 변경해주기 위해 id를 이용한다.


객체 키에는 . 이 들어갈 수 없다.

객체의 대괄호는 배열과 상관이 없다.

이제 완벽히 동일해 졌다.

이렇게 함으로서 하나의 함수로 리팩토링을 완료했다.

스프레드 연산자 이용

나중에는 자동으로 리팩토링해주는 라이브러리가 있다.

클래스 컴포넌트

물건을 만드는 설명서

몬스터를 만드는 설명서를 가지고 몬스터를 찍어냈다. 라고 생각할 수 있다.

class 안에서는 function, class, let 이런 단어를 붙이지 않는다.

객체라고 한다.
이러한 방식으로 개발하는 방식을 객체지향프로그래밍이라고 한다(OOP)

data <- 인스턴스, .~~~ <- 메서드라고 부른다.


이렇게 하면 오류가 난다.

누가 this를 실행 시켰는지에 따라 this가 달라진다.

접근 할 수 있는 최상위 객체는 Window 이다.

함수를 만들어 준뒤 this를 찍어보면 this 는 profile의 값들이 나온다.


해결 방법

화살표 함수로 변경해준다.

this를 바인딩 해준다.
이렇게 되면 onClickCounter() 안에있는 this들도 다 같은 this로 된다.

3 교시

라이프사이클

각각의 상황에 이런 함수 실행시켜줘를 적용할 수 있다.
모두 함수이다.

언제 사용할까?

화면에 그려지고 그 다음 포커스가 깜빡깜빡 한다.

  1. 처음에 render() 그리기 실행
  2. componentDidMount() 실행
  3. componentDidUpdate() 실행 -> 리렌더링 됐을 때 (state가 바뀔 때)
  4. componentWillUnmount() 실행 -> 컴포넌트가 사라 질때 (나가기 버튼을 눌러 페이지 이동이 될 때)
    ex) 채팅방 나가기

function lifecyle

의존성 배열 []가 변경이 되면 다시 실행 됨
의존성 배열이 비어있으면 한번 실행되고 바뀔게 없다.
즉 componentDidMount 가 된다.

처음도 한번은 실행이 된다.

return 을 줘서 사라질 때 실행 되게 한다.

2. useEffect의 잘못된 사용 예제

inputs 리팩토링
classComponents this가 귀찮게 함.
버튼을 클릭해서 실행했는지, 객체가 실행했는지, class가 실행했는지, 화살표함수나 바인딩 시켜줘서 사용
클래스 생명주기 를 함수형 생명주기로 바꿔줌
useEffect를 사용
useEffect안에 setState를 사용하는것은 가급적이면 사용하지 않는 것이 좋다.
함께 사용할 때는 주의해서 사용해야한다.
class 컴포넌트를 실무에서 잘 사용하지 않음
하지만 알아야 한다.
트랜드는 함수형이다.

렌딩페이지 만들기 사이트 처음 들어갔을 때 나오는 페이지

알고리즘

거듭제곱 연산자

메서드를 사용하는 것이 좀더 빠르다.
Number.isInteger 사용하는 것 말고 나머지 연산자를 통해서도 문제를 풀 수 있다.

profile
프론트엔드 개발자

0개의 댓글