WIL 8/1 ~ 7

이번주 느낀점 

이번주는 주특기 숙련 주차를 마치고 주특기 심화 주차를 시작했다. 심화 주차부터는 개인 프로젝트가 아닌 팀 프로젝트를 시작했다 각각의 파트를 나누고 와이어 프레임도 그리고 할 게 굉장히 많았다. 각각의 파트를 나누는 것도 쉬운일이 아니었다 이제부터는 팀 프로젝트만 있는데 막막하다. 어떻게 해야할지 모르겠다.

오늘의 주제는 라이프사이클(클래스형 vs 함수형), react hooks 이다 

 

 

라이프 사이클 클래스형 vs 함수형 차이점은 ?

클래스형 컴포넌트

라이프 사이클

리액트의 컴포넌트는 모두 라이프 사이클(Life cycle, 혹은 생명주기)을 가집니다. 아래는 주로 사용되는 라이프 사이클 함수들입니다.

리액트 훅이 나오기 전에는 이러한 라이프 사이클을 관리하기 위해서 주로 클래스형 컴포넌트를 사용했다고 합니다. 물론 state 관리도 가능했기 때문입니다.

라이프 사이클들은 크게 세 가지로 나눌 수 있습니다.

• 일반적인 순서
  생성될 때 (마운트 될 때 - Mounting) : constructor, render, componentDidMount
  업데이트할 때(Updating) : render, componentDidUpdate
  제거할 때 (마운트 해제 될 때 - Unmounting) : componentWillUnmount

함수형 컴포넌트

라이프 사이클

• 생성될 때 (마운트 될 때 - Mounting) :

useEffect(() => {
 console.log(“ComponentDidMount”);
 }, []);

• 업데이트할 때(Updating)

useEffect(() => {
 console.log(“ComponentDidMount & ComponentDidUpdate”);
 });

• 제거할 때 (마운트 해제 될 때 - Unmounting)

useEffect(() => {
 return () => {
 console.log(“ComponentWillUnmount”);
 };
 }, []);

리액트 Hooks

useState: state를 사용할 수 있게 됩니다. 관리하고 있는 state가 업데이트 되면 컴포넌트가 리렌더링 됩니다.
useMemo: 캐싱을 지원하여 컴포넌트 내부 연산 작업을 최적화할 수 있습니다.
useCallback: 함수의 레퍼런스를 제어하여 최적화하는 데 사용됩니다.

이 외에도 많은 훅이 있다