detail page 접속 후 2초 이내에 특정 메세지 사라지게 하기
특정 메세지 : 2초 이내 구매시 할인
alert를 띄워줄 곳에 삼항연산자를 적는다
스위치같은 기능을 이용해서 코드를 작성하기 위해
detail function안, return 전에 useState()를 선언한다
useEffect안에 setTime함수를 작성해준다
특정 메세지가 2초후에 사라지도록 작성하는거니까
useState로 선언해놓은 setAlert를 (false)로 작성해서 사라지도록 만들어준다
*** 위와 같이 써도 되지만,
코드 끝에 [ ]를 붙여주면 더 정확하게 된다
만약,
useEffect(() => {
// 타이머 주는 법 : setTimeout함수는 밀리세컨드 단위
// 1000 = 1초
setTimeout(() => {
setAlert(false);
}, 2000);
}, [count]);이렇게 작성해주면 count라는 state가 변할 때 실행이 됨
즉, [ ]은 useEffect 실행 조건 넣을 수 있는 곳이다
*** 주의사항 : mount(처음 실행시)에도 변함
mount시, count라는 state가 변할 때 실행이 됨
- [ ]안에 아무것도 안적어주면
오직 mount될때만 실행됨 !
update할 때 실행 X
- 위 return안에 써주는 함수를 clean up 함수라고 부르는데,
어떤 작업 전에 깔끔하게 정리하고 하고 싶을 때 사용함
위 코드의 활용 에시
setTimeout함수를 어떤 변수로 선언해주고,
clearTimeout 함수에 그 변수를 넣어서 사용함
*** 참고
: clean up function은 mount시 실행안됨, unmount시 실행됨
useEffect 총정리
- 재렌더링마다 코드 실행하고 싶으면
useEffect(()=>{ })- mount시 1회 코드 실행하고 싶으면
useEffect(()=>{ },[])- unmount시 1회 코드 실행하고 싶으면
useEffect(()=>{
return () => {
},[])-
useEffect 실행 전에 뭔가 실행하려면
언제나 return( ) => { } -
특정 state 변경시에만 실행하려면 [state명]
mount : 컴포넌트가 처음으로 DOM에 삽입되는 과정
unmount : 컴포넌트가 DOM에서 제거되는 과정
DOM은 뭐지?
-
Document Object Model의 약자
-
웹 페이지를 스크립트 또는 프로그래밍 언어들이 사용할 수 있는 구조로 표현한 것을 의미
이를 통해 프로그램은 문서 구조, 스타일, 내용 등을 변경할 수 있음 -
웹 페이지는 HTML로 작성되며, 브라우저가 HTML을 로드하면 이 HTML 코드를 해석하여 DOM 트리라는 메모리 내 표현을 생성함. 이 DOM 트리는 객체의 형태로 문서의 구조와 내용을 나타냄
-
React에서는 가상 DOM(Virtual DOM)이라는 개념이 중요한 역할을 함
React 컴포넌트가 렌더링될 때 실제 DOM에 직접적으로 접근하는 대신 가상 DOM에 렌더링하고,
이 가상 DOM과 실제 DOM 간의 차이점(diff)를 계산하여 실제 필요한 부분만 업데이트함
이렇게 함으로써 React는 성능 최적화를 달성하며 사용자 경험을 개선함
