1. 구글/카카오 각각 callback 페이지를 만든다.
   • callback 페이지에는 로그인한 사용자의 닉네임 여부에 따라, 메인페이지로 갈지 nickname 페이지 갈지를 정한다.
2. nickname 작성 페이지를 만든다.
3. 구글/카카오 로그인 로직
   • store에서는 로그인 provider로 이동하는 로직과,
   • redirecTo를 옵션으로 추가해 로그인 성공 시 callback 페이지로 넘어가는 로직을 구현

[ 카카오 로그인 구현 ]

1. supabase 세팅

   • 필요한건 아래 kakao developers 세팅 과정에서 얻기

2. kakao developers 세팅

• 내 어플리케이션 추가

• 앱 키 얻기

• Redirect Url 삽입 (supabase callback url)

• 개인정보 동의항목 심사 신청

• 앱 아이콘 업로드 하기

• 비즈니스 -> 개인 개발자 비즈 앱 전환

• 개인정보 동의 항목 (모두 동의 (선택동의 가능))

• client secret 얻기

[ 유효성 검사 ]

[ 비밀번호 일치 여부 ]

[ 개인정보 수집 동의 ]

[ 이메일 중복 검사 ]

[ 구글 로그인 ]

1. supabase 세팅

• Clinet Id & Client Secret은 Google Clouds에서 받아오기

2. Google API 세팅

• Google Cloud에서 프로젝트 생성
• 사용자 인증 정보 만들기 추가
• supabase callback url 삽입

[ 구글 로그인 구현 중 생긴 에러 ]

• 구글 로그인은 성공
  • 구글 로그인 버튼 클릭 시 → 구글 redirect url로 넘어감
  • 로그인 이후에 메인 페이지로 이동
  • supabase user 테이블 데이터 들어오는거 확인
• 문제는 사용자 nickname을 받아올 수 없음
  • 시도 1 ) 구글 로그인에 성공하면 메인페이지가 아니라 nickname 생성하는 페이지로 callback 설정 (진행중)

• 비밀번호 일치 여부 확인

• 중간에 에러가 발생했는데
  • genTypes를 yarn으로 업데이트 하면서 바뀐 테이블명이 생겼는데
  • 그 부분을 사용하는 코드에서 바뀐 테이블명을 적용 시키지 않아서 에러 발생
• 해당 부분 수정하니 회원가입 정상 작동

회의 내용

• Code Convention
  • fetch or axios 선택
  • 핸들러 네이밍 맞추기
• 진도 관련해서 회의
  • 첫 주는 기획. 디자인에 집중
  • 둘째 주 월요일 배포 관련 얘기 다시하기
• 산책하기 페이지에서 1대1 채팅 및 신청 수락 로직을 어떻게 할지
  • useFlow에 수정 사항 반영
    • 메이트 모집 글에 채팅 버튼 누르면 글쓴이와 메이트 신청인의 1대1 채팅방 생성
    • 그 안에서 대화 후 모집이 완료되면 글쓴이가 모집중을 모집완료로 바꿈
• 그 외
  • 디자이너님과의 회의
    • useFlow 체크
    • 우리 서비에 대한 키워드 얘기하기
    • 메인 컬러 - 원하는 느낌
    • 와이어프레임 (컴포넌트) 에 대한 회의
      • 우선순위 정하기
      • 문구에 대한 의견 받기
      • 커뮤니티 와이어프레임에 대한 의견 받기

이메일 회원가입 기능 구현

• 중간에 에러가 발생했는데
  • genTypes를 yarn으로 업데이트 하면서 바뀐 테이블명이 생겼는데
  • 그 부분을 사용하는 코드에서 바뀐 테이블명을 적용 시키지 않아서 에러 발생
• 해당 부분 수정하니 회원가입 정상 작동

회의 내용

• Code Convention
  • fetch or axios 선택
  • 핸들러 네이밍 맞추기
• 진도 관련해서 회의
  • 첫 주는 기획. 디자인에 집중
  • 둘째 주 월요일 배포 관련 얘기 다시하기
• 산책하기 페이지에서 1대1 채팅 및 신청 수락 로직을 어떻게 할지
  • useFlow에 수정 사항 반영
    • 메이트 모집 글에 채팅 버튼 누르면 글쓴이와 메이트 신청인의 1대1 채팅방 생성
    • 그 안에서 대화 후 모집이 완료되면 글쓴이가 모집중을 모집완료로 바꿈
• 그 외
  • 디자이너님과의 회의
    • useFlow 체크
    • 우리 서비에 대한 키워드 얘기하기
    • 메인 컬러 - 원하는 느낌
    • 와이어프레임 (컴포넌트) 에 대한 회의
      • 우선순위 정하기
      • 문구에 대한 의견 받기
      • 커뮤니티 와이어프레임에 대한 의견 받기

커뮤니티 탭 세분화 [ 온보딩 넣기 ]

• 회원가입 -> 온보딩 페이지 -> 로그인 -> (마이페이지로 정보 전달)
• 희귀동물, 소동물까지 포함해서 동물 범위 넓히기

[ 헤더바 ]

• 헤더바로 넣고, 반응형으로 줄어들면 왼쪽 탭으로 들어가게

[ 산책 메이트 ]

• 강아지종
• 강아지 몸무게
• 위치
• 시간
• 메이트 신청 버튼

[ 병원 기능 ]

• 선택구현으로 아예 빼고, 필수 구현 끝나면 구현하는걸로

[ auth ]

• auth 및 소셜 supabase 세팅
• 기능 구현

[ community ]

• 테이블 제작

[ 오늘 회의 내용 ]

• 프로젝트 주제 정하기 (아래 내용 참고)
• 피그마 : 아이디어 회의 | 피그잼 : user flow 제작
• 팀명 : Next Level
• 5분 기록보드 작성 여부 : O
• 기술 스택
  • React
  • Typescript
  • Next.js
  • Tailwind Css
  • Supabase
  • Zustand
  • ReactQuery(TanstackQuery)
  • NextUI
• 스케줄러 작성 ( 노션에 작성 ) : O
• 폴더 구조 세팅 및 프로젝트 세팅 : O
• User Flow 마무리 : O
• 일감 분배
  • 메인 페이지 : 추후 구현
  • 로그인 / 회원가입 : 김선민
  • 마이 페이지 : 손지훈
  • 커뮤니티 : 윤새라
  • 병원 정보 : 김민수
  • 장소 추천 : 조현경
• 기획서 작성 : O

[ 프로젝트 주제 ]

• 반려동물 사이트 ( Pet Coco )
  • 마이페이지
  • 메인 페이지
  • 로그인/회원가입 페이지
  • 동물 병원 추천 페이지
  • 반려동물 커뮤니티 페이지
  • 애견 동반 장소 추천 페이지

[ User Flow 제작 ]

스터디 새 프로젝트 시작

[ 프로젝트 세팅 ]

1. repo clone 하기 git clone [레포지토리 주소]

2. todoList 폴더로 이동 cd todoList/

3. react, typescript, next.js, tailwind css 프로젝트 세팅 git config pull.rebase false

   What is your project named? my-app Would you like to use TypeScript? Yes Would you like to use ESLint? Yes Would you like to use Tailwind CSS? Yes Would you like to use src/ directory? Yes Would you like to use App Router? (recommended) Yes Would you like to customize the default import alias (@/)? Yes What import alias would you like configured? @/

