[React] Day_36 데일리 정리

 

그래. 덤벼라 챌린지.

 

스낀다드에서 성장한 림졍! 그녀의 첫 챌린지반 후기는요?

 

챌린지반의 장점 : 어라라 하더니 갑자기 TIL이 뚝-딱 만들어지는 매애애애애애zic ⭐️

(그렇다고 강의정리 안한다는거 아님. 개인과제도 안 한다는 거 아님)

챌린지반의 단점 : .. 이걸 이해하는데 조오큼(?)의 시간이 걸림.

 

뭐 여튼 오랜만에 과제 같은걸 하니 학부시절 돌아간 거 같고 재밌네요 ^-^

여튼 정리 한 건 아까우니까.. 오늘 TIL은 이 친구로 어디 한번 써내려 보도록 하죠 라쯔고.

 

 

챌린지반 스터디 정리 - 반응형 effects 의 생애주기

음... 다음에는 그냥 한국어 대신 원서를 봐야겠당 ^-^..

리액트 공식문서는 대충 이렇습니다💁🏻‍♂️

너무 거만하게 적었나요.. 그렇다면 미안합니다..

Intro

effects는 컴포넌트와 다른 생명주기를 가짐. (알아두자.)

컴포넌트, 마운트, 업데이트 or 언마운트 가능

cf. 용어정리

• 마운트 : 컴포넌트가 DOM에 처음 추가되어 화면에 표시되는 시점 (컴포넌트가 화면에 생성된다는 것)
• 업데이트 : 컴포넌트가 새로운 props나 state를 받으면서 재렌더링되는 단계
• 언마운트 : 컴포넌트가 더 이상 필요하지 않아 DOM에서 제거될 때의 단계 +) componentWillUnmount 메서드를 사용 → 컴포넌트가 제거되기 전 clean-up(정리 작업) 가능

effect의 역할 : 동기화를 시작과 동기화를 중지, 두 가지 작업만 수행

• 시간이 지나며 props와 state가 변하면? → effect, 동기화를 여러 번 반복 가능해짐
• React, 효과적인 동기화 위해 의존성을 올바르게 지정하도록 린터 규칙 제공 (항상 최신 props & state와 동기화되도록 도움)

 

 

effect의 생명주기

모든 React 컴포넌트는 동일한 생명주기를 거침

[ 컴포넌트의 생명주기 ]

• 화면에 추가될 때 마운트
• 일반적으로 상호작용에 대한 응답으로 새로운 props나 state 수신 시, 업데이트
• 화면에서 제거되면 언마운트

→ 컴포넌트에 대해서는 생각하는건 좋지만 아직 effects에 대해 생각하지 말자.

대신 컴포넌트의 생명주기와 독립적으로 생각해보며 생명주기에 대해 알아보도록 하자.

effect의 생명주기를 알기 위해선 ‘외부 시스템 - 현재 props&state’ 의 동기화 방법에 대해 먼저 알아야 함

(Effect, 코드가 변경될 때 동기화 빈도를 조절하는 역할을 수행.)

아래의 예시 코드를 통해 알아보도록 하자.

// 컴포넌트가 특정 채팅방(roomId)에 연결될 때와 연결 해제될 때의 과정을 보여주는 코드
const serverUrl = '<https://localhost:1234>';

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect(); // 동기화 시작
    return () => {
      connection.disconnect(); // 동기화 중지
    };
  }, [roomId]);
  // ...
}

• effect의 본문 = 동기화를 시작하는 방법을 나타냄. (connection.connect()로 서버에 연결)
• cleanup 함수 = 동기화를 중지하는 방법을 정의 (connection.disconnect()로 서버 연결 해제)

React는 컴포넌트가 처음 마운트될 때 동기화를 시작하고, 언마운트될 때 동기화를 중지.

그러나 props나 state가 바뀌면 마운트 상태에서도 동기화를 여러 번 시작하고 중지할 수 있음.

(추가) 일부 effects, cleanup 함수 전혀 반환하지 않음. ((중요))

대부분의 경우 함수를 반환하고 싶겠지만, 그렇지 않은 경우 React는 빈 cleanup 함수 반환한 것처럼 동작함

 

 

의존성 배열에서 동기화가  두 번 이상 수행되어야 하는 이유

예시를 통해 알아보도록 하죠.

ChatRoom 컴포넌트가 사용자가 드롭다운에서 선택한 roomId prop을 받는다고 가정해보자.

처음에 사용자가 "general" 대화방을 선택했다면, 앱은 "general" 채팅방을 화면에 표시한다.

const serverUrl = '<https://localhost:1234>';

function ChatRoom({ roomId /* "general" */ }) {
  // ...
  return <h1>Welcome to the {roomId} room!</h1>;
}

 

UI가 표시되면 React, effect를 실행하여 동기화를 시작. "general" 방에 연결한다.

