REACT 폐관수련ing

🦭 어제 코드에 이어서 요로코롬 코드를 만들었다.
개인적으로 서타일드-캄포난트 넌.. 최고야..
게으른 나에게 저런 꿀을..!
근데 저거 남용하면 무지막지하게 헷갈릴듯(아마도)

🦭 useEffect를 사용해서 저렇게 다시 코드를 설정해주었다.

useEffect? 그게 뭐죠 ?

🙎‍♂️ react HOOK 중 하나죠 뭐 별거없어요.
일단 Lifecycle을 먼저 알아야 할 것 같군요.

Life..뭐? 내가아는거라곤 Bicycle밖에 없는데요 (ㅈㅅ)

🤦‍♂️ 일단 드립 수준이 브론즈급이라 죄송합니다.
별거 없어요 기냥 component의 인생이랄카....✨
뭐 캄포난트 태어나기 가눙, 저승가기 가눙, 관련된 state가 변경되면 재렌더링 가눙 ! 이런거 ?

그럼 HOOK은 뭔데요 ㅡㅡ 힙찔이세요 ?

🤦‍♂️ 죄송합니다 새벽이라 드립주머니가 쪼그라들다 못해 말라 비틀어져서...
암튼 hook도 뭐 없어여 걍 캄포난트 인생 중간중간 참견한다고 해야하나 끼어든다해야하나..
예를들어서!
Detail 컴포넌트 등장 전에 이것좀 하라
Detail 컴포넌트 사라지기 전에 저것좀 하라
Detail 컴포넌트 업데이트 되고나서 이것좀 하라
야! Detail 컴포넌트 개소리좀 안나게 하라!!!!(?)
hook으로 이런거 가능하도록 코드를 짤 수 있다는 것!
Hook의 정확한 명칭은 Lifecycle Hook 이라고 한대요🥰(사과코딩 피셜)

현기증 나요 ho..아니 useEffect 사용법 빨리!!

🤦‍♂️ 입금하면 알랴드림
ㅈㅅ 농임

import React, {useState, useEffect} from 'react'; //👈 이거 필수! 까묵 ㄴㄴ

function Detail(){ // 자기의 캄포난트 안에!

  useEffect(()=>{
    // 컴포넌트가 첫 등장하고나서 실행하고싶은 코드를 쓰세요
  }); // 요로코롬 useEffect를 넣어줍니다!
  
  return (
	HTML 좌르르륵 적어둔 코드들
  )
}

ㅤ🙋‍♂️ 참고로
useEffect 내의 코드 실행 조건은

• mount 끝났을 때! (캄포난트 뙇 하고 나오고 로딩 끝난 후)
• update 되고난 후에! (캄포난트 재렌더링 되고난 후)

잠깐 스크롤 화르륵 내리지 마셈 말할거 두 개 더 있다눙

  useEffect(()=>{
    return function 어쩌구(){ 실행할 코드 } 
  });

위는 Component가 사라질 때 코드를 실행하고 싶다면 return을 뚜들겨 넣어줍시다
아래는 useEffect를 여러개 사용하고 싶다면 저렇게 순서대로 쓰면됨 (순서대로 실행된다)

  useEffect(()=>{
    //첫 번째로 실행하고 싶은 코드
  });
  useEffect(()=>{
    //두 번째로 실행하고 싶은 코드
  });

이거 블로그 글올릴라고 console.log() 쓰는거지 뭐 내가 몰라가지고 그러는거아님 진짜아님..ㅠㅠ

잠깐!✋ useEffect 에 대해 할말 조금 더 있어요 기다료!

ㅤ🤷‍♂️ [alert] 이 친구 꼭 써야해요 ?
아래의 코드처럼 기냥 쓰면 안되냐고여 예 ? 🤔

  useEffect(() => {
    let timer = setTimeout(() => { setAlert(false); }, 2000);
    return () => { clearTimeout(timer);console.log("타이머와 함께 사라져라 얍!") }
  });

ㅤ🤦‍♂️ 님 저렇게 짜면 아래의 사진처럼 input에 뭐 뚜들겨 칠때마다 콘솔 숫자도 올라가요 보이시죠 ?

JUM-MA 저거 왜저래요 ?

ㅤ🤦‍♂️ 그건 저도 알고 싶어요 왜저러는지는 직 접 구 글 링 하 시 죠 (몰라서 설명못해줌 sorry)

아 그래서 useEffect 마지막부분에 [alert] 넣은거에요 ?

