패스트캠퍼스 챌린지 9일차 - 리액트 컴포넌트 생명주기

 

리액트의 컴포넌트 생명주기는 굉장히 유명한 도표로 한눈에 알수있다.

이 도표는 클래스 컴포넌트에 맞게 표기되어있고 강의 또한 리액트 공식문서에 나와있는대로 클래스 컴포넌트를 기준으로 설명한다.

 

 

요즘 강의를 들으면서 vscode 세팅이 귀찮을거 같아서(CRA를 이용한 세팅) repl.it을 이용하고 있는데,

클래스 컴포넌트의 this에 대한 특이점을 설명해 주었는데, 그것을 좀더 쉽게 arrow-function을 이용하면 binding을 따로 하지 않아도 해당 클래스 내의 함수인 것을 인지한다는 내용의 코드를 적용했더니

@babel/plugin-proposal-class-properties 를 install 해야된다는 에러가 떠서 install 했는데 제대로 작동하지 않아 강의로 의미만 설명듣고 넘겨버렸다. 

repl.it는 webpack 대신 vite를 이용해서 번들링 하고 있는데 vite 관련 내용은 구글에 별로 나오지 않더라

추후 Go로 만들어진 번들러 vite와 Go언어에 대해서도 공부해봐야겠다. 언제 할 수 있을지 장담할 수는 없지만....

(repl.it 은 원래 번들러로 webpack을 사용했는데 vite로 바꾸었다고 한다. 속도도 빠르고 간편하다고....)

 

 

 

컴포넌트 생명주기

 

클래스 컴포넌트는 도표대로 constructor >> render >> componentDidMount 하여 렌터링되고,

업데이트는 componentDidUpdate

컴포넌트가 해제될 때는 componentWillUnmount 가 적용된다.

 

지난 강의에서 클래스 컴포넌트의 생명주기 메소드는 functional component에서 어떻게 대체되고 있는지 설명해주었는데 이번강 의에서도 조금 언급되었다.

 

constructor에서 state 초기화되는 부분은 useState 훅으로,

메소드(함수) 바인딩은 arrow - function으로(클래스 컴포넌트 내에서 생성자에서 바인딩을 직접하지 않고 간편하게 처리할 수 있는 방법),

함수형 컴포넌트 내에서는 함수를 선언에도 잘 인식한다.

 

componentDidMount는 useEffect 훅으로

componentWillUnmount는 useEffect의 return(clean Up)으로 구현이 가능하다.

 

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.