4. cd 3번에서만든본인프로젝트명/

5. supabase 세팅

   • supabase 프로젝트 생성

   • 프로젝트 세팅 > API 로 들어가서 url, key 받아오기

   • .env.local 파일 만들고 url과 key 넣기

      NEXT_PUBLIC_SUPABASE_URL = ""
      NEXT_PUBLIC_SUPABASE_ANON_KEY = ""

6. src > app > shared > supabase.ts 에 아래 내용 넣기

    import { createClient } from "@supabase/supabase-js";
    import { Database } from "@/app/shared/supabase";

    const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL as string;
    const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string;

    export const supabase = createClient<Database>(SUPABASE_URL, SUPABASE_ANON_KEY);

- 주의 : 아직 Database type 지정을 안해서 오류가 발생한다. (추후 추가 예정)

useMemo

• 2번째 사진 코드에서 컴포넌트를 memo로 묶지 않으면
• changeTodo와 changeSomethingElse 어느 버튼을 누르던 i am child가 불림
• memo를 사용하면 changeSomethingElse를 눌렀을때 호출되지 않음

• "i am Child"는 todo의 값이 바뀔때만 호출하면 되는 컴포넌트이다
• 그렇기 때문에 todo가 아닌 something의 값이 바꼈을때는 호출 필요 X
• memo를 사용하면 이러한 불필요한 호출 및 렌더링을 막아줌

useRef

• 여기서 useRef는 현재 input에 들어있는 값을 잠시 홀딩해주고

• 검색 버튼을 누를때 홀딩해둔 기존 input 값과 비교하여

• 같으면 재렌더링 안해주고, 다르면 새로 렌더링하여 검색 결과 보여주도록 구현

• 결론 : useRef는 필요한 값을 홀딩해서 불필요한 렌더링을 줄여준다

발표 당일

• 배포 링크 : https://outsourcing-project-two.vercel.app/

• 저희가 프로젝트를 진행하면서 가장 크게 막혔던 부분은 크롤링 작업중에 생긴 문제였습니다
• 기획상으로 크롤링 작업은 보이시는 세 파일에서 필요했지만, 다음과 같은 문제가 발생하여 다른 방안으로 대체 했습니다.

일단 저희가 생각한 기본 로직은…

1. 크롤링을 할 웹사이트를 열어 필요한 데이터의 태그나 클래스 등을 선택하여 데이터를 추출하고,
2. 추출한 json데이터를 csv형식으로 변환시킵니다.
3. 변환한 csv파일을 ../csv 폴더 안에 생성하는데 이때 ../csv 폴더가 없으면 해당 폴더를 생성하고 변환한 csv파일을 저장합니다
4. 최종적으로는 크롤링한 데이터를 사용자가 접속했을때 보여주고, 만약 사용자가 최신 데이터를 가져오기 위해 새로고침을 하면,최신 데이터를 크롤링하고, supabase에 있는 데이터들도 자동으로 클롤링된 데이터로 업데이트 시켜주는 것을 생각했습니다.
   그래서 저희는 필요한 정보를 크롤링 해오는 것 까지는 성공을 했었는데 마지막으로 크롤링한 데이터를 가져오는 부분에서 express와 같은 서버를 이용하여 만들어야 한다는 것을 알게되었고, 저희가 배우지 않은 부분이라 한계가 있었습니다.
   그래서 현재는 csv파일을 supabase에서 import csv를 통해 직접 업로드하고 있고 추후에 next.js를 배우고 구현을 시도하기로 마무리 되었습니다
   저희는 이 프로젝트를 진행하며 다양한 기술을 사용해볼 수 있어 좋았습니다. 그리고 협업 시에 깃허브를 어떻게 사용해야 하는지, 소통은 어떤식으로 해야하는지에 대해 많이 배우게 되었던 것 같습니다!

정리 이번 팀 프로젝트에는 총 3개의 페이지로 구성이 되어있다

페이지 구성

• 메인 페이지
  • 최근 경기 결과
  • 팀 순위
  • 각 구단의 하이라이트 영상
  • 경기 매치표 및 날씨 정보
  • 야구 추천 유튜버

• 검색 페이지
  • 검색 결과
  • 태그 검색

• 구단별 페이지
  • 구단 관련 영상
  • input 검색 및 태그 검색 기능
  • 페이지네이션
  • 응원 댓글 작성 기능

    사용한 스택

• React
• JavaScript
• Tailwind Css
• Supabase
• 유튜브 API
• 날씨 API

느낀점

이번 프로젝트는 시작할때 계획도 확실히 짜고 역할 분담도 정확히 한 후 시작했더니 확실히 효율도 높아지고 여유롭게 끝낼 수 있었던 것 같다. 아직 익숙하지 않은 부분들도 있지만, 이번 프로젝트를 계기로 supabase나 api 등에 조금 익숙해졌다. 내가 짠 부분이 아니여도 다른 팀원분들이 짠 코드나 발생한 에러를 같이 확인하고 고쳐나가면서 자연스럽게 공부하게 되어서 좋은 경험이었다.

useContext 란?

• context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

• Context란?

  • 전역적인 데이터를 전달하기에 편리함
  • App 안에서 전역적으로 사용되는 데이터들을 여러 컴포넌트들끼리 쉽게 공유할 수 있는 방법 제공
  • Props를 일일이 전해주는 것이 아니라 상위 컴포넌트에서 필요한 컴포넌트에게 전해줄 수 있게됨

Context를 사용할 때 Props가 필요한 이유

• Context를 사용하면 컴포넌트 재사용하기 어려워질 수 있다.

  • Context는 꼭 필요할때만 사용해야 함
  • Props drilling을 피하기 위한 목적이라면 Component Composition(컴포넌트 합성)을 먼저 고려

Context 세가지 개념

• contextAPI를 사용하기 위해서는 Provider, Consumer, createContext 개념을 알고있어야 한다.

  • createContext : context 객체를 생성한다.

    • export const ThemeContext = createContext(초기값);

      • createContext 내부는 초기값이 들어간다.

        • 상위에서 Provider로 감싸주지 않았다면 초기값을 받아와서 사용하는 것이다.

- **Provider** : 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다.
    - Children을 감싸고 전달하고자 하는 값을 value로 넣어준다.

- **Consumer** : context의 변화를 감시하는 컴포넌트이다.

참조

useContext(SomeContext))

