들어가기
그동안 배운 개념을 통해 API에서 정보를 받아와 브라우저에 출력해보는 간단한 애플리케이션을 만들어 보고 싶었다. 데이터를 불러오는 것에는 성공했지만, API요청이 끝도 없이 반복되었다. 해결법을 찾다보니 Side Effect를 일으키는 함수를 제어해줄 수 있는 방법이 있다는 것을 알게되었다.
Side Effect(부수 효과)와 Pure Function(순수 함수)
Side Effect
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다.
React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 발생했다고 말한다
Pure Function
순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없다. 순수 함수는 입력으로 전달된 값을 수정하지 않는다.
React의 함수 컴포넌트
아래의 코드와 같이 props를 입력으로, JSX Element가 출력으로 나가는 경우, 그 어떤 Side Effect도 없으며, 순수 함수로 동작한다.
const UserInfo ({ name, profile, about }) => {
return <div>
<div>{name}</div>
<div>{profile}</div>
<div>{about}</div>
</div>
}하지만 React 애플리케이션을 작성할 때에는 fetch, axios를 사용한 API 요청과 LocalStorage, 타이머 API 등의 사용으로 Side Effect가 발생한다. React에서는 Side Effect를 다루기 위해 Hook인 Effect Hook을 제공한다.
Effect Hook
useEffect
useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook이다.
const [lists, setLists] = useState([])
const getList = async () => {
// 아래 코드는 예시이며 실제로 동작하지는 않는다.
const result = await fetch('http://oscar0421.velog/', {method: "GET"})
setLists(result)
}
useEffect(() => {
getList()
}, [])위 코드에서 Side Effect는 API를 이용하여 lists의 값을 변경하는 것이다.
API
useEffect(함수)
useEffect의 첫 번째 인자는 함수이다. 해당 함수 내에서 Side Effect를 실행하면 된다. 다음과 같은 상황에서 useEffect가 실행된다.
- 컴포넌트 생성 후 처음 화면에 렌더링(표시)
- 컴포넌트에 새로운 props가 전달되며 렌더링
- 컴포넌트에 상태(state)가 바뀌며 렌더링
컴포넌트가 새롭게 렌더링 될 때 Effect Hook이 실행된다.
Hook을 쓸 때 주의할 점
- 최상위에서만 Hook을 호출한다.
- React 함수 내에서 Hook을 호출한다.
조건부 effect 발생 (dependency array)
useEffect의 두 번째 인자는 배열이다. 이 배열은 조건을 담고 있으며, 조건은 boolean 형태의 표현식이 아닌 배열안의 값의 변경이 일어날 때를 의미한다. 이 배열을 종속성 배열이라 부른다.
단 한 번만 실행되는 Effect 함수
useEffect(func)
위와 같이 기본 형태의 useEffect 는 컴포넌트가 처음 생성되거나, props가 업데이트되거나, 상태(state)가 변경될 때 effect 함수가 실행된다.
useEffect(func)
위와 같이 빈 배열을 useEffect의 두 번째 인자로 사용하면, 컴포넌트가 처음 생성될 때만 effect 함수가 실행된다. 처음 단 한 번, API를 통해 리소스를 받아오고 호출이 필요하지 않을 때에 사용할 수 있다.
마치며.
오늘도 새로운 개념을 배울 수 있었다. 외부 API를 통해 리소스를 받아와 더욱 완성도 높은 웹을 구성할 수 있을거라는 생각에 기대가된다. 앞으로도 멋진 개발자가 되기 위해 화이팅!!
