10.05.22{코딩일기}벨로퍼트와 함께하는 모던 리액트 1-16 챕터리뷰

[ 새롭게 알게 된 것 ]

---

1.컴포넌트 등장을 다른말로 마운트라고 함. 드디어 마운트가 무슨뜻인지 알게됨.

---

언마운트될때는 반대로 컴포넌트 사라질때를 의미함.

---

 

2. useEffect는 컴포넌트 등장 상태 따라 특정 작업 가능케함

---

컴포넌트 안에 아래와 같이 useEffect를 사용할 수 있음

참고로 useEffect는 Hook을  사용함.

참고로, useEffect의 첫번째 파라미터에는 함수이고

두번째 파라미터에는 의존값이 들어있는 (deps) 를 넣을 수 있음

  useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);
  return (
...생략

---

 

3. useEffect 왜 사용하는지 이유를 알게됨

---

useEffect를 사용해 마운트,언마운트,업데이트 할 작업을 한꺼번에 설정해줄 수 있음. 단 deps가 있을때 가능.

deps가 없으면 컴포넌트가 마운트 될때만 작업이 가능함.

여기서 작업이란 useEffect에 등록한 함수를 의미..

---

 

4.  useEffect 사용시 deps에 props나 상태를 왜 등록하는지 알게됨

---

useEffect안에는 사용하는 상태나 props가 있을때 deps에 넣어줄 수 있음.

근데 이 deps를 안넣어주면 useEffect에 등록한 함수가 실행 될때 최신props/상태를 가르키지 않게 됨.

최신 상태를 가르키지 않으면 컴포넌트는 무슨 작업이 일어나냐?

컴포넌트가 리렌더링 될 때마다 호출이 됨. 바뀐 내용이 없다 할지라도.. 상당히 컴포넌트 최적화 하는데 안

---

 

5.  deps에 특정값 없으면 cleanup함수가 뒷처리해줌.

---

useEffect는 cleanup이라는 함수를 반환하는데, 이는 useEffect의 뒷정리를 해줌.

호출되는 시점은 컴포넌트가 언마운트될때 cleanup함수가 호출됨.

---

 

6. 컴포넌트 리렌더링 상속 특성을 알게됨

---

컴포넌트는 기본적으로 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트 또한 리렌더링 됨

물론 실제 DOM에 변화가 반영되는 것은 바뀐 컴포넌트에 한함.

하지만 virtual DOM에는 모든걸 다 렌더링하고 있다는걸 처음 알게됨.

책 후반부에 다루겠지만 컴포넌트를 최적화 하는 과정에서 기존의 내용을 그대로 사용하면서 

가상돔에 렌더링하는 리소스를 아낄 수 있는 방법이 있다고 함.

---