UseEffect

useEffect란?

 리액트에게 렌더링 후 컴포넌트가 특정 함수를 실행하게끔 할 때 사용.

 

 기본적으로, useEffect는 첫번째 렌더링(render)이 될 때 실행된다.

 

useEffect 사용법

1.Update 컴포넌트가 렌더링될 때마다 매번 콜백이 호출 

useEffect(()=>{
함수}
}

 

( 컴포넌트가 화면에 맨처음 랜더링 + 다시랜더링될 때(ex:state가 업데이트될 때 마다 컴포넌트는 다시 랜더링)) 다시 렌더링. 엄밀하게는 화면이 랜더링 된 후에 콜백이 실행됨.

 

여기서 문제가 생김. setState로 state값에 변화가 생겨 컴포넌트가 다시 렌더링 된다는 말은  <input type="text  onChange={callback}>과 같은 input이 여러개 있을 때input에 글자한자를 칠때마다 컴포넌트가 전 부 다 다시 렌더링 되고 useEffect안의 callback을 실행시킨다는 말임.

즉, 다음과 같은 예기치 못한 문제를 발생 시킬 수 있음.

login.jsx에서 index.js로 로그인을 하는 예제임.

 

문제분석 및 상황:

1. a@a라는 유저를 세션을 사용해서 로그인을 한 뒤 새로고침을 한 상태. 즉 현재 유저데이터가 setLoginStatus에 남아있는 상태

2.여기서 aa@a라는 db에 없는 유저를 사용해서 로그인 시도.

3."email does not exist"라는 메세지가 나와야 하는데(axios.post) , 세션에 저장된 a@a라는 유저정보가 계속 LoginStatus에 들어있는 상태.

추론:

4. axios.post에 들어있는 console.log()를 통해 "email does not exist"는 정상적으로 콘솔창에 찍힘

5. response.data.message값이 찍혔으므로 그 다음에 있는 setLoginState(response.data.message)가 당현히 실행 되었음을 알 수 있음. 하지만 화면에선 여전이 안뜸. setLoginState("email does not exist")가 바뀌었지만 바로 다른 state로 덮어쓰기 당했을 가능성이 있음

분석:

6. 새로고침후 화면이 뜰때 한번, aa@a 세션이 state를 바꿔줘서 1번 로그인창 클릭 2번(누를때 땔때 ) aa@a를 입력할때 4번 입력했으므로 useEffect가 1+1+2+4 총 8번 실행됨(세션이 걸려있고 백엔드의 get라우터가 다음과 같으므로 전부 true값이 찍힘

 if (req.session.email) {

    res.send({ loggedIn: true, user: req.session.email });

). 그러나 response.data.loggedIn값이 false이므로 state에 영향x

7.로그인 버튼을 누르는 순간 post로 백엔드를 갔다가 setLoginState("email does not exist")가 바뀜. 컴포넌트가 바뀌었으므로 useEffect가 또 다시 실행. axios.get이 다시 실행됨. 백엔드 라우터는 여전히 true임(콘솔에 true값이 3번 컴포넌트 변경1번, id창 초기화1번, pw초기화창 1번 ). 즉 get이 실행되면서 다시 state를 req.session.email로 바꿔줌.

 

해결방법:

빈 의존성 배열을 추가해주면 7번의 노란색 부분이 다시 실행되지 않으므로 4번의 회색부분이 남고 state가 정상적으로 변환됨. (콘솔에 찍히는 true값 처음 렌더링 될 때 단 한번)

 

 

위와 같은 에러를 막기위해서 의존성 배열이라는것이 등장함. 사용법은 다음과 같다.

2. Mount .첫 번째 렌더링 후 한번만 함수 호출(컴포넌트가 화면에 맨처음 랜더링될 때(즉 새로고침 누를때)) 화면에 첫렌더링

useEffect(()=>{
함수},[]
}

3.Update 첫 번째 렌더링 후에 호출되며, 이후에 input이 변경될 때마다 함수 호출(컴포넌트가 화면에 맨처음 랜더링될 때+ 배열안에 들어있는 인자 값이 바뀔 때) 다시렌더링

1useEffect(()=>{
함수},[input]
}

4.Unmount 화면에서 사라질 때

useEffect(()=>{
//구독..
return ()=>{
//구독해지
}},[]
}

 

사용 예

데이터 가져오기 또는 다른 명령API를 호출할 때 특히 많이 사용한다.

 

페이지가 랜더링이 되면(돔업데이트가) 백엔드의 localhost:3001에서 데이터를 가져오고 그걸 setState해줌

 

 

 

 

 

Why?이건 다시 공부해봐야함...확실하지 않음.

useEffect 자체가 함수형 컴포넌트에서 사용하는 녀석이고, js에서 함수의 특성상, 함수(컴포넌트)를 호출(랜더링)할때마다 함수의 코드 블럭이 처음부터 다시 실행이 된다.  그리고 그안에 선언한 모든 로컬 변수들은 함수의 실행 컨텍스 안에서 초기화된다. (State들은 초기화 되지 않는다)

 

기본적으로 useEffect는 매번 렌더링 될 때(setState로 state의 값을 바꿔줄때) 실행된다.