function ChatRoom({ roomId /* "general" */ }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // "general" 방에 연결
    connection.connect();
    return () => {
      connection.disconnect(); // "general" 방에서 연결 해제
    };
  }, [roomId]);
  // ...

 

나중에 사용자가 드롭다운에서 다른 방(예: "travel")을 선택 시, React는 먼저 UI를 업데이트함.

function ChatRoom({ roomId /* "travel" */ }) {
  // ...
  return <h1>Welcome to the {roomId} room!</h1>;
}

 

"travel" 방은 UI에 표시되지만, 이전에 실행된 effect는 여전히 "general" 방에 연결되어 있다.

이를 통해 roomId prop 변경으로 인해, "general" 방과의 동기화는 UI와 더 이상 일치하지 않는다는 것을 알 수 있다.

이 시점에서 React가 해야 할 작업은 아래와 같다.

1. 이전 roomId와의 동기화 중지 ("general" 방 연결 끊기).
2. 새로운 roomId와 동기화 시작 ("travel" 방에 연결).

이 작업을 올바른 순서로 호출한다면, React는 필요한 동기화 유지가 가능해짐

 

 

React가 effect를 재동기화하는 방법

ChatRoom 컴포넌트가 roomId prop을 받으면(=새로운 값을 받게되면)

React, 이전 방과의 연결을 끊고 새 방과 동기화하기 위해 effect 다시 실행

• 이전 동기화 중지 : roomId가 "general"에서 "travel"로 변경 시 React, "general" 방의 연결을 끊기 위해 cleanup 함수 호출.

function ChatRoom({ roomId /* "general" */ }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // "general" 방에 연결
    connection.connect();
    return () => {
      connection.disconnect(); // "general" 방에서 연결 해제
    };
    // ...

 

• 새 동기화 시작 : React, 렌더링 중에 effect 실행 → "travel" 방과 다시 동기화

function ChatRoom({ roomId /* "travel" */ }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // "travel" 방에 연결
    connection.connect();
    // ...
//// 이제 사용자가 UI에서 선택한 방과 동일한 방에 연결됨.

 

• 변경될 때마다 재동기화
  컴포넌트, 다른 roomId로 다시 렌더링할 때마다 effect, 다시 동기화됨
  ex) 사용자가 roomId를 "travel"에서 "music"으로 바꾸면?
  → React는 "travel" 방의 연결을 해제한 후 "music" 방과 다시 연결.

• 언마운트 시, 동기화 중지
  사용자가 다른 화면으로 이동하여 ChatRoom이 언마운트되면?
  → React, 마지막으로 연결을 끊고동기화를 중지 (연결 상태를 유지할 필요 없어짐.)

 

effect의 관점에서 생각하기

ChatRoom 컴포넌트의 관점에서 effect에 어떤 일이 일어났는지 정리하면 다음과 같다.

1. roomId가 "general"으로 설정되어 마운트되면, "general" 대화방에 연결
2. roomId가 "travel"으로 변경되면, "general" 방의 연결을 끊고 "travel" 방에 새로 연결
3. roomId가 "music"으로 변경되면, "travel" 방의 연결을 끊고 "music" 방에 새로 연결
4. 컴포넌트 언마운트 시, 마지막 연결인 "music" 방의 연결을 끊음.

결론 : 컴포넌트의 관점에서 보지 않고 하나(동기화)의 시작과 끝(중지) 에만 집중해보자.

(컴포넌트 관점에서 본다면 많이 복잡해지기 때문) → ( 마운트 / 업데이트 ) <<<<<< ( 동기화 시작 / 중지 )

즉, effect는 컴포넌트의 생명주기와는 독립적으로, 동기화를 시작하는 방법과 중지하는 방법만 생각하기.

→ 컴포넌트가 어떻게 화면에 나타나야 하는지에 대한 설명만 적으면 됨. 나머지는 React가 알아서 처리해줌.

 

 

마무리 - 이번 주말엔 드디어 카페에서 코딩해봐야지(?)

이번 주말의 림졍모습.jpg

 

그렇다! 챌린지반의 내용은 정말 도움이 많이된다!

하지만 그만큼 내용이 조금 쉽지않다! (막상 정리해놓고 어? 이거 맞나 하는 경우가 많음)

ㅎㅎ.. 나도 프로젝트 구상해야하는데 뭐하지..

지금 생각하긴 귀찮으니까 주말에 해야ㅈl ㅇㅅaㅇ

이번주에 이쁜 친구들이랑 개발밋업하는데

... 새로 산 키보드랑 이것저것 들고가서 코딩해야겠지?

(나도 이제 어엿한 개발za라구요.)

 여튼 오늘은 이쯤에서 마무리짓고 가보렵니다.

굳바이! 아싸 이제 주말이다!

 

 

 

KPT 회고

• Keep :  오자마자 챌린지과제한 나 칭차내!
• Problem : ... 언제까지 미룰래 개인과제 ^-^?
• Try : 이덕수씨... 이번주엔 우리 작별하자..

(\ /)

( >.0) o

o_(")(")  The End.