[ReactJS] 프로젝트 생성 / useEffect / CleanUp

 

1. ReactJS 프로그램 생성하는 법

cmd 창에서 파일을 생성하려고 하는 저장소로 이동 후 하단 명령어 입력

  npx create-react-app [ 프로젝트 이름 ]  

 

 

VSCode 에서는 터미널에서  npm start   명령어를 통해 프로그램을 실행

 

 

 

---

 

 

 

App.js

 

import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setValue((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);

  useEffect(() => { 
    console.log("I run only once."); // 변화가 일어나도 처음 프로그램 실행 시 단 한번만 실행
  }, []); // useEffect 함수가 [빈 곳]을 바라보고 있으면 코드가 딱 한 번만 실행될 수 있도록 보호

  useEffect(() => {
    console.log("I run when 'keyword' changes.");
  }, [keyword]); // keyword 변화할 때만 실행, counter 변화할 때는 실행 X 

  useEffect(() => {
    console.log("I run when 'counter' changes.");
  }, [counter]); // counter 변화할 때만 실행, keyword 변화할 때는 실행 X

  useEffect(() => {
    console.log("I run when keyword & counter change");
  }, [keyword, counter]); // keyword, counter 둘 다 지켜보고 있다가 둘 중 하나라도 변화할 때 실행

  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

 

React 앱에서는 state를 변경할 때 모든 code, component들이 다시 실행된다.

 

이러한 과정이 UI 관점으로 보면 새로운 데이터가 들어올 때마다 자동으로 새로고침 되니 방해되지 않지만,

특정 코드들은 처음 한 번만 실행시켜야 하는 경우가 생길 수 있다.

 

(또한, 코드의 크기가 커질수록 매번 새로고침 하는데에 걸리는 시간도 길어질테고...)

 

 

이럴 때는 useEffect 함수를 활용할 수 있다.

 

 

 

 

2.  useEffect 

 

useEffect 함수는 코드가 딱 한 번만 실행될 수 있도록 보호하는, 2개의 argument를 가지는 함수이다.

 

1번째 argument는 우리가 실행시키고 싶은 코드,

2번째 argument는 dependencies (React가 지켜보고 있다가 변화할 때 코드를 실행시키는 것)

 

이 때, 2번째 인자에 아무것도 없을 경우, React가 지켜볼 대상이 없기 때문에 코드가 한번만 실행될 것임을 의미한다.

--> 이러한 기능 때문에 useEffect 함수는 React가 동작하는 관점에서 말하자면.. 일종의 방어막 같은 것이라고 말할 수 있다.

 

  useEffect(( ) => { 
    console.log("I run only once."); // 변화가 일어나도 처음 프로그램 실행 시 단 한번만 실행
  }, [ ]); // useEffect 함수가 [빈 곳]을 바라보고 있으면 코드가 딱 한 번만 실행될 수 있도록 보호

 

 

 

 

3. Clean up

 

App.js

 

import { useState, useEffect } from "react";

function Hello() { // component를 show 상태를 주면 해당 함수가 실행
  useEffect(function () {
    console.log("hi :)"); // useEffect 함수가 빈 곳을 바라보는 상태이기 때문에 처음 실행될 때 한 번만 출력
    return function () {
      console.log("bye :("); // 종료될 때 bye함수를 만들어 리턴해주면 끝나는 시점을 확인할 수 있음
    };
  }, []);
}

/*
  useEffect(() => {
    console.log("hi :)");
    return () => console.log("bye :(");
  }, []);
  return <h1>Hello</h1>;
}
*/

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev); // setShowing을 통해 이전 value를 받아온 다음, 그 value의 반대값을 return 하는 것

  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

export default App;

 

 

해당 코드에서 보여주거나 숨기려고 하는 것은 다른 컴포넌트이다.

 

-> 컴포넌트는 어렵게 생각할 것 없이 JSX를 반환해주는 function이고, 

    사용할 때는 소문자가 아니라 대문자로 시작해야 한다. (ex. Hello)

    또한 자바스크립트를 작성하기 위해서는 중괄호를 사용해야 한다.

 

 

 

위 코드를 조금 살펴보면

Hello라는 컴포넌트를 hide할 때는 말 그대로 해당 컴포넌트를 화면에서 지워주고 있었음

그래서 다시 보여줄 때는 console.log("created"); 가 다시 작동할 수 있도록 하여 콘솔에 띄워주는 것

 

이와 반대로 destroy 할 때 콘솔에 뭔가 띄워주기 위해서는 컴포넌트가 destroy될 때 실행시킬 함수를 생성

 

바로바로 ~ useEffect function 안에 return 문을 하나 생성하는 것 !

 

 

 

이러한 과정에서 생성하는 함수를 Cleanup function이라고 부르며,

해당 함수를 통해 컴포넌트가 언제 create 됐는지, 언제 destroy 되었는지 확인할 수 있다.

 

 

필수적으로 확인해야 하는 상황이 생기거나, 코드 작동 확인을 위해 직접 눈으로 확인해보고 싶을 때 사용하면 굉장히 유용할 듯 하다 :)

 

 

 

 

4. useEffect를 사용하는 2가지 방법

( 중간에 주석처리 되어 있는 부분 참고 )

 

   1 )

 

 

   2 )  

 

 

위 두 코드는 같은 행동을 하지만,

함수의 모양새만 아주 조금 차이가 난다.

 

두 방식 중 선호하는(?) 본인에게 편한 방식을 사용하면 될 듯 하다 ^^7

 

 

---

 

 

https://nomadcoders.co/react-for-beginners

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders