Wanted Challenge_React의 Hooks-useState, useContext, useEffect

📒 오늘의 공부

1. React의 Hooks

Wanted Frontend Challenge - React 강의 내용 정리_2-1

1. React의 Hooks

• React의 Hooks : useState, useContext, useEffect

• Hook의 장점

  • 로직의 재사용 가능, 관리가 쉽다.
    -> Hook은 함수 안에서 다른 함수를 호출하는 것으로 새로운 Hook 생성 가능
  • 로직을 한 곳에 모을 수 있어서 가독성이 좋음

• Hook 사용 시 규칙

  • 컴포넌트 최상위에서만 Hook 사용하기
    -> 반복문, 조건문 함 수 안에서 사용 불가
  • Hook은 여러 번 사용 가능
  • React 컴포넌트 안에서만 사용 가능(JS안에서 사용X) => jsx 파일 내에서 사용

useSate

• 함수형 컴포넌트에서 상태 변수와 해당 변수를 업데이트하는 함수를 생성하여 상태를 추가하고 관리할 수 있도록 도와주는 React의 Hook
  
• state = 상태 = 변수
• setState = state를 변경하는 함수
• initialStaet = 초기값

• useSate가 상태를 관리하고 전달하는 방법
  • 웹이 로딩되면서 Counter 컴포넌트 호출
  • 초기값으로 0을 전달하며 useState 호출
  • handleClick 함수가 실행되며 상태변경 함수(setCount) 호출
  • Rerender 발생
  • Counter 컴포넌트 두 번째 실행
  • 이전 상태변경 함수(setCount)로 인해 count값이 1이 되었기 때문에 초기값(0) 할당문 무시

useContext

• useContext는 Context API를 사용하여 전역 상태를 컴포넌트 내에서 손쉽게 사용할 수 있게 해주는 React의 Hook

  • Context API는 React에서 데이터를 전역으로 공유하기 위해 사용하며, 주로 props drilling 문제를 해결하기 위해 사용

  • Context API에서 state 값을 변경하면, Provider로 감싼 모든 컴포넌트들이 리렌더링

  • ex. 테마 데이터(다크, 라이트) / 인증 된 사용자 확인(로그인) / 이 외에 자주 업데이트할 필요가 없는 데이터

    ---

    💡 Props Drilling이란?

    Prop drilling은 React 애플리케이션에서 데이터를 전달하기 위해 필요한 과정을 설명하는 용어.
    React에서는 상위 컴포넌트에서 데이터(상태)를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주게 된다.
    중간 컴포넌트 입장에서는 타겟인 자식 컴포넌트에게 데이터를 전달해주기 위해 사용하지 않는 프로퍼티를 받는 셈이다.
    만약 10개, 20개의 컴포넌트를 거쳐야한다면?
    -> 가장 먼저 Props가 어디서 온것인지 추적이 어려움 -> 유지보수 비효율

    ---

• 사용 방법

  • createContext로 context 생성

  • 대상 컴포넌트(<Form />)에 값을 내려주기 위해서 Provider로
    대상 컴포넌트를 감싼다. -> Provider 하위 컴포넌트에서 모두 접근 가능

  • Provider의 value 속성으로 데이터 전달

    import { createContext, useContext } from 'react';
    
    const ThemeContext = createContext(null);
    
    export default function MyApp() {
      return (
        <ThemeContext.Provider value="dark">
          <Form />
        </ThemeContext.Provider>
      )
    }

• 하위 컴포넌트에서 useContext를 이용해 context의 value(dark)에 접근 가능
  const theme = useContext(ThemeContext)

  • 위의 변수를 className으로 활용하여 CSS 변경
    const className = 'panel-' + theme

    function Form() {
     return (
       <Panel title="Welcome">
         <Button>Sign up</Button>
         <Button>Log in</Button>
       </Panel>
     );
    }
    
    function Panel({ title, children }) {
     const theme = useContext(ThemeContext);
     const className = 'panel-' + theme;
     return (
       <section className={className}>
         <h1>{title}</h1>
         {children}
       </section>
     )
    }
    
    function Button({ children }) {
     const theme = useContext(ThemeContext);
     const className = 'button-' + theme;
     return (
       <button className={className}>
         {children}
       </button>
     );
    }

