React(리액트) 티키타카 13 (useEffect Hook )

2024.10.03 - [React] - React(리액트) 티키타카 12 (useRef Hook )

까지 아니 벌써 다 읽었다면, 어찌 훌륭하다 아니 할 수 없지 아니하당.

 

12(12개월)는 소우주를 60(환갑)은 대우주를 경험한 것이니, 이제

당신의 손가락은  뇌의  간헐적 도움만으로도 화면을 지배할 느끼미를 가진당.

 

보통 사이드효과라 불리는 useEffect 훅(Hook)을 훅하고 알아보장.

혀에 미리 잼을 바른 다음에 빵을 먹는 듯한 재미가 쏠2개당.(쏠쏠)

 

Counter3.jsx

import { useEffect, useState } from "react";
import MyButton from "./MyButton";

function Counter3() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`안농 경미니 ${count}`);
  });

  return (
    <>
      <h1>
        경미니 <span style={{ color: "red" }}>{count}</span>뻔 호출
      </h1>
      <MyButton
        style={{ color: "yellow" }}
        onClick={() => {
          setCount(count + 1);
        }}
      >
        누르숑
      </MyButton>
    </>
  );
}

export default Counter3;

 

 App.jsx

import Counter3 from "./Counter3";

function App() {
  return (
    <div>
      <Counter3 />
    </div>
  );
}

export default App;

 

결과가 시선을 원한당.

누르숑을 누를때 마다 useEffect 안 console.log가 실행됨을 알 수 있당.

이거슨 무슨 의미?  count 변수는  useState hook을 사용했기 때문에 reactive 변수당.

곧 이 값이 바뀌면, Count3는 다시 그려지게 된당(re-rendering).

다시 그려질 때 마다 실행되었단 의미가 으미 심장하당.

 

Counter3.jsx 의 useEffect 부분만 아래 처럼 사알짝 땜질해보장.

(눈에 거슬리는 밑줄이 생긴다면 ,일단 마구 무시해 버리장)

  useEffect(() => {
    console.log(`안농 경미니 ${count}`);
  }, []);

결과를 다시 확인하면, 버튼을 눌러도 console.log가 딱 1번 밖에 찍혀있음을 안당.

곧 처음에만 한번 실행되고, 다시 그려질 땐 실행되지 않는당.

 

다시 아래 처럼 추가 망치질을 해보장.

  useEffect(() => {
    console.log(`안농 경미니 ${count}`);
  }, [count]);

결과를 다시 확인해 보면 버튼을 누를 때 마다 console.log가 다시 찍힘이 보인당.

, [ count ]);  부분을 디펜던시(dependecy)라 부르는뎅, 

요 배열안에 있는 변수 값이 바뀔때마다 실행한다는 의미당.(오켕?)

 

Counter3.jsx 를 아래 처럼 수정해보장( count2  추가에 주목)

import { useEffect, useState } from "react";
import MyButton from "./MyButton";

function Counter3() {
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);

  useEffect(() => {
    console.log(`안농 경미니 ${count}`);
  }, [count]);

  return (
    <>
      <h1>
        경미니{" "}
        <span style={{ color: "red" }}>
          {count} {count2}
        </span>
        뻔 호출
      </h1>
      <MyButton
        style={{ color: "yellow" }}
        onClick={() => {
          setCount(count + 1);
        }}
      >
        누르숑
      </MyButton>
      <MyButton
        style={{ color: "pink" }}
        onClick={() => {
          setCount2(count2 + 1);
        }}
      >
        누르삼
      </MyButton>
    </>
  );
}

export default Counter3;

 

결과를 확인하면, 누르숑을 누르면 로그가 나오지만, 누르삼은 로그가 안나온당.

 

, [ count ]); 를 , [ count, count2]); 로 고쳐서도 한번 해보장. Good!

분명 느끼미 오지 않을 수 없지 않지 않았음을 뇌가 반짝였을꺼시당.

 