• 컴포넌트 최상위 레벨에서 useContext를 호출하여 context를 읽고 구독한다.

      import { useContext } from 'react';
  
      function MyComponent() {
        const theme = useContext(ThemeContext);
        // ...

매개변수

• SomeContext : 이전에 createContext로 생성한 context이다.
• context 자체는 정보를 보유하지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타낸다.

반환값

• useContext는 호출하는 컴포넌트에 대한 context 값을 반환한다.
• 이 값은 호출한 컴포넌트에서 트리상 위에 있는 가장 가까운 SomeContext에 전달된 value 이다.
• 이러한 provider가 없는 경우 반환되는 값은 해당 context에 대해 createContext에 전달한 defaultValue가 된다.
• 반환 값은 항상 최신값이다.
• React는 context가 변경되면 context를 읽는 컴포넌트를 자동으로 리렌더링한다.

주의사항

1. 컴포넌트의 useContext() 호출은 동일한 컴포넌트에서 반환된 provider의 영향을 받지 않는다.

   • 해당 <Context.Provider>는 반드시 useContext() 호출을 수행하는 컴포넌트 위에 있어야 함

2. React는 변경된 value를 받는 provider부터 시작해서 해당 context를 사용하는 자식들에 대해서까지 전부 자동으로 리렌더링 한다.

   • 이전 값과 다음 값은 Object.js로 비교함
   • memo로 리렌더링을 건너뛰어도 새로운 context 값을 수신하는 자식들을 막지는 못함

3. 빌드 시스템이 출력 결과에 중복 모듈을 생성하는 경우 context가 손상될 수 있다.

   • context를 통해 무언가 전달하는 것은 === 비교에 의해 결정되는 것처럼 context를 제공하는 데 사용하는 SomeContext와 context를 읽는 데 사용하는 SomeConetext 가 정확하세 동일한 객체인 경우에만 작동함

사용법

트리 깊숙이 데이터 전달하기

• 컴포넌트의 최상위 레벨에서 useContext를 호출하여 context를 읽고 구독한다.

    import { useContext } from 'react';
  >
    function Button() {
      const theme = useContext(ThemeContext);
      // ...

• useContext는 전달한 context에 대한 context 값을 반환한다.
• context 값을 결정하기 위해 React는 컴포넌트 트리를 검색하고 특정 context에 대해 위에서 가장 가까운 context provider를 찾는다.

    function MyPage() {
      return (
        <ThemeContext.Provider value="dark">
          <Form />
        </ThemeContext.Provider>
      );
    }
  >
    function Form() {
      // ... renders buttons inside ...
    }

• provider와 Button 사이에 얼마나 많은 컴포넌트 레이어가 있는지는 중요하지 않다.
• From 내부의 Button이 useContext(ThemeContext)를 호출하면 "dark"를 값으로 받는다.

context를 통해 전달된 데이터 업데이트하기

• 시간이 지남에 따라 context가 변경되기를 원하는 경우가 종종 있다
• context를 업데이트하려면 state와 결합해야 한다.
• 부모 컴포넌트에 state 변수를 선언하고 현재 state를 context 값으로 provider에 전달한다.

    function MyPage() {
      const [theme, setTheme] = useState('dark');
      return (
        <ThemeContext.Provider value={theme}>
          <Form />
          <Button onClick={() => {
            setTheme('light');
          }}>
            Switch to light theme
          </Button>
        </ThemeContext.Provider>
      );
    }

• 이제 provider 내부에 모든 Button은 현재 theme 값을 받게된다
• provider에게 전달한 theme 값을 업데이트하기 위해 setTheme를 호출하면 모든 Button 컴포넌트가 새로운 light 값으로 리렌더링된다.

fallback 기본값 지정하기

• React가 부모 트리에서 특정 context의 provider들을 찾을 수 없는 경우, useContext()가 반환하는 context 값은 해당 context를 생성할 때 지정한 기본값과 동일하다.

    const ThemeContext = createContext(null);

• 기본값은 절대 변경되지 않는다
  • context를 업데이트하려면 앞서 설명된 대로 state를 사용해야 함

• null 대신 기본값으로 사용할 수 있는 더 의미 있는 값이 있는 경우가 많다.

    const ThemeContext = createContext('light');

• 이렇게 하면 실수로 해당 provider 없이 일부 컴포넌트를 렌더링해도 중단되지 않는다.
  • 또한 테스트 환경에서 많은 provider를 설정하지 않고도 컴포넌트가 테스트 환경에서 잘 작동하는 데 도움이 된다.

트리 일부에 대한 context 재정의하기

• 트리 일부분을 다른 값의 provider로 감싸 해당 부분에 대한 context를 재정의할 수 있다.

    <ThemeContext.Provider value="dark">
      ...
      <ThemeContext.Provider value="light">
        <Footer />
      </ThemeContext.Provider>
      ...
    </ThemeContext.Provider>
  ``
  

객체 및 함수 전달 시 리렌더링 최적화

• context를 통해 객체와 함수를 포함한 모든 값을 전달할 수 있다.

    function MyApp() {
      const [currentUser, setCurrentUser] = useState(null);
  >
      function login(response) {
        storeCredentials(response.credentials);
        setCurrentUser(response.user);
      }
  >
      return (
        <AuthContext.Provider value={{ currentUser, login }}>
          <Page />
        </AuthContext.Provider>
      );
    }

• 여기서 context 값은 두 개의 프로퍼티를 가진 Js 객체이며, 그 중 하나는 함수다.
• MyApp이 리렌더링할 때마다, 이것은 다른 함수를 가리키는 다른 객체가 될 것이므로 React는 useContext(AuthContext)를 호출하는 트리 깊숙한 곳의 모든 컴포넌트도 리렌더링해야 한다.

• 소규모 앱에서는 문제가 되지 않는다.
  • 그러나 currentUser와 같은 기초 데이터가 변경되지 않았다면 리렌더링할 필요가 없다
  • React는 이 사실을 활용할 수 있도록 login 함수를 useCallback으로 감싸고 객체 생성은 useMemo로 감싸면 된다.
  • 이것은 성능 최적화를 위한 것이다

    import { useCallback, useMemo } from 'react';
    >
    function MyApp() {
    const [currentUser, setCurrentUser] = useState(null);
    >
    const login = useCallback((response) => {
      storeCredentials(response.credentials);
      setCurrentUser(response.user);
    }, []);
    >
    const contextValue = useMemo(() => ({
      currentUser,
      login
    }), [currentUser, login]);
    >
    return (
      <AuthContext.Provider value={contextValue}>
        <Page />
      </AuthContext.Provider>
    );
    }

• 이 변경으로 인해 MyApp이 리렌더링해야 하는 경우에도 currentUser가 변경되지 않는 한 useContext(AuthProvider)를 호출하는 컴포넌트는 리렌더링할 필요가 없다

useContext 란?

• context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

• Context란?

  • 전역적인 데이터를 전달하기에 편리함
  • App 안에서 전역적으로 사용되는 데이터들을 여러 컴포넌트들끼리 쉽게 공유할 수 있는 방법 제공
  • Props를 일일이 전해주는 것이 아니라 상위 컴포넌트에서 필요한 컴포넌트에게 전해줄 수 있게됨

Context를 사용할 때 Props가 필요한 이유

• Context를 사용하면 컴포넌트 재사용하기 어려워질 수 있다.

  • Context는 꼭 필요할때만 사용해야 함
  • Props drilling을 피하기 위한 목적이라면 Component Composition(컴포넌트 합성)을 먼저 고려

Context 세가지 개념

• contextAPI를 사용하기 위해서는 Provider, Consumer, createContext 개념을 알고있어야 한다.

  • createContext : context 객체를 생성한다.

    • export const ThemeContext = createContext(초기값);

      • createContext 내부는 초기값이 들어간다.

        • 상위에서 Provider로 감싸주지 않았다면 초기값을 받아와서 사용하는 것이다.

- **Provider** : 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다.
    - Children을 감싸고 전달하고자 하는 값을 value로 넣어준다.

- **Consumer** : context의 변화를 감시하는 컴포넌트이다.

참조

useContext(SomeContext))

• 컴포넌트 최상위 레벨에서 useContext를 호출하여 context를 읽고 구독한다.

      import { useContext } from 'react';
  
      function MyComponent() {
        const theme = useContext(ThemeContext);
        // ...

매개변수

• SomeContext : 이전에 createContext로 생성한 context이다.
• context 자체는 정보를 보유하지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타낸다.

반환값

• useContext는 호출하는 컴포넌트에 대한 context 값을 반환한다.
• 이 값은 호출한 컴포넌트에서 트리상 위에 있는 가장 가까운 SomeContext에 전달된 value 이다.
• 이러한 provider가 없는 경우 반환되는 값은 해당 context에 대해 createContext에 전달한 defaultValue가 된다.
• 반환 값은 항상 최신값이다
• React는 context가 변경되면 context를 읽는 컴포넌트를 자동으로 리렌더링한다.

useLayoutEffect란?

• useLayoutEffect는 브라우저가 화면을 다시 채우기 전에 실행되는 useEffect 한 버전이다

useLayoutEffect 기본 형태

useLayoutEffect(setup, dependencies?)

• setup : Effect의 주요 로직을 포함 / 컴포넌트가 DOM에 추가되거나, 의존성이 변경될 때 실행
• dependencies : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열

• 브라우저가 화면을 다시 그리기 전에 useLayoutEffect를 호출하여 레이아웃을 측정

<예시 코드>

    import { useState, useRef, useLayoutEffect } from 'react';

    function Tooltip() {
      const ref = useRef(null);
      const [tooltipHeight, setTooltipHeight] = useState(0);

      useLayoutEffect(() => {
        const { height } = ref.current.getBoundingClientRect();
        setTooltipHeight(height);
      }, []);
      // ...

매개변수

1. setup : Effect의 로직이 포함된 함수

   • 동작

     • 컴포넌트가 DOM에 추가되기 전에 실행됩니다.
     • 의존성이 변경될 때마다 다시 실행됩니다.
     • 선택적으로 클린업 함수를 반환할 수 있습니다.

   • cleanup 함수

     • 새 setup 함수가 실행되기 전에 이전 setup 함수의 클린업 함수가 실행
     • 컴포넌트가 DOM에서 제거되기 전에 실행됩니다

2. optional deps : setup 코드 내에서 참조된 모든 반응형 값의 목록

   • props, state, 컴포넌트 내부에서 선언된 변수와 함수
   • 일정한 수의 항목을 가져야 하며, [dep1, dep2, dep3] 형식으로 인라인 작성해야 함
     • React는 Object.is를 사용하여 각 의존성을 이전 값과 비교
   • 이 인수를 생략하면 컴포넌트가 다시 렌더링될 때마다 Effect가 다시 실행

반환값

• useLayoutEffect는 undefined를 반환한다.

주의사항

1. 최상위 레벨에서 호출

   • useLayoutEffect는 훅이므로 컴포넌트의 최상위 레벨 또는 자체 훅에서만 호출 가능

   • 반복문이나 조건문 내부에서는 호출할 수 없다.

     • 필요하다면 컴포넌트를 추출하고 Effect를 그곳으로 이동

2. Strict Mode에서의 동작

   • Strict Mode가 켜져 있으면 첫 번째 실제 셋업 전에 추가로 개발 전용 셋업+클린업 사이클이 실행
     • 이는 클린업 로직이 셋업 로직을 정확히 반영하는지 확인하는 테스트
     • 이로 인해 문제가 발생하면 클린업 함수를 구현

3. 의존성 관리

   • 컴포넌트 내부에 정의된 객체 또는 함수가 의존성인 경우, Effect가 불필요하게 자주 실행될 수 있다
     • 불필요한 객체 및 함수 의존성을 제거하고, state 업데이트와 비반응형 로직을 Effect 외부로 추출

사용법

브라우저에서 화면을 다시 그리기 전 레이아웃 측정하기

• 대부분의 컴포넌트는 위치와 크기를 몰라도 JSX만 반환하고 브라우저가 레이아웃을 계산한다.
• 하지만 툴팁처럼 마우스오버 시 정확한 위치에 렌더링해야 하는 경우가 있다.
• 툴팁의 올바른 위치를 결정하려면 툴팁의 높이를 알아야 한다.

• 이를 위해 두 번의 패스로 렌더링 해야 한다.

• 1. 툴팁을 임의의 위치에 렌더링*
  • 초기 위치는 잘못될 수 있음

• 2. 툴팁의 높이를 측정하고 위치 결정*
  • 툴팁의 실제 높이를 측정

• 3. 툴팁을 올바른 위치에 다시 렌더링*
  • 측정된 높이를 바탕으로 툴팁을 정확한 위치에 재렌더링

• 이 모든 작업은 브라우저가 화면을 다시 그리기 전에 이루어져야 한다.
  • 사용자가 툴팁이 움직이는 것을 보지 않기를 원하기 때문에
  • 브라우저가 화면을 다시 그리기 전에 useLayoutEffect를 호출하여 레이아웃 측정을 수행

    function Tooltip() {
    const ref = useRef(null);
    const [tooltipHeight, setTooltipHeight] = useState(0); 
    // 아직 실제 height 값을 모릅니다.
    >
    useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height); 
    // Re-render now that you know the real height
    // 실제 높이를 알았으니 이제 리렌더링 합니다.
    }, []);
    >
    // ...아래에 작성될 렌더링 로직에 tooltipHeight를 사용합니다...
    }

