220530 프론트엔드 부트캠프 20일차 : 클래스 컴포넌트, 생명주기(Lifecycle)

4주차에 배울 내용

 - 클래스 컴포넌트

 - 프론트 엔드와 백엔드 같이 보기 (Architecture)

 - 백엔드 API 만들기 체험 (Apollo-Server / Graphql)

 - 이미지 업로드 (Cloud-Storage) 

 

  freeboard 리뷰

freeboard - 구조 짤 때 어떤 것이 유지/보수 하기 좋은 가에 초점을 맞추면 됩니다. 

에어비앤비에서는 이중부정 연산자를 쓴대용

 

☘️ 중간고사 보면서 이해한 부분!

변경된 내용이 있으면 추가해준다.

 

if (contents) updateBoardCommentInput.contents = contents;
// event.target.value로 받은 contents가 있으면(입력받아서 변동이 생겼으면) 
// 수정할 목록의 contents에 위의 contents를 넣어준다.

 

변경된 star가 있는지 없는지는 어떻게 구분? 기존 star값이랑 지금 선택한 state값이 다르면 변경 됐다고 보고 그 부분만 mutation하기 위해 조건을 달아준다. 

 

변경하면 DB의 엑셀만 변경된거고 보는 건 바뀌지 않기에 리패치 요청도 해야함. 

 

 

🥸 input 묶기

 

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

name: "망구", name: "망고" 하면 먼저 쓴 키는 사라지고 name: "망고"로 바뀜

 

-> 바뀌는 부분을 아래에 쓰자!

 

title, writer, contents 를 묶어서 ...inputs로 바꿀 수 있음

(변수명으로 쓰려면 [] 대괄호로 감싸줘야 한다. 배열이랑은 전혀 관계가 없음)

 

이렇게 묶어서 바꿀 수 있다!

  클래스 컴포넌트 - 함수형 컴포넌트

🫶숙제를 안 냈어...

 

 🤨 요즘은 함수형 컴포넌트 쓴다는데 클래스 컴포넌트는 왜 알아야하나요? 

이전에는 함수형 컴포넌트가 없어서 대부분이 클래스 컴포넌트였다! 보는 법도 알아야하고, 함수형 컴포넌트로 바꾸는 방법도 알아야 한다. 

 클래스 컴포넌트를 쓰면 this 가 말썽인데 이걸 다루는 방법도 알아야 한다.

 

 

 클래스 - 물건 만드는 설명서, 만드는 방법을 적어놓은 것 

ex.

const date = new Date()

date.getFullYear()

date.getMonth()

date.getDate()

 

function이란 단어가 안 써져 있어요! 클래스 안에선 그런 단어 안 쓴다. 객체라고도 한다. 

원래 있는 건 내장객체라고 한다. 객체 지향 프로그래밍(OOP, object oriented programming), 특히 백엔드에서 많이 사용.

메소드 라고 부른다! .어쩌구쩌쩌구~

 

const date 에서 date는 인스턴스

this는 클래스 자기자신을 의미

 

기능을 가능하게끔 해주려면 페이지 클래스 이름 뒤에 extends Component(컴포넌트 기능들을 상속 받았다) 써줘야 한다. - react에서 만든 기능

 

🥹 this의 문제 

 

this는 항상 고정되어 있지 않고 누가 실행시켰냐에 따라서 달라진다.

 

alert("빰"); 이라고 하면 자동으로 window.alert("빰"); 으로 실행하는 것

객체 안의 함수에서 console.log(this)를 찍어보면 그 객체가 나온다. 

 

 

위에 있는 this는 주체가 클릭 이벤트

아래 있는 this는 주체가 클래스

-> 둘이 다름

 

해결 방법) 화살표 함수로 만든다.

누르면 안에 있는 this를 밖에 있는 애로 사용해줘 요청 - onClick={this.onClickCounter.bind(this)} 내가 보내는 this로 사용해!

 

  컴포넌트 생명주기(lifecycle)

1. 그리기 - render

2. 그리고 난 뒤 - componentDidMount

3. 그리고 난 뒤 변경됐을 때 - componentDidUpdate

4. 그리고 난 뒤 사라질 때 - componentWillUnmount

 

(다 함수임)

 

언제 사용해? 

페이지 들어가서 클릭한 적 없는데 input에 깜빡깜빡 거려, 이렇게 하고 싶을 때...

일단 화면에 input이 그려져야하고, 그 후에 깜빡거리게 해줘 라고 명령하는 것. componentDidMount() 

 컴포넌트 없어졌을 때 필요한 함수는, 

채팅방에서 채팅방 나가기를 하면 접속하고 있는 사람 수가 변해야하는데, 내 화면만 변하는 게 아니라 백엔드에 알림을 줘야한다.

