useEffect 사용 방법
useEffect 함수형 컴포넌트에서 렌더링 이후 발생하는 부수효과(Side Effect)를 위해 사용한다.
P1. useEffect 사용 이유
1. Side Effect vs Pure Function
순수함수(Pure Function)
- 순수 함수는 인자에만 의존하고 부수 효과가 없는 함수 입니다.
- 인자에만 의존한다는 말은 같은 인자를 넣으면 항상 같은 결과를 돌려준다는 것을 의미합니다.
부수효과(Side Effect)
- 부수효과는 함수가 리턴 값 이외에 하는 모든 일을 말합니다.
- 예를 들어, 메일을 보내거나 전역 상태 수정하기 같은 일이 부수 효과 입니다.
2. In React Component
Rendering Code (Pure Function)
- Rendering Code(Descri UI)는 반드시 Pure(부수효과가 없는 함수)해야 한다.
- 개발자는 Props와 State를 활용하여, 테마에 맞게 변환하고, 화면에 보여주고 싶은 JSX 반환한다.
- 수학 공식과 같이, 오로지 결과만을 계산해야 한다.
Event Handlers ( Side Effect )
- Event handlers(Adding Interactivity)은 컴포넌트 안에 중첩된 함수로 계산이 아닌 동작 수행이 목적이다.
- Event handlers ① Input 항목을 업데이트 하거나, ② 제품 구매를 위해 HTTP POST 전송 및 ③ 다른 화면으로 유저를 이동시킬 수도 있다.
- Evnet hanlders은 유저의 구체적인 행동(Ex. Click, Typing)에 따라 발생하는 "Side Effect" 발생시킨다.
Use Effect ( Side Effect )
- Event 外 다음 내용을 부수효과(Side Effect) 고려할 수 있다.
- 예를 들어, 화면에 표시될 때 마다 채팅 서버에 연결해야 하는 "ChatRoom" 컴포넌트가 있다고 가정하자.
- 서버에 연결하는 것은 순수 계산 함수(Side)이 아니기 때문에 렌더링 중에는 발생할 수 없다.
- 하지만, 채팅방에 표시되도록 하는 Click과 같은 특정 이벤트가 존재하지 않는다.
3. useEffect 사용이유
- useEffect를 사용하여 개발자로 하여금 특정 이벤트가 아니라 렌더링 자체로 발생하는 부수효과를 구체적으로 지정할 수 있습니다.
- "useEffect" 스크린 업데이트가 완료된 커밋(Commit)이후에 동작합니다.
- 왜냐하면 해당 시점이 다른 외부 시스템(Ex. 네트워크, 제3자 라이브러리)을 동기화시키기 좋은 시점이기 때문입니다.
P2. useEffect 사용 방법
1. useEffect 사용 방법
( useEffect 사용된 컴포넌트가 렌더링이 완료된 후에, 미디어 API 코드가 동작하는 부수효과가 발생한다. )
- 모든 컴포넌트가 렌더링 될때 마다, React는 화면을 업데이트 하고 나서 "useEffect" 안에 있는 코드가 실행(run)된다.
- 즉, useEffect는 화면에 렌더링이 완료될 때까지 useEffect 안에 있는 코드의 작동을 "지연(Delay)" 시킨다.
2. useEffect 사용 유의점(1)
( 의존성을 지정하지 않는 경우, Re-Rendring 될때 마다 불필요한 부수효과가 계속 발생한다. )
( 의존성에 빈배열을 지정하는 경우, 최초 Rendring 이후 에만 부수효과가 발생하기 때문에 사용자가 아무리 "Play" 버튼을 클릭해도 동영상은 재생되지 않는다. )
( 따라서, 의존성 배열에 Value(isPlaying)을 지정하면 해당 Value가 변경될 때마다 Side Effect가 발생할 수 있도록 제어할 수 있다. )
3. useEffect 사용 유의점(2)
( 컴포넌트가 렌더링 될때 마다, 서버연결(부수효과) 코드가 동작하고 있다. )
( Clean-Up 함수를 활용하여, 컴포넌트가 화면에서 사라질때(Un-Mount) 해당함수가 동작하여 서버와의 연결을 끊는다. )
( 사용자가 다른 Page로 이동하였다가(navigat) 다시 Chat-Room 접속하는 경우, 다시 채팅 서버에 연결을 요청하는 코드가 작동된다. )
- User가 다른 Page에 이동하는 경우, 해당 컴포넌트(ChatRoom)가 화면에서 사라질때(un-mount) 채팅 서버와 연결을 해제하는 코드가 작동한다.
- 즉, useEffcet를 사용하여 발생한 부수효과에 따른 버그가 생기지 않도록 유의해서 사용해야 한다.
4. useEffect 사용 유의점(3)
useEffect(() => {
// 연결된 외부 홈페이지(서버)에 제품의 결재를 요청하는 코드
}, [])function handleClick() {
// 연결된 외부 홈페이지(서버)에 제품의 결재를 요청하는 코드
} - User 상호작용하는 부수효과의 경우, 반드시 Event로 처리하여야 한다.
- 왜냐하면 useEffect를 사용하는 경우 렌더링에 의해 "결재"라는 부수효과를 다루는 경우, User가 다시 페이지를 렌더링 하는 경우(새로고침 또는 뒤로 버튼 클릭)하는 경우 다시 "결재"라는 부수효과가 발생하기 때문이다.