1. Tooltip은 초기 tooltipHeight = 0으로 렌더링됩니다
   • 따라서 툴팁의 위치가 잘못 지정될 수 있음
2. React는 이를 DOM에 배치하고 useLayoutEffect에서 코드를 실행
3. useLayoutEffect는 툴팁 콘텐츠의 높이를 측정하고 즉시 다시 렌더링을 촉발
4. Tooltip이 실제 tooltipHeight로 다시 렌더링
   • 따라서 툴팁이 올바르게 배치
5. React가 DOM에서 이를 업데이트하면 브라우저에 툴팁이 최종적으로 표시

• Tooltip 컴포넌트가 두 번의 패스로 렌더링되어야 하지만, (먼저 tooltipHeight를 0으로 초기화한 다음 실제 측정된 높이) 최종 결과만 볼 수 있다는 점에 유의

useLayoutEffect는 브라우저가 다시 그리는 것을 차단

• useLayoutEffect를 사용하면 브라우저가 화면을 다시 그리기 전에 코드와 상태 업데이트가 처리되도록 보장한다.
  • 이를 통해 툴팁을 렌더링하고, 측정한 후, 다시 렌더링할 수 있음
  • 이렇게 하면 첫 번째 렌더링을 사용자가 눈치채지 못하게 됨
  • useLayoutEffect는 브라우저의 페인팅을 차단

• 1. import 및 상태를 초기화*

     import { useRef, useLayoutEffect, useState } from 'react';
     import { createPortal } from 'react-dom';
     import TooltipContainer from './TooltipContainer.js';

