[React-Hook] 자바스크립트 비동기 처리 useState 와 useEffect 를 곁들인..

자바스크립트로 코드 짤 때 가장 헷갈린게 비동기 처리인 것 같다.

 

 

 

Vue 를 쓸 때도 그렇고 React 쓸 때도 그렇고 다 좋은데 비동기 처리는 진짜 짜증 났던 것 같다.

 

 

 

난 분명히 값을 할당했는데

undefined..

 

 

 

 

공부하고 정리 좀 해서 아까운 시간 쏟지 말자

 

 

 

୧╏ ՞ _ ՞ ╏୨

 

 

비동기 처리란

동기 처리는 동시에 일어남을 의미하고 비동기는 동시에 일어나지 않음을 의미한다.

 

동기 처리는 요청과 결과가 동시에 일어나기 때문에 코드가 직관적이고 이해하기 쉬운 반면에

▶ 여기서 값을 받으면 ~ 이거 하고 이거 해!

 

비 동기 처리는 결과가 나올 때 까지 기다리지 않고 다른 일을 처리할 수 있기 때문에 코드나 순서는 이해하기 어려워도 자원 사용을 좀 더 효율적으로 할 수 있다.
▶ 여기서 값을 받으면 ~ 그 전에 이것 좀 할게! 이거 하고 이거 해!

 

자바스크립트는 비동기 처리 방식을 사용한다..

 

정리하면 비동기 처리 방식인 자바스크립트는 요청과 결과가 순서대로 발생하지 않기 때문에 결과가 발생할 때까지 요청에 대한 처리를 주시해줘야 한다!

 

 

 

사실 이 부분은 텍스트로 읽는 것보단 코드 짜고 실행시켜보면서 직접 겪어보는게...  그 전까진 죽어도 이해가 안 됐었다.. 

 

 

 

 

 

비동기 처리를 위한 훅 : useState, useEffect 
store 관리를 위한 redux :  useSelector

이런 비동기 처리를 그나마 편하게 하기 위해 제공하는 훅이 있는데 useState와 useEffect이다.

 

 

 

useState

변수의 상태를 추척해준다 ** 추적이라는 단어가 매우 매우 중요하다.

 

useEffect

변수의 상태를 추적해 뭔가를 하게 해준다. ** 추적이라는 단어가 매우 매우 중요하다.

 

 

 

 

useState

 

 

  const [currentUser, setCurrentUser] = useState({초기에 currentUser에 지정할 내용});

위와 같은 코드는 currentUser 라는 변수를 useState 로 관리한다는 뜻이고 useState가 제공하는 핵심 기능은 추적의 기능을 사용할 수 있어 currentUser라는 변수의 내용이 변하면 자동으로 jsx가 재 렌더링 되어 변화된 변수가 화면에 반영된다. 

 

 

만약에 이렇게 useState 를 지정하지 않고 그냥 무작정

  const currentUser = "hello";

이런 식으로 변수를 설정하면 스크립트 내부에서 currentUser 변수에 변화가 있어도 jsx는 변수의 변화를 감지하지 못하기 때문에 어떻게 바뀌냐 얼마나 바뀌냐 언제 바뀌냐에 상관없이 그냥 hello라는 초기 상태만 표시하게 될 것이다.

 

 

 

 

useEffect

 

 

 

useEffect(() => {
    const load = async () => {
      try {
        if (user !== undefined) {
          setCurrentUser(user);
        }
      } catch (error) {
        console.log("하하");
      }
    };
    load();
    console.log("Hello");
  }, [user]);

useState와 비슷한 기능의 훅인데 useState는 변수를 추척해 변화가 생긴다면 재 렌더링 하는 기능이라면 useEffect는 변수를 추적해 변화가 생기면 어떠한 기능을 수행할 수 있게 해 준다.

 

생김새를 보면,

 

useEffect(() => {

{개발자가 꿈을 펼침}

}, [추척할 변수 지정]);

 

 

위 코드에 해석하면

user라는 변수를 추적해서 → [추적할 변수 지정]

이 변수에 변화가 생길 때마다 load() 를 실행한다 → {개발자가 꿈을 펼침}

 

 

 

 

 

리액트로 코드를 짤 때 변수에 대한 비동기 처리는 useState 와 useEffect와 같은 막강한 hook을 써서 정말 편하게 할 수 있다.

 

제대로만 알고 쓰면 너무 좋은 기능이다.

 

 

ᕦ( ᐛ )ᕡ