로고를 클릭해도 나가지고 나가기를 눌러도 나가지게 한다면, 모든 버튼들마다 채팅방 나가기 함수를 등록하는 건 비효율적이다.

그래서 채팅방 컴포넌트가 사라지면 그때 실행되는 함수가 있게 하는 것! componentWillUnmount 

 

함수형 컴포넌트로 바꼈을 땐 ?

hooks 사용한다.

생명주기도 하나로 통합된다. useEffect

 

useEffect(() => {
 console.log("마운트 됨!");
 }, [])
 
 
useEffect(() => {
 console.log("수정되어 다시 그려짐!");
 }, [count])

 여기서 [count] 의존성 배열(defedency array), 재실행 될지 안 될지는 이 안에 담긴 값에 따라 달렸다.

비어 있으면 다시 실행 안 됨 -> componentDidMount 와 같음

 

 밑의 useEffect가 componentDidUpdate랑 완벽하게 같지는 않음, componentDidUpdate는 처음에 실행이 안되는데, useEffect는 무조건 처음에 한 번 실행되기 때문임

 

useEffect(()=> {
    console.log("마운트 됨!");
    // 포커스 깜빡깜빡

    return() => { // 합치기 가능ㅎ
      console.log("컴포넌트 사라짐!!!");
      // 채팅방 나가기
      // api 요청!!!
      };
  }, [])

이렇게 componentWillUnmount(사라질 때) 를 합치는 것도 가능하다. 

 

 

🙀(공포에 절규하는 고양이 얼굴) 잘못 쓰이는 케이스~ 

// 1. 추가 렌더링

 useEffect(()=>{
    setCount(10); 
  },[])

state가 바뀌면서 화면이 리렌더링 될텐데, 실행이 되고나서 setCount로 또 state가 바뀜-> 다시 리렌더링 -> 더 이상 실행은 안되지만 시작하자마자 두 번 렌더링 하며 시작한다. 좋지 않아!

 

 

// 2. 무한 루프
  useEffect(()=>{
    setCount(prev=> prev + 1); 
  },[count])

 커비가 계속 누적되어 움직이는 이유를 여기서 깨달았다... 

count가 변하면 함수가 다시 실행되는데, setCount로 count에 변화를 줌->count가 변해서 또 실행됨 이 반복!!! 

 

useEffect - 전부  한 번 쫙 ~~~~~ 렌더링 된 이후에 작동

(위에 있더라도 먼저 실행되는 거 아님)

맨 밑에 적은 console.log(”나는 언제 실행될까?!”)가 마운트 됨! 보다 먼저 실행됨

 

 

 

---

인풋 최적화, 또 글로벌 스테이트 그런 거 이용해서 리팩토리 하는 방법 알아볼 것

this가 바뀌는 문제, 클래스 함수형으로 바꾸기

요즘 실무 함수형으로 바뀌는 형태. 리액트에서도 그걸 밀고 있고

디프리..?케이티드..?된 애들이 있다..?

그래도 클래스 컴포넌트 알아야 한다. 이전에 만든 서비스들은 클래스형으로 되어 있어.

 멘탈 조금 휘청이는  오늘...?아니 오늘이 맞나? 요즘 계속 그랬던 것 같기도 하고...

시프티 출석 안 함 + 그냥 늦음의 콜라보가 결실을 맺었다. 음~~~ㅎㅎ... 사실 이제 점수는 별로 신경 안 쓴다. 그치만 난... 그만둘 순 없어 절대로... 지금도 너무 뒤처지는 것 같지만 어떻게든 매달려있으려 한다구욧... 아무튼 지금 너무 여유롭게 생활하는 것 같다. 플래너를 다시 써야겠다... 오늘만해도 스톱워치 안 갖고 가서 되게 어색하고 불편했던 걸 보면, 습관만 들이면 또 금방 괜찮아지지 않을까...?ㅠ라는 생각...! 블로그도 쓰고 자고 싶은데 패턴도 맞출겸 그냥 자보려고 한다. 내일부터 열공타? 열품타? 할 생각에 신난당^ㅁ^

 그래도 오늘 점심 뭐먹었는진 써야해! 오늘은 낭만낭만~ 그리고 저녁엔 뭔가 기분 너무 가라앉아서 갱얼쥐들 보고 떡꼬치랑 순대사서 집왔다. 맥주를...생각도 못 한걸 보면...! 요즘 술 안 먹긴 했나봐ㅎ_ㅎㅎ~~~ 그리구 카드 와서 x-pf 드릴 카드도 썼다. 그냥 이런거라도 해야 좀 마음이 나아지는 것 같아... 조금 더 내게 여유로운 내가 되길!!! 👊