4주차 목표
클래스 컴포넌트? >> class component
프론트엔드와 백엔드의 전체 숲 >> achitecture
백엔드 api 만들기 >> apollo-server / GRAPHQL
이미지 업로드 >> Cloud-storage
📔 학습목표
- 클래스 컴포넌트 >> Class- Component
- this의 오류 >> this
- 컴포넌트의 생명주기 >> Component-Lifecycle
지난 시간 수업 코드리뷰
- 댓글 무한스크롤(list)
- 댓글 수정(write)
전체를 아이템이라는 유아이로 따로 빼놓음
최적화를 위해 필요한 과정임...
패치모어를 실행한 이유?
패치보드커멘츠
1~10 뒤에 스프레드 연산자를 이용해 11~20번까지
마우스 스크롤 내릴때마다 10개씩 추가로 보여준다 (인피니트 스크롤러)
패치모어 리저트에서 받아온 데이터가 없다면,
그냥 기존꺼 그대로 살려줘~
가급적이면 작은단위로 쪼개서 나누면
나중에 유지보수에 도움됌.
이 부분이 전체가 아닌 하나다.
온클릭 업데이트를 누르면 펄스값이 트루로 바뀌고
스테이트값이 변경됐기 때문에 리렌더링이 된다.
그럼 앞에 값이 실행된게 아닌...
디폴트를 보여주기위해
해당하는 el 을 통째로 보여주고 있다
업데이트보드 커멘트 뮤테이션이 추가되고
그 업데이트를 실행시켜줄 함수를 하나 만들었다.
댓를 코멘트 라이트에서 추가된 부분
있으먄 디폴트 벨류
먼저 수정이 됏는지 안됐는지 확인
빈 객체를 추론하기 때문에
....못들었다...
수정하기를 클릭했을 때 뮤테이션이 날라감
최신화된 자료를 불러오는 과정
댓글 수정이 완료한 후에는 원래의 모양으로 원상복귀해주는 부분
props.setIsEdit를 true로!!!
뒤에 물음표를 써주는 이유?
셋이즈에디트가 있으면 이걸 실행시켜줘
있을때 실행시켜줘
코드 최적화 시키는 법
- Global State -
각각의 컨테이너에서 중복된 애들(공통적으로 사용되는 애들) 따로 분리
객체에서 키는 중복이 될 수 없다.
중복되는 애가 덮어버린다.
2. inputs spread
2-1 스테이트들 합쳐주기
2-2 setState들 합쳐주기
얕은복사
스프레드 연산자를 통해 코드를 최적화 할 수 있다.
2-3. event 정리
이벤트 타겟 아이디도 변수
이벤트 정리한거 최종..
베리어블즈도 스프레드 연산자를 통해 최적화
- 커스텀 훅
Class- Component
붕어빵 만드는 설명서를 가지고 붕어빵를 찍어냈다
몬스터 만드는 설명서를 가지고 몬스터를 찍어냈다
=>
컴포넌트를 만드는 설명서다~
위와 같은 함수들이 설명서에 들어있다.
class안에서는 const,let, function을 붙이지 않는다.
const date = new Date()
에서 date를
객체
라고 불렀음뉴데이트의 데이트는
내장객체
객체지향 프로그래밍(OOP)
date.getFullYear()
getFullYear() 를 메소드라고 부름
객체를 인스턴스라고 부른다.
카운터 컴포넌트 실습
익스포트 디폴트 펑션이 아닌 클래스를 쓰고 !
함수 불러올때 ㄱ앞에 this 붙음
컴포넌트 기능을 상속받았다.
리액트에서 만들어놓고 제공해주는 기능들을
물려받아서 사용할 수 있다
오류
이유?
누가 this를 실행시켰는지에 따라서
(=주체에 따라서)
그 this가 달라지는 거다
디스를 아무데서나 치면
처음엔 "윈도우"를 가르키게 된다 (최상단을 가리키게 된다)
객체 안에서 디스를 넣으면
디스는 객체의 내용을 보여준다
즉 ,나를 실행시킨 애가 프로필이다. 실행의 주체가 프로필이다
내가 카운트 올리기를 누르면
디스의 주체가 바뀐다.
온클릭 카운터 안에 디스는 아직 이벤트 전이기때문에
실행이 안됌
그러므로 밑에 그려진 디스점 스테이트 카운트랑 온클릭카운터 안에 디스점 스테이트 카운터는 다른 거.
해결방법 !!!
- 화살표 함수
그러면 주체가 누구든 상관없이 같은 애를 가리키게 됌. 주체가 변하지 않음
- this 바인딩
디스를 바인딩해준다.
온클릭카운터 안에 디스는 바인딩된 디스가 된다.
컴포넌트 생명주기
- 그리기
- 그리고 난 뒤
- 그리고 난 뒤 변경됐을 때
- 그리고 난 뒤 사라질 때
함수들
디드업데이트
리렌더링 됐을 때 실행
윌언마운트
컴포넌트가 사라질 때
페이지 이동
필요할 때 : 채팅방 나가기 등
컴포넌트 생명주기도 함수로 바꿔보기
[] 가 비어있으면 그 다움부터는 다시는 실행이 안된다.
componentDidMount
useEffect를 잘못 사용하는 예제
1. 추가 렌더링
2. 무한루프
