API, UseEffect로 관리하기

Use Effect가 아직 어떤 녀석인지 잘모르겠다.. 

공식문서 확인 고고

UseEffect = 함수 컴포넌트 내에서 side Effect 를 처리하기 위해 사용한다.

*Side Effect란 함수가 실행되면서 함수외부에 존재하는 값이나 상태를 변경시키는 행위이다.

ex) 함수내에서 전역변수의 값을 변경시키거나 함수외부 버튼의 텍스트를 변경하고,

네트워크를 통해 데이터를 송신하는 것등이 있다.

 

함수는 전달받은 매개변수를 통해 연산을 수행하고 결과를 반환해야하며 결과는 항상 일관되고 예측 할수있어야한다.

그래야 프로그램이 쉽고 단순하며 유지보수 하기가 쉬워지기 때문이다.

 

리액트에는 절차형 프로그래밍에서 흔히 존재하는 작업인 Side Effect 처리를 위해 Use Effect() 함수가 있다.

 

예시를 활용해 알아보자면 (출처 : https://dmitripavlutin.com/react-useeffect-explanation/)

권장하지 않는 코드 작성사례

위 의 경우 함수안의 name으로 함수밖의 document.title 을 변경시키고있다.

이것은 함수외부와 상호 작용하는 side effect 코드이다. 

권장하는 작성 사례

이런 경우 Use Effect()를 사용하여 name의 값이 변할때에 document.title  을 새롭게 렌더링 해준다.

또한, 이렇게 사용하면 Use Effect()가 적절할때에 작업을 수행해주기 때문에 함수형 컴포넌트가 빠르게 렌더링 될수있게 

도와주며, 개발자들은 리액트의 정확한 렌더링 시점을 알수있어 통제하기가 수월해 집니다.

 

 useEffect (callback [, dependencies]);

to be continue....