코드캠프 4기 - 11월 22일

 

여러개의 함수를 묶어서 하나의 객체를 만든다.

객체(객체지향프로그래밍-OOP)

 

 

함수형 컴포넌트를 위해 훅, 함수를 통해서 컴포넌트를 만들었다.

함수형 컴포넌트에서 setstate와 같은 기능을하는 것은

 

클래스 컴포넌트에서는

extends Component을 통해 class component를 만든다.

 

 

화면에 그리기 render()

클래스 안에 함수 만들때는 function적는것 빼기

 

클래스 안에 this.onClickCounter (클래스 안에 있는것을 접근하기 위해)

 

자바스크립트 클래스 밖에서 this를 하면,

가장 최상위인 window를 가르킨다.

 

this.alert("dd")은 window.alert("dd")와 같다.

 

onClickCounter()는 클릭했을때 실행이된다.

새로운 환경이 만들어지고 onClickCounter() 환경에서 this는 클래스가 아니라 윈도우.

실제 실행했을때, this는 window를 가르켜서 에러가 난다.

this.onClickCounter.bind(this)

class의 this라고 명시

 

onClickCounter에서 바인딩한후로 부터 this는 클라스안 this가 된다.

 

 

 

두번째 방법

lexical this

화살표함수로 변경하면 바인딩하지 않아도 this가 클라스의 this를 가르킨다.

 

컴포넌트 생명주기

 

실행되는 순서

deprecated 이 기능에서 대해서 더이상 기능을 안한다.

사용하는 경우 예

4번은? 채팅방에서 특정 사용자 나갔을때

 

의존성 배열 (dependency array)

배열에서 하나 바뀌면 useEffect실행

[]가 없으면 뭐하나라도 바뀌면 다시 실행 - class 컴포넌트에서 componentDidUpdate와 같음

DidMount는 빈배열 []