• 관련 CSS 예시

  .panel-light {
    background-color: #f4f4f4;
    color: #333;
  }
  
  .panel-dark {
    background-color: #222;
    color: #fff;
  }
  
  .button-light {
    background-color: #fff;
    color: #333;
    border: 1px solid #333;
  }
  
  .button-dark {
    background-color: #333;
    color: #fff;
    border: 1px solid #fff;
  }

• 결과물
  • context의 value(light / dark)가 변경되면 Provider의 하위 컴포넌트들이 모두 리렌더링되며 css가 변경 된다.
    

2. useEffect를 활용한 컴포넌트 생명주기 관리

• useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있도록 하는 React의 Hook
  useEffect(callback[, dependencies])

  • 첫번째 인자로는 함수를 받고, 두번째 인자로는 의존성 배열을 받는다.

• 컴포넌트의 생명주기
  

• mount

  • 컴포넌트가 처음으로 화면에 표시될 때(최초로 진행되는 렌더링)
  • 컴포넌트가 렌더링된 이후 useEffect의 첫 번째 인자로 전달된 콜백 함수 실행

• update

  • state나 props가 변경된 경우 리렌더링 발생
  • 이 때, useEffect는 두 번째 인자에 들어있는 의존성 배열을 체크
    => 의존성 배열로 전달된 값 중 하나라도 업데이트된 경우, 첫 번째 인자로 전달된 콜백 함수가 실행
    => 의존성 배열에 업데이트 된 값이 없거나 의존성 배열이 비어있다면 콜백함수는 실행되지 않는다
  • 만약 useEffect 내의 콜백함수로 인해 state나 props가 변경되었다면 리랜더링 발생

• unmout

  • 컴포넌트가 화면에서 사라지는 것
  • useEffect 내의 return 문을 통해 정리 함수가 실행

  import React, { useEffect } from 'react';
  
  function TimerComponent() {
    useEffect(() => {
      const timerId = setInterval(() => {
        console.log('Timer tick');
      }, 1000);
  
      return () => {
        clearInterval(timerId); // 컴포넌트가 언마운트될 때 타이머를 종료
      };
    }, []); // 의존성 배열이 빈 배열이므로 컴포넌트가 마운트될 때 한 번만 실행
  
    return (
      <div>
        Timer Component
      </div>
    );
  }
  
  export default TimerComponent;
  

3. 관련 질문에 답변하기

mount와 rendering의 차이

• mount는 컴포넌트가 처음으로 렌더링되어 화면에 나타나는 것을 의미하며 rendering은 컴포넌트가 화면에 렌더링되는 과정 자체를 의미한다.
• mount는 rendering의 일부분이며, mount는 컴포넌트가 DOM에 추가될 때만 발생하지만, rendering은 컴포넌트가 화면에 나타날 때마다 발생한다.

Props Drilling의 개념과 해결 방법

• Props Drilling은 React 애플리케이션에서 데이터가 여러 컴포넌트를 거쳐 전달되는 상황으로 데이터가 상위 컴포넌트에서 하위 컴포넌트로 전달되어야 하지만, 중간에 있는 여러 컴포넌트가 데이터를 필요로 하지 않는 경우에 발생할 수 있다.
• Context API를 사용하면 전역으로 상태를 관리할 수 있으므로, 중간 컴포넌트를 거칠 필요없이 필요한 컴포넌트에서 직접 Context를 통해 데이터에 접근할 수 있다.

---

참고자료

• Wanted FrontEnd Challenge 4월 React 강의자료
• React 공식문서 - useState
• React 공식문서 - useContext
• React 공식문서 - useEffect