[Week4/WIL] 라이프사이클(클래스형 vs 함수형), react hooks

Week/ WIL keyword : 라이프사이클(클래스형 vs 함수형), react hooks

🌸 What I felt this week

피곤한 한주...😓

👑 WIL (Weekly I Learned)

미니 프로젝트

https://github.com/lovysunny7/mytodolistredux

클래스형 라이프 사이클

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
라이프 사이클 함수는 클래스형 컴포넌트에서만 사용한다.

• 컴포넌트는 생성되고 → 수정(업데이트)되고 → 사라진다.
• 생성은 처음으로 컴포넌트를 불러오는 단계이다
• 수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트
  • props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
  • 또는, 강제로 업데이트 했을 경우! (forceUpdate()를 통해 강제로 컴포넌트를 업데이트했을 때.)
  • 제거는 페이지를 이동하거나, 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계
• 1) constructor()
  생성자 함수, 제일 먼저 호출
• 2) render()
  컴포넌트의 모양 정의
  state, props에 접근해서 데이터를 보여줄 수 있음
• 3) componentDidMount()
  마운트(Mount)는 컴포넌트가 화면에 나타나는 것을 뜻한다.
  didMount이므로 마운트가 완료됬다는 뜻으로
• 4) componentDidUpdate(prevProps, prevState, snapshot)
  리렌더링 완료한 후 실행되는 함수
  각각 업데이트가 되기전에 실행되는 함수
  DidUpdate()가 실행될 때도 가상돔이 실제돔으로 올라간 후니까 DOM 관련 처리를 해도됨
• 5) componentWillUnmount()

훅

• 함수형 컨포넌트로 상태값 관리 여러 React 기능을 사용할 수 있게 하기 위해 태어났음
• 컴포넌트의 최상위에서만 호출할 수 있음

1) useState()
상태 관리는 위한 훅으로써, 값을 넣어두고 참조하기 위한 변수, 값을 바꿔주기 위한 함수를 반환한다.

const [value, setValue] = useState("hello, world"); // state 관리

• 구조 분해 할당
  구조 분해 할당은 자바스크립트 표현식 중 하나, 배열이나 객체의 속성을 해체해서 각각의 값을 개별 변수에 할당하게 해주는 것.
  배열이나 딕셔너리의 []나 {}를 제거하고 안에 담긴 걸 새 변수에 담는다고 생각하면 편하다.

2) useEffect()
컴포넌트의 사이드 이펙트 관리 훅, 화면에서 수정된 후, 화면에서 사라질때 작업

useEffect(() => {
  if(is_loaded){ // 화면에 그려질때 (첨, 수정 둘 다) //Mount
    window.alert("hi! im ready! ٩(๑•̀o•́๑)و");
  }
  return () => { // 화면에 사라질때 //Unmount
    window.alert("bye!");
  }
}, [is_loaded]); // 의존성 배열, 여기 값이 변했을 때 useEffect() 실행 //Update

3) useCallBack()
함수를 메모이제이션 하기 위한 훅
메모이제이션이란 쉽게 말해 메모리 어딘가에 저장해두고 쓴다는 말이며, 함수형 컴포넌트가 리렌더링되면 컴포넌트 안에 선언해둔 함수나 인라인으로 작성한 함수를 다시 한 번 생성하게 되는데 이는 어떤 컴포넌트가 총 10번 렌더링된다면 그 안에 작성해둔 함수들도 10번 만들어지는거고 이건 메모리 관리가 비효율적이게 된다.
useCallBack()은 함수를 메모이제이션해서 여러번 만들지 않게 해주며, 주로 자식 컴포넌트에게 전달해주는 콜백 함수를 메모이제이션할 때 쓴다.

const myNewFunction = useCallback(() => {
 console.log("hey!", need_update);
}, [need_update]);

In short, 훅은 한 마디로 클래스형 컴포넌트 기능 합쳐놓은 거라고 생각하면 된다. 그리고 정의 내리는 것에 따라 조금씩 역할이 달라지지만, 사용성은 좀 더 편리하다.