• 2. Tooltip 컴포넌트 생성*

     export default function Tooltip({ children, targetRect }) {
       const ref = useRef(null);
       const [tooltipHeight, setTooltipHeight] = useState(0);
  >
       useLayoutEffect(() => {
         const { height } = ref.current.getBoundingClientRect();
         setTooltipHeight(height);
       }, []);

• ref를 사용해 툴팁의 DOM 요소를 참조한다
• tooltipHeight 상태를 초기화한다
• useLayoutEffect로 툴팁의 높이를 측정하여 tooltipHeight 상태를 업데이트한다
• 3. 툴팁 위치 계산*

       let tooltipX = 0;
       let tooltipY = 0;
       if (targetRect !== null) {
         tooltipX = targetRect.left;
         tooltipY = targetRect.top - tooltipHeight;
         if (tooltipY < 0) {
           tooltipY = targetRect.bottom;
         }
       }

• targetRect가 존재하면 툴팁의 X, Y 좌표를 계산합니다.
• 툴팁이 위쪽에 맞지 않으면 아래쪽에 배치합니다.

• 4. 툴팁 렌더링*

       return createPortal(
         <TooltipContainer x={tooltipX} y={tooltipY} contentRef={ref}>
           {children}
         </TooltipContainer>,
         document.body
       );
     }

• createPortal을 사용하여 툴팁을 document.body에 렌더링합니다.
• TooltipContainer에 위치와 내용(자식 요소)을 전달합니다.

• 5. 정리*

1. Tooltip 컴포넌트는 useLayoutEffect를 사용해 툴팁의 높이를 측정
2. 이를 기반으로 툴팁의 위치를 계산하여 올바른 위치에 다시 렌더링
3. 이 과정에서 첫 번째 렌더링을 사용자가 눈치채지 못하게 브라우저의 페인팅을 차단

6.useLayoutEffect Vs useEffect

• useLayoutEffect
  • 동기적 실행: useLayoutEffect는 DOM 업데이트 직후 즉시 실행
    • 이는 화면을 다시 그리기 전에 코드가 실행되어, 화면에 보이기 전에 필요한 작업들(예: 레이아웃 측정)을 처리할 수 있음을 의미
    • 따라서 사용자가 화면에서 변경 사항을 볼 때까지 대기하지 않고 바로 업데이트된 내용을 보여줄 수 있음

• useEffect
  • 비동기적 실행: useEffect는 렌더링 후 비동기적으로 실행
  • 이는 DOM 업데이트 이후에 발생하므로, 화면에 바로 반영되지 않을 수 있음
  • 따라서 useEffect를 사용할 경우, 초기 렌더링 시에 UI가 제대로 조정되기 전에 사용자가 변경된 내용을 일시적으로 볼 수 있을 수 있음

useReducer란?

• useReducer는 useState와 같은 상태 관리, 상태 업데이트 훅이다.
• 변경할 값이 많을 때, 즉 상태 관리 할 데이터가 많아질 때 사용을 고민해야 한다.

useReducer 기본 형태

[ const [state, dispatch ] = useReducer(reducer, initialState); ]

• state : 상태 이름 (컴포넌트에서 사용할 상태)
• dispatch : 상태를 변경 시 필요한 정보를 전달하는 함수
• reducer : dispatch를 확인해서 state를 변경해주는 함수
• initialState : state에 전달할 초기 값

