패스트캠퍼스 챌린지 3일차 - 리액트 Hooks

 

리액트는 컴포넌트 단위로 사용되는데 여기서 컴포넌트란 element의 집합을 의미한다.

ex) input 여러개~, form 등등을 요소로 칭한다.

 

지난 강의에서 바닐라js로 구현한 검색입력창을 리액트 훅(useState)을 이용하여 구현해보았다.

See the Pen 검색입력창 vjs by BEGINNERWW (@beginnerww) on CodePen.

 

컴포넌트 상태관리 : useState (함수형 컴포넌트에서 변수 관리)

 

    const [keyword, setKeyword] = useState("")

 

useState의 return값이 배열형태이기 때문에 변수 선언시 배열의 비구조화 할당(destructuring) 기법을 이용해 두 개의 변수를 선언한다.

(물론 const keywordState = React.useState(""); 로 선언 후 배열 index로 각각 변수 선언하여 이용할수도 있다.)

 

setState시 이전값(prev)이 자동으로 주입되어 있다.

따라서 [state, setState] 라면,

setState(!state)도 가능하지만 setShow((prev) => (!prev)); 도 가능하다.

---

 

컴포넌트 사이드이펙트 다루기 : useEffect 

 

        - 변수 또는 객체의 값의 변화를 인지하고 업데이트 해주는 함수

         - 사이드이펙트이기 때문에, 컴포넌트가 다 그려지고나서 작동한다.

 

         - 실행되는 조건

              1) 페이지 처음 렌더링시 무조건 실행

              2) useEffect 안에 배열로 지정한 useState의 값이 변경되면 실행

 

          - 사용방법

              1) useEffect(() => {});

                  가장 기본적인 형태이나 dependency가 없어 작은 요소라도 변화하면 계속 실행되어,

                  불필요한 실행이 많아져 거의 사용하지 않는다.

              2) useEffect(() => {}, []);

                  렌더링 후 단 한번만 실행하고 싶을때 사용하는 방법

                  대괄호[] 안에 변수나 값을 지정하지 않고 비어있다면, 렌더링 후 단 한번만 실행된다.

              3) const [name, setName] = useState();

                  useEffect(() => {}, [name]);

                  렌더링 후 한번, 배열 안 변수의 값이 변할 때마다 실행된다.

---

function useLocalStorage(itemName, value = ""){
  const [state, setState] = React.useState(() => {
    return window.localStorage.getItem(itemName) || value;
  });
  
  React.useEffect(() => {
    window.localStorage.setItem(itemName, state);
  }, [state]);
  
  return [state, setState];
}

 

커스텀 훅 만들기 : 훅의 반복 

 

        - 어떠한 액션에 대한 반복을 함수화해서 중복된 코드를 줄여나갔었는데,

          훅도 마찬가지로 커스텀 훅(함수화)을 만들어서 불필요한 코드를 줄일 수 있다.

        - 강의에 나온 커스텀 훅은 state를 localStorage에 저장하고 state 값이 변할때마다 localStorage에 저장된 값도 변경하는 내용이다.

        - 커스텀 훅이라고 크게 무언가 다른 건 없었고 사용되는 위치, 역할에 따라 구조에 신경써야될 것 같다.

---

 

Hook flow 이해하기

 

- useEffect 는 render가 완료된 후 이루어진다.

- 해당 컴포넌트의 변화(update)시 useEffect clean up이 먼저 실행되고 useEffect가 실행된다.

  React.useEffect(() => {
    console.log("useEffect, empty deps");
    
     return () => {
      console.log("App useEffect [CleanUp] empty deps");
    }
  }, []);

- 컴포넌트가 Parent, Child 로 이루어져 있다면,

 

  1. App 실행 > Parent 렌더 start > useState > Parent 렌더 end > Parent useEffect

  2. 이벤트 발생으로 Child 컴포넌트 렌더시

     Parent 컴포넌트 렌더 start, end > Child 렌더 start, useState, end > Parent useEffect Clean Up > Child useEffect > Parent useEffect

  3. Child 컴포넌트의 요소 변경으로 인한 useEffect 실행

     Child 렌더 start, end > Child useEffect Clean Up > Childs useEffect

  4. 이벤트 발생으로 Child 컴포넌트 제거시

     Parent 컴포넌트 렌더 start, end > Child useEffect Clean Up > Parent seEffect Clean Up > Parent useEffect

 

 

 

 

 

 

https://bit.ly/3FVdhDa

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

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

 

 

 

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