[react] 마운트 언마운트 - timer 예제

 

 

https://muna76.tistory.com/204

[react] 배열에 항목 수정하기

(이어서)

 

 

마운트 시에 하는 작업

1. props로 받은 값을 컴포넌트의 로컬 상태로 설정

2. 외부 API 요청 (REST API 등)

3. 라이브러리 사용

4. setInterval을 통한 반복작업 혹은 setTimeout을 통한 작업 예약

 

언마운트시 하는 작업

1. setInterval , setTimeout 을 사용하여 등록한 작업들 clear하기 (clearInterval,cleatTimeout)

2. 라이브러리 인스턴스 제거

 

마운팅 작업에 대해 이해도를 높히기 위해

혜준님의 블로그에서 본 예제로 실습을 진행해봤다.

 

import react,{useState , useEffect} from 'react'

const Timer = (props) => { // 여기 props를 왜 받는건지?? 넘겨주는 값도 없는데...
	useEffect(()=>{
    	const timer = setInterval(()=>{
        	console.log("째깍째깍")
        },1000);
        return(
        	clearInterval(timer);
        	console.log("타이머 멈춰 !")
        );
    },[]);
    return(
    	<div>
        	타이머 시작 !
        </div>
    )
}

function App(){
	const [ showTimer,setShowTimer ] = useState(false)
    
    return(
    	<div>
        { showTimer && <Timer/> }
        </div>
        <button
        	onClick = {()=>{
            	setShowTimer(!showTimer)
            }}
        >
        	Toggle Timer
        </button>
    )
}

export default App;

 

여기서 헷갈렸던 부분

{ showTimer && <Timer/> } 

이게 무슨 의미??

 

https://ko.reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

조건부 렌더링 – React

 

React 공식문서 조건부 렌더링에 보면 자세히 나와있다.

 

논리 && 연산자로 If를 인라인으로 표현하기

- JSX 안에는 중괄호를 이용해서 표현식을 포함 할 수 있습니다. 그 안에 JavaScript의 논리 연산자 &&를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있습니다.

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

// 결과

JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가됩니다.

따라서 && 뒤의 엘리먼트는 조건이 true일때 출력이 됩니다. 조건이 false라면 React는 무시하고 건너뜁니다.

 

쉽게 말해서

jsx에서

{ 이 안에 자바스크립트를 넣을 수 있는 영역 }

이렇게 쓸수있고 따라서 리액트에서 자스 구문으로 컴포넌트를 보일지 말지 if문을 표현해준것 

 

true && something

이렇게 써주면 something이 렌더링 됨.

false && something

이렇게 써주면 리액트가 무시하고 건너뛰게 됨

 

 

 

 

이 부분을 삼항연산자로 작성해줄 수도 있다.

// App.js

return(
    <>
    <div className="App">
    {showTimer ?  <Timer/>:''}
    <button
      onClick={()=>{
        setShowTimer(!showTimer)
      }}
    >
      Toggle Timer
    </button>
    </div>
    </>
    )

이런 식으로다가..

 

 

완성된 코드를 화면에 찍어보면

 

 

이렇게 뜬다.

 처음에는 showTimer의 기본 상태값이 false이기 때문에 화면에는 토글타이머 버튼만 존재한다.

 

' Toggle Timer ' 버튼을 누르면 

Timer 컴포넌트가 화면에서 나타나게 되면서 useEffect의 마운트시 찍히는 콘솔이 실행된다(여기서 setInterval)

그래서 타이머 돌아가는중.... 이라는 콘솔이 1초마다 찍히고

그상태에서 다시

Toggle Timer 버튼을 누르게 되면

Timer 컴포넌트가 사라지게 되면서 언마운트 클린업 함수가 실행된다 (여기서 clearInterval 해주고 콘솔에는 "타이머 종료"가 찍히게)