React 4일차

useEffect

useEffect는 컴포넌트가 렌더링 된 이후 실행되어야 하는 작업인 사이드 이펙트를 처리할 때 사용하는 Hook.

 

데이터를 요청, 이벤트 리스너 등록/제거, setTimeout / setInterval 같은 타이머 설정, 로컬 스토리지 접근, 외부 라이브러리 사용, 컴포넌트 생명주기 대체 (componentDidMount / componentDidUpdate / componentWillUnmount) 등에 사용된다.

 

사용하는 방법

//1. 의존성 배열 없이 단순하게 이펙트 함수만 전달할 때
useEffect(() => {
    console.log("의존성 없음 : 모든 렌더링마다 실행")
})

의존성이 없으면, 모든 렌더링마다 실행된다.

 

//2. 빈 배열을 의존성 배열로 설정할 때
useEffect(() => {
    console.log("의존성 빈 배열 : 컴포넌트가 마운트될 때 1회 실행")
}, [])

의존성에 빈 배열을 넣을 경우,  컴포넌트가 처음으로 마운트 될 때 한번 실행된다.

 

//3. 의존성 배열에 특정 state를 넣었을 때
useEffect(() => {
    console.log("의존성 배열에 name을 넣었을 때 : name이 변경될 때마다 실행")
}, [name])

의존성 배열에 state 값을 넣을 경우, onChange 처럼 변경될 때마다 실행된다.

 

//4. 클린업 함수(컴포넌트가 사라질 때 실행하는 함수) : 특정값이 변경되기 이전 값을 활용하고 싶을 때(언마운트 전에 실행됨)
    //수정되었지만, 수정되기 전 값을 사용하고 싶을 때
useEffect(() => {
    return () => {
        console.log(`클린업 함수 : 컴포넌트가 사라질 때 실행: ${num}`)
    }
}, [num])

컴포넌트가 unmount 전에 실행되며, 변경 전의 state 값을 사용할 수 있다.

 

//5. 컴포넌트가 완전히 사라질 때 실행되는 함수
useEffect(() => {
    return () => {
        console.log(`클린업 함수, 빈 배열 : 컴포넌트가 완전하게 사라질 때 실행: ${num}`)
    }
}, [])

컴포넌트가 완전히 사라지고 난 후 실행된다.

 

useContext

시스템에서 데이터를 꺼내 쓰기 위한 Hook.

DOM은 트리구조로 되어있기 때문에 루트 컴포넌트가 최하위 컴포넌트에게 props를 전달하려면, 두 사이에 존재하는 컴포넌트들을 전달하며 보내야 한다. 하지만, useContext를 사용하면 원하는 컴포넌트에 직접 데이터를 사용할 수 있다.

 

Context Provider 태그로 감싸진 컴포넌트와 그 하위의 컴포넌트들에게만 사용할 수 있으며, props 없이 주고 받는다.

 

import React from 'react'

const ThemeContext = React.createContext();

export default ThemeContext

createContext()를 사용해 Context를 생성한다.

 

import React, { useState } from 'react'
import ThemeContext from './ThemeContext';
import MainContent from './MainContent';

const UseContextTest = () => {
    const [theme, setTheme] = useState("white");

    const toggleTheme = () =>{
        console.log("??")
         setTheme(theme === "white" ? "black" : "white");
    };
    
    return (
        <ThemeContext.Provider value={{theme, toggleTheme}}>
            <MainContent />
        </ThemeContext.Provider>
    )
}

export default UseContextTest

다른 파일로 생성한 Constext를 위해 import를 해주면, 사용할 수 있다.

Context.Provider를 태그로 감싸면, 그 하위 컴포넌트들은 state 값인 theme와 함수를 props 사용 없이 전달할 수 있다.

 

import React, { useContext } from 'react'
import ThemeContext from './ThemeContext'

const MainContent = () => {
    const {theme, toggleTheme} = useContext(ThemeContext);

    const containerStyle = {
        width: "100vw",
        height: "100vh",
        padding: "12px",
        background: theme,
        color: theme === "white" ? "black" : "white"
    }
  return (
    <div style={containerStyle}>
        <p>안녕하세요, 테마변경 테스트 중입니다.</p>
        <button onClick={toggleTheme}>테마변경</button>
    </div>
  )
}

export default MainContent

사용하기 위해 useContext를 사용하여 배열 분배 할당을 통해 theme와 togleTheme를 가져온다.

style을 추가할 때 theme 값에 따라 하얀색인지, 검은색인지 동적으로 저장할 수 있다.

 

CustomHook

기존에 있는 useState, useEffect 등을 조합하여 재사용 가능한 로직을 추출한 함수이다.

이름은 반드시 접두사 use로 시작해야 한다.

컴포넌트가 아닌 일반 함수이지만, 기존 Hook을 추가할 수 있다.

상태와 로직을 캡슐화(정보 은닉 등)하고 재사용 가능한다.

 

장점

• 반복되는 로직을 추출해서 재사용하므로 코드 재사용이 높아진다.
• 컴포넌트는 UI에 집중하고 Hook은 동작과 상태 처리에 집중할 수 있기 때문에, 관심사 분리로 유지보수와 테스트가 쉬워진다.
• 다양한 Hook을 통해 하나의 함수로 캡슐화하기 때문에, 컴포넌트가 더 간결해지고 읽기 쉬워진다.
• 독립적인 상태 관리로 여러 곳에서 호출해도 서로 간섭하지 않는다.

 

React Router DOM

기존 JSP은 서버에

${pageContext.request.contextPath}/login.me

이렇게 주소를 보내면, Controller, Service, Mapper를 통해 로직을 처리한 후 다음 페이지를 그려서 클라이언트에 보내는 방식이며, 페이지를 전환할 때마다 깜빡이는 현상(flicker)이 있다. 또한, JSP는 새로고침을 해야지 데이터가 갱신된다.

 

하지만, React는 SPA(싱글 페이지 애플리케이션)는 하난의 페이지에서 url 따라 다른 컴포넌트를 보여주고, 새로고침 없이 화면 전환 가능하다.

 

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />           {/* 메인 페이지 */}
        <Route path="/about" element={<About />} />     {/* about 페이지 */}
        <Route path="/profile/:username" element={<Profile />} /> {/* 파라미터 */}
        <Route path="*" element={<NotFound />} />       {/* 404 */}
      </Routes>
    </BrowserRouter>
  );
}

BrowserRouter를 반드시 Routes 감싸주는 컴포넌트이다.

Routes는 여러 개의 Route를 묶어주는 컴포넌트이다.

Route는 path에 어떤 컴포넌트를 보여줄지 설정할 수 있다.

Link는 새로고침 없이 페이지 이동처럼 새로운 컴포넌트로 그려준다.

useNavigate는 자바스크립트 코드로 페이지 이동을 할 수 있다.

useParams는 URL에 포함된 파라미터 값을 가져올 수 있다.