한개 더 맛을 보장. useEffect(...) 부분을 아래처럼 꼬치당.

  useEffect(() => {
    console.log(`안농 경미니 ${count}`);

    // 요건 언제 실행 되어용
    return () => {
      console.log(`미누가 미우닝 ${count}`);
    };
  }, [count]);

 

결과를 확인해 보기 바란당. 이제 캡쳐는 지쳤당.

 

이제 정리를 해볼 시간이당.  

useEffect의 2번째 매개변수를 안 주면 그려질 때 마다 실행되고,

빈 배열 []을 주면, 처음 그려질 때(rendering) 1번만 실행되고,

배열안에 값을 주면 해당 값에 변화가 생길때만 실행된당.

useEffect 안에서 return 되는 함수의 로그도 보았을 거당.(얜 머예용?)

 

쪼메 더 정확히 이야기 하면 영어로는 mount / unmount 라는 표현을 쓰는데,장착 / 제거 라는

의미로 컴퓨터에 하드디스크등을 다는 것을 mount라 하고 빼는 것을 unmount라고 하였당.

이 표현을 빌려서 HTML 문서에 곧 document 객체에 DOM Element를 

추가하는 것을 mount, 제거하는 것을 unmount라고 하는뎅.

mount 될 때(append, appendChild...) 실행되는 것이 useEffect(..) 안의 코드고,

unmount(remove, removeChild...) 될 때 return 된 함수가 실행된당. 

말이 어렵당?, 괜찮당!   시간은 항상 젊디 젊은  당신(아직 환갑 머나 멈) 편이당.

(페이스북 개발자들도 평균 3개월을 소비했다닝..) 

 

Counter3.jsx 를 아래 처럼 수선한 뒤 결과 확인 요망!

import { useEffect, useState } from "react";
import MyButton from "./MyButton";

function Counter3() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`안농 경미니 ${count}`);

    return () => {
      console.log(`미누가 미우닝 ${count}`);
    };
  });

  return (
    <>
      {!count ? (
        <h1>흥</h1>
      ) : (
        <h1>
          경미니 <span style={{ color: "red" }}>{count}</span>뻔 호출
        </h1>
      )}
      <MyButton
        style={{ color: "yellow" }}
        onClick={() => {
          setCount(count + 1);
        }}
      >
        누르숑
      </MyButton>
      <MyButton
        onClick={() => {
          setCount(0);
        }}
      >
        0으로 초기황
      </MyButton>
    </>
  );
}

export default Counter3;

useEffect를 어디에 쓰면 좋을지 꼬옥 한번 고민해 보기 바란당. (???)

 

 

React  코딩 스타일에 익숙해지기 위해서 한 걸음만 더 나가보장.

아래 명령어로 faker(더미 데이터 생산용) 모듈을 개발용 Dependency로 설치 하장

npm install -D @faker-js/faker

덩말로 궁금하다면 아래 링크 방문해 주삼... (시르면 시름시름 앓는당)

https://www.npmjs.com/package/@faker-js/faker

 

Counter3.jsx 를 아래와 같이 새로 작성하장.(길지만 이미 거의 아는 거당!)

import { useEffect, useRef, useState } from "react";
import MyButton from "./MyButton";
import { faker } from "@faker-js/faker/locale/ko";

// 바꾸지 않을 값이라면 function밖에 또는(선택) 안에 써도 된당.
const avatarURL = "https://api.dicebear.com/9.x/adventurer/svg?seed=";
const bestFriens = [
  { fid: "f001", name: "경미닝", age: 24, avatar: "energy" },
  { fid: "f002", name: "미누니", age: 42, avatar: "hate" },
  { fid: "f003", name: "선주니", age: 29, avatar: "search" },
  { fid: "f004", name: "병처니", age: 27, avatar: "alcohol" },
];

// faker-js 이용
const person = faker.person;