<예시 코드>

  import { useReducer } from 'react';

  function reducer(state, action) {
    // ...
  }

  function MyComponent() {
    const [state, dispatch] = useReducer(reducer, { age: 42 });
    // ...

매개변수

1. reducer : reducer 함수는 상태가 업데이트되는 방식을 지정

   • 순수 함수여야 한다

     • 동일 인자에 대해 항상 동일한 결과를 반환해야 함
       • 외부 상태를 변경하거나 부작용을 일으키면 안됨

   • state와 action을 인자로 받아야 한다.

   • 다음 상태를 반환해야 한다.

   • state와 action은 어떤 유형이든 가능하다.

2. initialArg : 초기 상태가 계산되는 값

   • 모든 유형의 값이 될 수 있다.

   • 초기 상태를 계산하는 데 사용된다.

     • 구체적인 계산 방법은 init 인자에 의해 결정됨

3. 선택적 init : 초기 상태를 계산하는 초기화 함수

   • 초기 상태를 반환해야 한다.

   • 사용 방식

     • init 함수가 지정되지 않는 경우, 초기 상태는 initialArg 값으로 설정
     • init 함수가 지정된 경우, 초기 상태는 init(initialArg) 호출 결과로 설정

반환값

• useReducer는 정확히 두 개의 값을 가진 배열을 반환한다.

  • 현재 state, 첫번째 렌더링 중에는 init(initialArg) 또는 initialArg로 설정
  • state를 다른 값으로 업데이트하고 리렌더링을 촉발할 수 있는 dispatch function

주의사항

1. useReducer 호출 위치

   • useReducer는 훅이므로 다음 위치에서만 호출할 수 있다.

     • 컴포넌트의 최상위 레벨
     • 사용자 정의 훅

   • 반복문이나 조건문 내부에서는 useReducer를 호출할 수 없다.

     • 만약 반복문이나 조건문 내부에서 상태를 관리해야 한다면, 새 컴포넌트를 만들어서 그 안으로 옮겨야 함

2. Strict Mode에서의 동작

   • Strict Mode에서는 React가 의도치 않은 불순물(부작용)을 찾기 위해 reducer와 초기화 함수를 두 번 호출한다.

     • 이 동작은 개발 모드에서만 발생하며, 상용 환경에서는 발생하지 않음

   • reducer와 초기화 함수가 순수 함수라면, 이 동작이 로직에 영향을 미치지 않는다.

     • 두 번 호출된 결과 중 하나는 무시됨

사용법

컴포넌트에 추가하기

• 컴포넌트 최상위 레벨에서 useReducer를 호출하여 reducer를 state 관리한다.

    import { useReducer } from 'react';
  >
    function reducer(state, action) {
      // ...
    }
  >
    function MyComponent() {
      const [state, dispatch] = useReducer(reducer, { age: 42 });
      // ...

• useReducer는 정확히 두 개의 항목이 있는 배열을 반환한다.

1. 이 state 변수는 현재 state -> 처음에 제공한 초기 state로 설정됨
2. 상호작용에 반응하여 이를 변경할 수 있는 dispatch 함수
3. 화면에 표시되는 내용을 업데이트 하려면 사용자가 수행한 작업을 나타내는 객체, 즉, 액션을 사용하여 dispatch를 호출

    function handleClick() {
      dispatch({ type: 'incremented_age' });
    }

4. React는 현재 state와 액션을 reducer 함수에 전달한다.
5. Reducer는 다음 state를 계산하고 반환한다.
6. React는 다음 state를 저장하고, 컴포넌트를 렌더링하고, UI를 업데이트 한다.

    import { useReducer } from 'react';
   >
    function reducer(state, action) {
      if (action.type === 'incremented_age') {
        return {
          age: state.age + 1
        };
      }
      throw Error('Unknown action.');
    }
   >
    export default function Counter() {
      const [state, dispatch] = useReducer(reducer, { age: 42 });
   >
      return (
        <>
          <button onClick={() => {
            dispatch({ type: 'incremented_age' })
          }}>
            Increment age
          </button>
          <p>Hello! You are {state.age}.</p>
        </>
      );
    }

reducer 함수 작성하기

• Reducer 함수는 다음과 같이 선언된다.

    function reducer(state, action) {
      // ...
    }

• 그런 다음 state를 계산하고 반환할 코드를 입력해야 한다.
  • 관례상 switch 문으로 작성하는 것이 일반적이다.
  • switch의 각 case에 대해 다음 state를 계산하고 반환해야 한다.

    function reducer(state, action) {
    switch (action.type) {
      case 'incremented_age': {
        return {
          name: state.name,
          age: state.age + 1
        };
      }
      case 'changed_name': {
        return {
          name: action.nextName,
          age: state.age
        };
      }
    }
    throw Error('Unknown action: ' + action.type);
    }

• 액션이 어떤 형태든 가질 수 있다.
  • 관례상 액션을 식별하는 type 프로퍼티가 있는 객체를 전달하는 것이 일반적이다.
  • 여기에는 reducer가 다음 state를 계산하는데 필요한 최소한의 필수 정보가 포함되어야 한다.

    function Form() {
    const [state, dispatch] = useReducer(reducer, { name: 'Taylor', age: 42 });
    >  
    function handleButtonClick() {
      dispatch({ type: 'incremented_age' });
    }
    >
    function handleInputChange(e) {
      dispatch({
        type: 'changed_name',
        nextName: e.target.value
      });
    }
    // ...

• 액션 유형 이름은 컴포넌트에 로컬로 지정된다
  • 각 액션은 아무리 많은 데이터를 변경하게 되더라도 오직 하나의 상호작용만을 기술
  • state의 모양은 임의적이지만 일반적으로 객체나 배열이 될 것 같다

초기 state 재생성 방지하기

• React는 초기 state를 한 번 저장하고 다음 렌더링에서 이를 무시한다.

    function createInitialState(username) {
      // ...
    }
    >
    function TodoList({ username }) {
      const [state, dispatch] = useReducer(reducer, createInitialState(username));
      // ...

• createInitialState(username)의 결과는 초기 렌더링에서만 사용되지만, 이후의 모든 렌더링에서도 여전히 이 함수를 호출하게 된다
  • 이는 큰 배열을 만들거나 값비싼 계산을 수행하는 경우 낭비가 될 수 있다.

• 이 문제를 해결하려면 useReducer 세번 째 인수에 초기화 함수를 전달할 수 있다.

    function createInitialState(username) {
      // ...
    }
  >
    function TodoList({ username }) {
      const [state, dispatch] = useReducer(reducer, username, createInitialState);
      // ...

• 함수를 호출한 결과인 createInitialState()가 아니라 함수 자체 createInitialState를 전달하고 있다는 점에 유의해야 한다.
  • 이렇게 하면 초기화 후에는 초기 state가 다시 생성되지 않는다.
• 위의 예에서 createInitialState는 username 인수를 받는다.
  • 초기화 함수가 초기 state를 계산하는 데 아무런 정보가 필요 하지 않는 경우, useReducer의 두번째 인수로 null을 전달할 수 있다.

useReducer란?

• useReducer는 useState와 같은 상태 관리, 상태 업데이트 훅이다.
• 변경할 값이 많을 때, 즉 상태 관리 할 데이터가 많아질 때 사용을 고민해야 한다.

useReducer 기본 형태

[ const [state, dispatch ] = useReducer(reducer, initialState); ]

• state : 상태 이름 (컴포넌트에서 사용할 상태)
• dispatch : 상태를 변경 시 필요한 정보를 전달하는 함수
• reducer : dispatch를 확인해서 state를 변경해주는 함수
• initialState : state에 전달할 초기 값

<예시 코드>

  import { useReducer } from 'react';

  function reducer(state, action) {
    // ...
  }

  function MyComponent() {
    const [state, dispatch] = useReducer(reducer, { age: 42 });
    // ...

매개변수

1. reducer : reducer 함수는 상태가 업데이트되는 방식을 지정

   • 순수 함수여야 한다

     • 동일 인자에 대해 항상 동일한 결과를 반환해야 함
       • 외부 상태를 변경하거나 부작용을 일으키면 안됨

   • state와 action을 인자로 받아야 한다.

   • 다음 상태를 반환해야 한다.

   • state와 action은 어떤 유형이든 가능하다.

2. initialArg : 초기 상태가 계산되는 값

   • 모든 유형의 값이 될 수 있다.

   • 초기 상태를 계산하는 데 사용된다.

     • 구체적인 계산 방법은 init 인자에 의해 결정됨

3. 선택적 init : 초기 상태를 계산하는 초기화 함수

   • 초기 상태를 반환해야 한다.

   • 사용 방식

     • init 함수가 지정되지 않는 경우, 초기 상태는 initialArg 값으로 설정
     • init 함수가 지정된 경우, 초기 상태는 init(initialArg) 호출 결과로 설정

반환값

• useReducer는 정확히 두 개의 값을 가진 배열을 반환한다.

  • 현재 state, 첫번째 렌더링 중에는 init(initialArg) 또는 initialArg로 설정
  • state를 다른 값으로 업데이트하고 리렌더링을 촉발할 수 있는 dispatch function

주의사항

1. useReducer 호출 위치

   • useReducer는 훅이므로 다음 위치에서만 호출할 수 있다.

     • 컴포넌트의 최상위 레벨
     • 사용자 정의 훅

   • 반복문이나 조건문 내부에서는 useReducer를 호출할 수 없다.

     • 만약 반복문이나 조건문 내부에서 상태를 관리해야 한다면, 새 컴포넌트를 만들어서 그 안으로 옮겨야 함

2. Strict Mode에서의 동작

   • Strict Mode에서는 React가 의도치 않은 불순물(부작용)을 찾기 위해 reducer와 초기화 함수를 두 번 호출한다.

     • 이 동작은 개발 모드에서만 발생하며, 상용 환경에서는 발생하지 않음

   • reducer와 초기화 함수가 순수 함수라면, 이 동작이 로직에 영향을 미치지 않는다.

     • 두 번 호출된 결과 중 하나는 무시됨

useEffect란?

• 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook
• useEffect는 컴포넌트가 mount 됐을 때, 컴포넌트가 unmount 됐을 때, 컴포넌트가 update 됐을 때, 특정 작업을 처리할 수 있다.

useEffect의 기본 형태

[ useEffect( function, deps ) ]

• function : 수행하고자하는 작업

• deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열

• useEffect의 기본 return 값은 undefined이다.

• 컴포넌트의 최상위 레벨에서 useEffect를 호출하여 Effect를 선언한다.

    import { useEffect } from "react";

[ deps 여부의 차이점 ]

1. 의존성 배열을 생략한 경우

    useEffect(() => {
        console.log('컴포넌트가 렌더링 될 때마다 실행');
    });

2. 빈 배열을 전달한 경우

    function ExampleComponent() {
      useEffect(() => {
          console.log('컴포넌트가 처음 마운트 될 때만 실행');
      }, []);

      return <div>안녕하세요!</div>
    }

3. 특정 값들이 포함된 배열을 전달한 경우

    function ExampleComponent() {
      const [count, setCount] = useState(0);

      useEffect(() => {
          console.log('업데이트 될 때 실행')
        console.log(`count 값이 변경되었습니다: ${count}`);
      }, [count]);

      return (
        <div>
          <p>{count} 번 클릭했습니다</p>
          <button onClick={() => setCount(count + 1)}>클릭</button>
        </div>
      );
    }

useEffect 매개변수

• setup 함수

  • setup은 Effect의 로직에 담긴 함수

  • 이 함수는 컴포넌트가 DOM에 추가될 때 실행되고, 선택적으로 cleanup 함수를 반환 가능

    • 컴포넌트가 DOM에 추가될 때 React가 setup 함수를 실행
    • 의존성이 변경되어 컴포넌트가 다시 렌더링될 때 React가 이전 값으로 cleanup 함수를 실행 후 새로운 값으로 setup 함수를 다시 실행
    • 컴포넌트가 DOM에서 제거될 때 React가 마지막으로 cleanup 함수를 실행

• optional dependencies 함수 (선택적 의존성)

  • deps는 setup 코드 내에서 참조되는 모든 반응형 값의 목록

    • props, state, 그리고 컴포넌트 내부에서 선언된 모든 변수와 함수가 포함

      • 목록 작성 의존성 목록은 [dep1, dep2, dep3]과 같은 고정된 수의 항목을 가진 배열 형태로 작성
      • 변화 감지 의존성 목록의 각 항목을 이전 값과 비교하여 변화가 있을때만 setup 함수를 실행
      • 린터 검사 React용으로 구성된 린터는 모든 반응형 값이 의존성 배열에 바르게 지정되었는지 확인

              function ExampleComponent() {
                const [count, setCount] = useState(0);

                // useEffect 안에 전달된 함수가 바로 setup 함수입니다.
                useEffect(() => {
                  console.log(`count 값이 변경되었습니다: ${count}`);

                  // 이 함수는 cleanup 함수로, setup 함수가 실행되기 전에 실행됩니다.
                  return () => {
                    console.log('클린업 중...');
                  };
                }, [count]); // 이 부분은 의존성 배열입니다.

                return (
                  <div>
                    <p>{count} 번 클릭했습니다</p>
                    <button onClick={() => setCount(count + 1)}>클릭</button>
                  </div>
                );
              }

주의사항

1. useEffect는 컴포넌트의 최상위 레벨이나 자체적인 훅에서만 호출할 수 있다.

   • 반복문이나 조건문 내에서는 사용할 수 없음
   • 이럴 때는 새로운 컴포넌트를 추출하고 상태를 이동시켜야 함

2. 외부 시스템과의 동기화를 위한 목적이 아니라면, 보통 useEffect가 필요하지 않을 수 있다.

3. Strict 모드가 켜져있을 때, 첫번째 실제 셋업 전에 개발용 셋업 및 클린업 사이클을 한번 더 실행한다.

   • 이는 클린업 로직이 셋업 로직과 일치하는지 확인,
   • 셋업이 수행한 작업을 중지하거나 취소하는지 확인하는 스트레스 테스트

4. 컴포넌트 내부에 정의된 객체나 함수가 의존성으로 사용될 경우, 불필요하게 useEffect가 더 자주 다시 실행될 수 있다.

   • 이를 해결하기 위해 불필요한 객체나 함수 의존성을 제거하거나,
   • Effect 외부로 상태 업데이트와 반응하지 않는 로직을 추출

5. Effect가 사용자 상호작용으로 인해 발생하지 않았다면, React는 보통 브라우저가 화면을 업데이트 한 후에 Effect를 실행한다.

   • 만약 Effect가 시각적인 작업을 수행하고 있고 지연이 눈에 띄면 useEffect 대신 useLayoutEffect로 대체해야 함

6. 심지어 Effect가 사용자 상호작용으로 인해 발생했더라도, 브라우저는 상태 업데이트를 처리하기 전에 화면을 다시 그릴 수 있다.

   • 이것은 보통 원하는 동작이지만, 화면을 다시 그리지 않도록 브라우저를 차단해야 할 경우 useEffect를 useLayoutEffect로 대체해야 함

7. Effects는 클라이언트에서만 실행되며, 서버 렌더링 중에는 실행되지 않는다.

사용법

외부 시스템 연결하기

• 때로는 컴포넌트가 페이지에 표시되는 동안 네트워크, 일부 브라우저 API 또는 타사 라이브러리에 연결 상태를 유지해야 할 수도 있다.
• 이러한 시스템은 React에서 제어되지 않으므로 외부(external)라고 한다.

  import { useEffect } from 'react';
  import { createConnection } from './chat.js';
  >
  function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
  >
  useEffect(() => {
      const connection = createConnection(serverUrl, roomId);
    connection.connect();
  >
      return () => {
      connection.disconnect();
      };
  }, [serverUrl, roomId]);
  // ...
  }

1. createConnection 함수를 사용하여 서버와의 연결을 생성한다.
   • 이 함수는 서버 URL과 채팅방 ID를 인자로 받아서 해당 채팅방에 연결을 설정
   • 그리고 이 연결 객체를 connection 변수에 저장
2. 연결 객체를 만든 후에는 connect 메서드를 호출하여 서버와의 연결을 수립한다.
3. 여기서의 cleanup 함수인 disconnect 메서드를 호출하여 서버와의 연결을 종료한다.
   • 이 함수는 컴포넌트가 제거되거나 업데이트되기 전에 실행됨
   • 이렇게 함으로써 메모리 누수를 방지하고 불필요한 리소스를 해제할 수 있음
4. 마지막으로 useEffect의 의존성 배열을 확인한다.
   • serverUrl과 roomId가 포함
   • 이는 useEffect가 실행될 조건을 결정하는데, 만약 이 값들이 변경되면 새로운 연결을 설정해야 하기 때문

커스텀 훅으로 Effect 감싸기

• Effect를 수동으로 작성해야 하는 경우가 자주 발생한다면 이는 컴포넌트가 의존하는 일반적인 동작에 대한 커스텀 훅을 추출해야 한다는 신호일 수 있다.
• 예를 들어, 이 useChatRoom 커스텀 훅은 Effect의 로직을 보다 선언적인 API 뒤에 숨긴다.

  function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
  }

1. useChatRoom 훅은 서버와 채팅방의 연결을 설정하고 관리하는 역할을 한다.
   • useChatRoom은 serverUrl과 roomId라는 두 개의 매개변수를 받음
   • serverUrl : 연결할 서버의 URL
   • roomId : 채팅방의 ID
2. useEffect 훅은 의존성 배열에 있는 값이 변경될 때마다 실행
   • 컴포넌트가 처음 마운트될 때와 serverUrl 또는 roomId가 변경될 때마다 실행
3. const option 부분은 연결을 설정한다.
   • createConnection 함수를 호출하여 서버와의 연결 객체를 생성
   • connection.connect()를 호출하여 연결을 수립
4. useEffect는 cleanup 함수를 반환한다.
   • 이 함수는 컴포넌트가 언마운트되거나 의존성 배열의 값이 변경될 때 호출되어 연결을 해제합니다.

     function ChatRoom({ roomId }) {
     const [serverUrl, setServerUrl] = useState('https://localhost:1234');
     >
     useChatRoom({
     roomId: roomId,
     serverUrl: serverUrl
     });
     // ...

5. ChatRoom 컴포넌트는 UI를 제공하고 useChatRoom 훅을 사용하여 채팅방 기능을 구현한다.
6. ** serverUrl 상태를 설정한다.**
   • 초기값은 'https://localhost:1234'
7. useChatRoom 훅을 호출하여 서버와 채팅방의 연결을 설정하고 관리한다.
   • roomId와 serverUrl을 인자로 전달

🖥️ 오늘 공부한 내용 🖥️

# 새로운 주차 시작

오늘은 새로운 개인 과제가 나갔고, Redux와 axios를 다뤄야하는 과제이다. 이번 과제는 주어진 시간이 짧아서 강의 먼저 빠르게 듣고 화요일부터 과제 수행에 들어가야겠다. 그리고 오늘은 개인 일정으로 스터디 참여를 못해서 스터디 TIL 작성을 건너뛰지만 내일 모두 정리해서 올려야한다.

반응형 의존성 지정

• Effect의 의존성을 "선택"할 수 없다는 점에 유의해야 한다.
• Effect의 코드에서 사용되는 모든 반응형 값은 의존성으로 선언해야 한다.
• Effect의 의존성 목록은 주변 코드에 의해 결정된다.
• serverUrl 또는 roomId가 변경되면 Effect는 새 값을 사용하여 채팅에 다시 연결한다.

     // This is a reactive value
    function ChatRoom({ roomId }) { 
       // This is a reactive value too
      const [serverUrl, setServerUrl] = useState('https://localhost:1234'); 

      useEffect(() => {
           // This Effect reads these reactive values
        const connection = createConnection(serverUrl, roomId); 
        connection.connect();

        return () => connection.disconnect();

        // ✅ So you must specify them as dependencies of your Effect
      }, [serverUrl, roomId]); 
      // ...
    }

• 반응형 값에는 props와 컴포넌트 내부에서 직접 선언된 모든 변수, 함수가 포함된다.
• roomId와 serverUrl은 반응형 값이기 때문에 의존성 목록에서 제거할 수 없다.
• 만약 이 값을 생략하려고 할 때 린터가 React용으로 올바르게 구성되어 있다면, 린터는 이를 수정해야 하는 실수로 표시해준다.

    function ChatRoom({ roomId }) {
      const [serverUrl, setServerUrl] = useState('https://localhost:1234');

      useEffect(() => {
        const connection = createConnection(serverUrl, roomId);
        connection.connect();
        return () => connection.disconnect();
      }, []); // 🔴 React Hook useEffect has missing dependencies: 'roomId' and 'serverUrl'
      // ...
    }

• 의존성을 제거하려면, 의존성이어야 할 필요가 없음을 린터에게 증명해야 한다.
• 예를 들어, serverUrl을 컴포넌트 밖으로 이동시킴으로써 반응형이 아니며 리렌더링시에도 변경되지 않음을 증명할 수 있다.

    const serverUrl = 'https://localhost:1234'; // Not a reactive value anymore

    function ChatRoom({ roomId }) {
      useEffect(() => {
        const connection = createConnection(serverUrl, roomId);
        connection.connect();
        return () => connection.disconnect();
      }, [roomId]); // ✅ All dependencies declared
      // ...
    }

• 이제 serverUrl은 반응형 값이 아니므로 의존성이 될 필요가 없다.
• Effect의 코드가 반응형 값을 사용하지 않는다면 의존성 목록은 비어 있어야 한다.([]);
• 빈 의존성이 있는 Effect는 컴포넌트의 props나 state가 변경되어도 다시 실행되지 않는다.

    const serverUrl = 'https://localhost:1234'; // Not a reactive value anymore
    const roomId = 'music'; // Not a reactive value anymore

    function ChatRoom() {
      useEffect(() => {
        const connection = createConnection(serverUrl, roomId);
        connection.connect();
        return () => connection.disconnect();
      }, []); // ✅ All dependencies declared
      // ...
    }

Pitfall | 함정

• 기존 코드베이스가 있는 경우 이와 같이 린터를 억제하는 Effect가 있을 수 있다.

    useEffect(() => {
      // ...
      // 🔴 Avoid suppressing the linter like this:
      // eslint-ignore-next-line react-hooks/exhaustive-deps
    }, []);

• 의존성이 코드와 일치하지 않으면 버그가 발생할 위험이 높다.
• 린터를 억제하는 것은 곧 Effect가 의존하는 값에 대해 React에 "거짓말"을 하는 것이다.
• 대신 의존성들이 불필요하다는 것을 증명해야 한다.

반응형 의존성 전달 예시

• 의존성 배열 전달하기
  • 의존성을 지정하면서 Effect는 초기 렌더링 후 및 변경된 의존성으로 다시 렌더링한 후에 실행된다.

    useEffect(() => {
    // ...
    }, [a, b]); // Runs again if a or b are different

    
    
• 아래 예시에서 serverUrl과 roomId는 반응형 값이므로 둘 다 의존성으로 지정해야 한다.
• 따라서 드롭다운에서 다른 방을 선택하거나 서버 URL 입력을 수정하면 채팅이 다시 연결된다
• 하지만 message는 Effect에서 사용되지 않으므로 메시지를 편집해도 채팅에 다시 연결되지 않는다.

  // App.js
  .
    import { useState, useEffect } from 'react';
    import { createConnection } from './chat.js';
  .
    function ChatRoom({ roomId }) {
      const [serverUrl, setServerUrl] = useState('https://localhost:1234');
      const [message, setMessage] = useState('');
  .
      useEffect(() => {
        const connection = createConnection(serverUrl, roomId);
        connection.connect();
        return () => {
          connection.disconnect();
        };
      }, [serverUrl, roomId]);
  .
      return (
        <>
          <label>
            Server URL:{' '}
            <input
              value={serverUrl}
              onChange={e => setServerUrl(e.target.value)}
            />
          </label>
          <h1>Welcome to the {roomId} room!</h1>
          <label>
            Your message:{' '}
            <input value={message} onChange={e => setMessage(e.target.value)} />
          </label>
        </>
      );
    }
  .
    export default function App() {
      const [show, setShow] = useState(false);
      const [roomId, setRoomId] = useState('general');
      return (
        <>
          <label>
            Choose the chat room:{' '}
            <select
              value={roomId}
              onChange={e => setRoomId(e.target.value)}
            >
              <option value="general">general</option>
              <option value="travel">travel</option>
              <option value="music">music</option>
            </select>
            <button onClick={() => setShow(!show)}>
              {show ? 'Close chat' : 'Open chat'}
            </button>
          </label>
          {show && <hr />}
          {show && <ChatRoom roomId={roomId}/>}
        </>
      );
    }

  // Chat.js
  .
    export function createConnection(serverUrl, roomId) {
      // A real implementation would actually connect to the server
      return {
        connect() {
          console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
        },
        disconnect() {
          console.log('❌ Disconnected from "' + roomId + '" room at ' + serverUrl);
        }
      };
    }