Synchronizing with Effects

Synchronizing with Effects

Effects?

외부의 시스템과 동기화 할 필요가 있을 때가 있다.

• 리액트 컴포넌트 기반이 아닌 리액트 상태를 조종할 때
• 서버 연결을 설정할 때
• 컴포넌트가 화면에 나타날 때 통계 로그를 보내야 할 때

Effects는 렌더링 후에 동작할 수 있게 해준다. 그래서 리액트 외부의 시스템과 컴포넌트가 동기화 할 수 있게 해준다.

will learn

• effects가 무엇인가
• 이벤트와 에펙이 어떻게 다른가
• 컴포넌트에 에펙을 선언하는 방법
• 에펙이 필요하지 않을 때 re-running을 피할 수 있는가
• 개발모드에서 왜 에펙이 두번 동작하는가 그리고 어떻게 고치는가

리액트 컴포넌트안의 두가지 타입의 로직

1. Rendering code :

• 컴포넌트의 최상위에서 동작하는 것.
• props, state를 받고 변형하고 스크린에 JSX로 리턴하는 것.
• 렌더링 코드는 순수(pure)해야한다. 수학공식처럼 결과값만 계산해야 한다.

2. Event handlers :

• 계산만 하는게 아닌 컴포넌트안에 함수를 실행하게 하는 것.
• input필드를 업데이트 하거나 물건을 사기위해 HTTP POST를 제출해 요청하거나다른 스크린으로 이동시키는 것.
• 특정한 유저의 동작을 위해 'side effects'를 포함한다.(버튼 클릭이나 타이핑같은)

Effects를 사용하면 특정 이벤트가 아닌 렌더링 자체로 인해 발생하는 부작용을 지정할 수 있습니다.

Effects는 스크린 업데이트 후 커밋이 된 가장 마지막에 실행된다. - 리액트 컴포넌트와 외부의 시스템이 동기화하기 좋은 타이밍이다.

Effect이 필요하지 않을 수도 있다.

• 특정 상태만을 조절하기 위한 상태일때는 에펙이 필요하지 않을 수 있다.

How to write an Effect

1. Declare an Effect. 에펙은 모든 렌더 순간마다 동작한다.
2. Specify the Effect dependencies. 필요한 순간에만 re-run하기위해 특정 dependencies를 사용한다.
3. Add cleanup if needed. 어떤 에펙들은 멈추고 뒤로가고 깨끗이 하는지를 특정지어 주어야 한다.

Step 1 : Declare an Effect

컴포넌트가 렌더될때마다 리액트는 스크린을 업데이트 하고 그 다음 useEffect 내부의 코드를 실행시킵니다. 다시 말해 useEffect는 해당 렌더가 화면에 반영될 때까지 코드 조각이 실행되는 것을 "지연"시킵니다.

useEffect( ( ) => { } )

(JSX가 렌더링 된 후 side effect이 동작 할 수 있도록 useEffect에 기능을 넣어준다.)

Step 2 : Specify the Effect dependencies

외부의 시스템과 동기화 하는간 항상 즉각적이지 않다. 그래서 필요하지 않은 부분은 최소한으로 해서 넘기고 싶을 때 dependencies를 사용한다.

예) 키보드를 누를때마다 챗 서버와 새로 연결하는 것
예) 컴포넌트가 나타날 때 처음에만 페이드인이 동작 해야 하는데 키보드를 누를때마다 컴포넌트의 페이드인 애니메이션이 동작하는 것

• [ ]을 넣어 Effect 동작시 필요 없는 렌더링은 스킵 할 수 있다.
• [ ]안에 여러개의 dependencies를 넣을 수 있다.

(useEffect( ( )=>{ },[ ] )

useEffect(() => {
// This runs after every render
});

useEffect(() => {
// This runs only on mount (when the component appears)
}, []);

useEffect(() => {
// This runs on mount and also if either a or b have changed since the last render
}, [a, b]);

Step 3 : Add cleanup if needed

• 컴포넌트가 유저에게 보일 때만 동작하게 하기
• 콘솔에 두번 log가 찍히는 이유는 컴포넌트가 unmount되어도 연결이 해제되지 않았기 때문이다. => clean up 작업이 필요!

  useEffect(() => {
    const connection = createConnection();
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, []);

console...
dev 에서는 세번 보인다
"✅ Connecting..."
"❌ Disconnected."
"✅ Connecting..."

product에서는 한번만 보인다.
"✅ Connecting..."
(strict 모드를 끄면 dev처럼 보이긴 하는데 추천하진 않는다.)

How to handle the Effect firing twice in development?

1. Controlling non-React widgets : no needed clean up.
2. Subscribing to events : return unSubscribing.
3. Triggering animations : reset to the initial values.
4. Fetching data : If your Effect fetches something, the cleanup function should either abort the fetch or ignore its result.
5. Sending analytics : 어짜피 유저는 볼 수 없기 때문에 기존의 코드를 유지 할 것.

총 결론
1. useEffect가 필요한 부분을 잘 파악해서 사용 할 것.
2. useEffect는 JSX가 렌더링 다음 사이드 이펙이 가능하게 해 줌.