본문 바로가기

useEffect2

[4월19일] 신입 개발자가 useEffect를 사용할 때 자주 일어나는 실수 어제에 이어 useEffect에 대한 정보를 찾아보다가, 유투브영상에서 재밌게 봤던 영상을 소개한다. 1. useEffect Dependency Mistakes 상태의 변동에 따라 useEffect를 이용해 특정 기능을 실행하고 싶을 때가 있을거다. 이 떄 주의해야할 점은 []안에 오브젝트 또는 배열을 넣어선 안된다는 점이다. 배열과 오브젝트의 값은 주소값을 가르키기 때문에, [1] == [2] 는 성립하지 않을 뿐더러 [1] == [1] 도 절대 성립하지 않는다. 객체형식 또한 마찬가지다. 그럼 특정 state가 오브젝트 형식으로 되어있고, 오브젝트 안 특정 값에 따라 useEffect를 동작하고 싶으면 어떻게 해야할까? 정답은 바로 useMemo이다. useMemo로 먼저 특정 state값을 저장해주.. 2023. 4. 20.
[4월17일] Using useEffect Effectively useEffect는 컴포넌트가 렌더링 될 때 마다 특정 작업을 수행하도록 지정할 수 있게해준다. 컴포넌트가 처음 렌더링 될 때, 그리고 컴포넌트가 언마운트 될 때 각각 수행해야되는 기능들을 등록해두면 알아서 기능수행을 해주기도 하고, 특정 상태의 변동에 따라 함수를 수현하도록 의존성 배열을 지정사용할 수 도 있다. 예를 들어 처음 렌더링 될 때 데이터를 불어오도록 할 수 있다. 인터넷에서 찾아보면, api를 useEffect에 담아 컴포넌트 또는 페이지 요소가 첫 로딩 될 때 api를 요청해서 데이터를 불러오는 방식으로 구현된 예제들이 매우 많다. 하지만 이런 방식은 중복되는 사이드이펙트를 일으킬 수 있어 매우 비효율적인 사용 방식이다. useEffect를 남용하지 말라는 내용은 리액트의 사용자라면 한번.. 2023. 4. 17.