2021년 8월 3일에 작성된 문서 2번 입니다.
React 배운 내용을 정리했습니다.
Side Effect
- 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우
let foo = 'hello';
function bar() {
foo = 'world';
}
bar(); // bar는 Side Effect를 발생시킵니다!
// 전역 변수 foo를 bar라는 함수가 수정하는 예제입Pure Function (순수 함수)
- 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수
function upper(str) {
return str.toUpperCase();
// toUpperCase 메소드는 원본을 수정하지 않습니다 (Immutable)
}
upper('hello') // 'HELLO'- 순수 함수에는 Side Effect가 없다.
- 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장.
- 예측 가능한 함수
React의 함수 컴포넌트
function SingleTweet({ writer, body, createdAt }) {
return <div>
<div>{writer}</div>
<div>{createdAt}</div>
<div>{body}</div>
</div>
}- React는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공.
Effect Hook
useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook- 이 컴포넌트에서 실행하는 Side effect는 브라우저 API를 이용하여, 타이틀을 변경하는 것
API
useEffect(함수)
useEffect의 첫번째 인자는 함수입니다. 해당 함수 내에서 side effect를 실행하면 됩니다. 이 함수는 다음과 같은 조건에서 실행됩니다.
- 컴포넌트 생성 후 처음 화면에 렌더링(표시)
- 컴포넌트에 새로운 props가 전달되며 렌더링
- 컴포넌트에 상태(state)가 바뀌며 렌더링
매 번 새롭게 컴포넌트가 렌더링될 때 Effect Hook이 실행
Hook을 쓸 때 주의점
- 최상위에서만 Hook을 호출
- React 함수 내에서 Hook을 호출
조건부 effect 발생
useEffect의 두 번째 인자는 배열입니다. 이 배열은 조건을 담고 있습니다. 여기서 조건은 boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미합니다. 따라서, 해당 배열엔 어떤 값의 목록이 들어갑니다. 이 배열을 특별히 종속성 배열이라고 부릅니다.
- 명언 목록 (
proverbs) - 필터링할 문자열 (
effect) - 카운트 (
count)
한편, 카운트를 올리는 버튼은 컴포넌트의 상태가 바뀌고 업데이트 되지만, 아무리 버튼을 눌러도 effect 함수는 실행되지 않습니다. 왜냐하면, 종속성 배열에는
filter만 존재하고,count는 존재하지 않기 때문입니다.
API
useEffect(함수, [종속성1, 종속성2, ...])
useEffect의 두 번째 인자는 종속성 배열.- 배열 내의 종속성1, 또는 종속성2의 값이 변할 때, 첫 번째 인자의 함수가 실행.
배열 내의 어떤 값이 변할 때에만, (effect가 발생하는) 함수가 실행.
단 한번만 실행되는 Effect 함수
만일 종속성 목록에 아무런 종속성도 없다면 어떤 일이 발생할까요? 달리 말해, 두 번째 배열을 빈 배열
[]로 둘 경우에는 무슨일이 발생할까요? 두 번째 인자를 아예 안넘기는 것과 어떻게 다를까요?1. 빈 배열 넣기
useEffect(함수, [])2. 아무것도 넣지 않기 (기본 형태)
useEffect(함수)
-
(2번) : 기본 형태의 useEffect는 컴포넌트가 처음 생성되거나, props가 업데이트되거나, 상태(state)가 업데이트될 때 effect 함수가 실행.
-
(1번) : 빈 배열을 useEffect의 두 번째 인자로 사용하면, 이 때에는 컴포넌트가 처음 생성될때만 effect 함수가 실행.
Written with StackEdit.