ㅤ🙎‍♂️ 그렇습니다. 저 기능을 한국말로 풀어쓰자면
ㅤ"업데이트 될 때는 useEffect() 실행 멈춰!✋" 입니다.

useEffect(() => {
	솰라솰라 코드 솰라솰라 호롤ㄹ롤롤ㄹ로}, []);

저렇게 함수 끝부분에 []를 집어넣으면 됩니다.
제가 쓴 코드([alert])처럼 []안에 state도 넣을 수 있읍니다.

useEffect(() => {
	솰라솰라 코드 솰라솰라 호롤ㄹ롤롤ㄹ로}, [alert]);

👉 alert라는 이름의 state가 변경이 될 때만 업데이트로 치고 useEffect 실행하쇼
저렇게 코드짜면 컴포넌트(지금 제 코드에선 <Detail/>)가 로드될 때도 실행되겠죠?
ㅤ🦖 TMI
ㅤ[]안에 state는 콤마(,)로 여러개 넣을 수 있다.
ㅤ🤷‍♂️ 왜 그럴 수 있어요 ?
ㅤ🙎‍♂️ 모릅니다. 만든사람한테 물어보쇼; 나는 구글이가 아닙니다!!

오늘의 삽질 🥄

오늘의 왜때문에 🐣

🦭 이건 진짜 모르겠는데 ? 이거 console.log("타이머와 함께 사라져라 얍!") 코드를 setTimeout()안에
넣으면 어째서 console.log가 두 번 뜨는 것인가... 왜 ? 왜 ? 아 왜!?!??!

왜때문에 -해결편 🐥

🦭 디스코드 모 프로그래밍 커뮤니티 채널에 질문글을 올려볼까 말까 곰인하다가 결국 올려부럿다.
ㅤ🤷‍♂️ 님 영어 왜 저 모냥이에요 ?
ㅤ🤦‍♂️ ㅈㅅ 저 중국어는 좀 치는데(사실 중국어도 야매임) 영어는.... 죄송합니다....

🦭 되게 멍멍떡같은 영어로 물어봤는데 의외로 대답을 잘해주셨다.
ㅤ🤷‍♂️ 그래서 왜 두번 뜨는거래여 ?
ㅤ🙎‍♂️ 저처럼 영알못이에요 ? abcd 몰라요 ? 쒸익쒸익(ㅈㅅ)
ㅤㅤsetTimeout이 실행됨가 동시에 alert의 state가 바뀐다
ㅤㅤ👉 console.log("타이머와 함께 사라져라 얍!") 콘솔창에 출력 !
ㅤㅤ2초 후(내가 2000이라 설정해뒀으니) alert의 state가 또 바뀐다.
ㅤㅤ👉 console.log("타이머와 함께 사라져라 얍!") 1번 더 콘솔창에 뜸
근디 질문 하기전에 디버깅해볼걸; 나 핑프짓했네;;;;아땀나;;;;;

  useEffect(() => {
    let timer = setTimeout(() => { setAlert(false); }, 2000);
    return () => { clearTimeout(timer); console.log("타이머와 함께 사라져라 얍!") }
  }, [alert]);

ㅤ💁‍♂️ 요렇게 console.log("타이머와 함께 사라져라 얍!")을 return안에 넣으면
ㅤㅤ설정한 setTimeout()(여기선 2초 후)이 실행된 후 return문이 실행되니까
ㅤㅤ콘솔창에 한 번만 출력이 된다 !

🦭 저런 좋은 답변을 얻고 감사함과 동시에 나 영어 awful이라고 이해고맙다구 인사를 하니
문제없다고 😭.... 정말 전 세계 개발자들은 아량도 넓고 이해심도 넓고..체고야..!
이 자리를 빌어서 정말 감사하다는 말씀 드립니다 (이 블로그의 존재자체를 모르겠지만요)

오늘의 일기

REACT는 재밋고 난 아직 JS에 관한 지식이 매우매우 부족하다는 것을 깨달았다.
hook이나 setTimeout()같은거야 뭐 필요할 때 마다 구글링해서
두들겨 끼워 쓰면 되지만 (물론 기초적인건 알아야 한다는 것을 잘 알고 있읍니다. 반박시 당신말이 다맞음 🥰)
JS에 대해선 정말...아직도 부족한 것 같다. 난 멍청이야 난 바보 난 최악이야
세상에서 내가 제일 코딩 못할듯
엉엉엉ㅇ엉엉ㅇㅇ어엉어어
반박시 그 말도 당신말이 다맞음 엉엉ㅇ어어어

Sae Eleisa Tera Vi