useEffect()

leitmotif·2021년 8월 11일
0

개념 정리

목록 보기
7/10
post-thumbnail

🧐 개요

React Component는 Rerendering의 특성이 있습니다.

예를 들면,

dispatch(postView(props.idx))
    .then(response=>{
        const result = response.payload;
        if (result.postElement){
            setRows(result.rows);
        }
    })
    
return (
    <div>
    		{Rows}
    </div>
)

위와 같이 Post의 내용을 받아오는 js가 있다고 가정했을 때

router.get('/api/post/:page',function(req,res,next){
  const page = req.params.page;
  console.log("post is running");

이렇게 살포시 "post is running" 로그를 넣어보면

😬😬😬

지속적으로 리렌더링되며 서버 라우터가 호출되는 것을 볼 수 있습니다.

이것은 비효율적인 호출로, 우리는 필요할 때만 렌더링을 하고 싶습니다..

그것을 도와주는 것이 React Hook의 useEffect 입니다.

📋 useEffect

useEffect는 React Hook에서

상태 변화에 따라 특정 작업을 호출시켜주는 메서드입니다.

📎 Usage

import React, {useEffect} from 'react'

function TempFunc(props){
	useEffect(() =>{
		< 상태 변화시 호출시키고 싶은 작업 >
	},[])

}

export default TempFunc

useEffect는 함수와 state를 인자로 가집니다.

전달한 state가 변경되는 경우 함수가 호출되는 구조입니다.

한가지 예시를 들어보면.

공통 컴포넌트인 Navbar는 현재 클라이언트가 로그인했는지 여부에 따라 로그아웃 버튼을 렌더링하거나, 그렇지 않을 수 있습니다.

따라서 Session 값을 state로 선언하고, 변화에 따라 Navbar의 렌더링을 제어할 수 있습니다.

const [Session,setSession] = useState("")
    
useEffect(() =>{
  axios.get('/api/getSession')
  .then(response=>{
    setSession(result.data.isAuth)
  })
  
  const navRendering = () =>{
    return (
       <div>
          {Session ? <NavBarUser/> : <NavBar> }
       </div>
    )
  ReactDOM.render(navRendering(),document.getElementById('Container'))
},[Session])

return(
  <div id='Container'>
  </div>

세션이 존재하는 경우

로그아웃 버튼이 있는 NavBarUser를 렌더링하고

존재하지 않는다면

로그인 버튼이 있는 NavBar를 렌더링합니다.


🎯 마무리

항시 리렌더링되어야하는 요소는 functional component의 리턴 문에 작성하고

사용자의 요청에 따라 리렌더링되어야할 요소는

useEffect 내에 작성하여 효율을 높이는 것이 좋을 것 같습니다.

참고링크 : https://ko.reactjs.org/docs/hooks-effect.html

profile
[ ]-vation. 일상에 빗대 공감하고, 동기를 쥐어주는 개발자가 되고 싶습니다.

0개의 댓글