자기계발 캠퍼스

useEffect는 예전에도 배웠었지만 기억이 조금 희미한 관계로 다시 정리해보려 한다. useState와 마찬가지로 정말 중요한 훅이라고 생각하기 때문. 일단 useEffect 공식문서 먼저 보자. useEffect를 알아보기 전에 effect라는 게 뭔지 알아보자. side effect나 effect라 불리는 녀석은 눈에 보이지 않는 행동들을 의미한다고 보면 된다. 예를 들어 데이터를 fetch하거나 구독을 설정하거나 리액트 컴포넌트의 DOM을 수정하는 것을 의미한다. 구독 설정 보이는데요? 그거는 데이터에 따라서 ui가 바뀌게 만들어놓은거고 멍충아 이제 아래 예시를 보자. useState처럼 리액트에서 그냥 불러오면 되고 useEffect 안에 저런 함수가 있다. useEffect 안에 있는 함수는..

useState를 배웠으니 useEffect라는 훅을 살펴보자. useState를 활용하면 setState를 계속해서 해주고 state 값을 계속해서 리-렌더링해주게 된다. 하지만 예를 들어 날씨나 교통상황과 같은 데이터를 받을 때 useState를 활용하면 setState가 실행될 때마다 계속해서 데이터를 받아와야하는 고생을 해야한다. 이를 방지하고자 하는 것이 바로 useEffect라는 훅이다. (리액트 공식 홈페이지 링크 걸어놓음) counter와 keyword의 두 개의 state를 활용하여 useEffect를 살펴보자. useEffect의 문법은 이렇다 useEffect(실행할 내용, 변수) 실행할 내용은 위와 같은 console.log나 어떤 함수의 내용이나 아무거나 상관없다. 뒤에 나오는 변..