function Counter3() {
  let fid = useRef(1);

  const [myFriend, setMyFriend] = useState(bestFriens);

  useEffect(() => {
    //console.log(`안농 경미니`);

    return () => {
      //console.log(`미누가 미우닝`);
    };
  }, [myFriend]);

  const addFriend = () => {
    const pName = person.firstName();
    const friend = {
      fid: `new${fid.current++}`,
      name: pName,
      age: Math.floor(Math.random() * 40) + 20,
      avatar: pName,
    };

    console.log("체킁:", friend);

    const friends = [friend, ...myFriend];
    setMyFriend(friends);
  };

  return (
    <>
      <MyButton onClick={addFriend}>띤구 추강</MyButton>
      <MyButton
        onClick={() => {
          setMyFriend([]);
        }}
      >
        띤구 클리엉
      </MyButton>
      {myFriend.length != 0 ? (
        myFriend
          .filter((friend) => friend.age < 40)
          .map((friend) => (
            <div key={friend.fid}>
              <span style={{ fontWeight: "bold" }}>{friend.name}</span>
              <img
                src={`${avatarURL}${friend.name}`}
                width={200}
                height={200}
              />
            </div>
          ))
      ) : (
        <h1>금수저 띤구 떠남</h1>
      )}
    </>
  );
}

export default Counter3;

 

결과에 시선이 별로 끌리지만 눌러본당.

filter(나이 40이하)로 미누를 골라낸 다음 3명을 화면에 그린당.

 

눈에 쌍심지를 꼬치처럼 세우고 봐야 할 부분은 아래당.

const friends = [friend, ...myFriend]; 
// myFriend.push(friend)  // 윗 줄을 주석처리 하고 이렇게 쓴다면...?? 꼬옥 해보길
setMyFriend(friends);

위 ... 전개 연산자(Spread Operator)가 이해가 안된다면

2023.06.14 - [자바스크립트] - 시베리안 허숙희의 자바스크립트 비기닝 18 (구조 분해 등등..)

필히 필사적으로 글을 딱딱 씹어서 읽고 먹고 와야 한당.

 

꽤나 중요한 부분인뎅.....  주석된 부분을 열고, 그 윗줄을 주석 처리하면

코드가 제대로 동작하지 않는당.  React는 같은 객체[여기선 배열]가 오면 변화가 없다고 판단한당.

새로운 객체를 할당해 주어야 한당.  중요하다면 그렇다면 기억하장.

이렇게 하는 이유는 메모리는 조금더 소비되겠지만, 객체 변화 history추적이 용이하당.

 

쓰는 나도 그렇지만, 분명 읽는 당신도 히미들꺼당. 어쩌면 알쏭달쏭?.....(ㅠㅠ)

오늘은 한글날 !  법정 공휴일!  공부는 이제 그만... 머라도 잼난 걸 찾아보장.~

다시 또 글씨로 만나요. 글씨도 비대면 코로나 예방효과 짜앙!~~(^-^)

 

---

 

꼬물 꼬물 눈망울 크던 국민핵교때 별명은 꺼벙이  머리좋은놈 

 

만화와 오락실이 우리집이었으면 하던 중학교때 별명은 E.T  4차원 궁금한 놈.. 등등

 

영화와 비디오에 미쳐버렸던 고등학교때 별명은 괴물 Monster  외계생물

 

그 중에 기쁨을 주던  별명은 Monster!  그냥 공룡이라도 된 기분이었을까?

 

지금의 난 연료통의 바닥을 긁고 있당. 구멍도 있었넹.... 

 

아센디오(위로 올라가!)    

 

먼저 가!~~  이제 난 옆으로 갈  연료도 없어!~~

 

그럼 쉬었다가 와.   사람은 쉬면 연료통도 수리 되고 연료도 채워져!

 

아!~~ 그럼  나 은페 엄폐 은퇴하는 거얌~~~  

 

지금의 난 자유로운 영혼 E7E당 !!!

 

https://www.youtube.com/watch?v=PGLx4V680J8