[URECA] Day53 React useEffect(), useLocation()

📃 주요 코드 설명

import React, { useEffect, useState } from 'react'
import { Link, NavLink, useLocation } from 'react-router-dom'
...
const Header = () => {
  const [isOn, setIsOn] = useState(false)
  const location = useLocation()
  console.log(location)
  console.log(location.pathname)

  const addClassOn = () => {
    setIsOn(!isOn)
  }

  useEffect(() => {
    setIsOn(false)
  }, [location.pathname])

  const handleResize = () => {
    if (window.innerWidth > 1100) {
      setIsOn(false)
    }
  }

  useEffect(() => {
    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  return (
    <header className={css.hd}>
      <div className={css.con}>
        <h1 className={css.logo}>
          <Link to={'/'}>
            <Logo />
          </Link>
        </h1>
        <div className={isOn ? `${css.gnb} ${css.on}` : css.gnb}>
     ...
          <div className={css.icon}>
         ...
          </div>
        </div>
        <i className={`${css.ham} bi bi-list`} title="전체메뉴 보기버튼" onClick={addClassOn}></i>
      </div>
    </header>
  )
}

const CustomNavLink = ({ to, label }) => (
  <NavLink className={({ isActive }) => (isActive ? `${css.active}` : '')} to={to}>
    {label}
  </NavLink>
)
const CustomIconLink = ({ to, icon }) => (
  <NavLink className={({ isActive }) => (isActive ? `${css.active}` : '')} to={to}>
    <i className={`bi ${icon}`}></i>
  </NavLink>
)

export default Header

 

🗨️ useEffect에 대한 설명

UseEffect는 외부 시스템과 컴포넌트를 동기화하는 React Hook이다. 

useEffect(setup, dependencies?)

컴포넌트의 최상위 레벨에서 useEffect를 호출해 Effect를 선언할 수 있다. 

 

⬇️ Effect란 무엇인가?

렌더링 자체에 의해 발생하는 부수 효과를 특정하는 것

특정 이벤트가 아닌 렌더링에 의해 직접 팔생

 

채팅에서 메시지를 보내는 것은 이벤트이다.

왜냐? 사용자가 특정 버튼을 클릭함에 따라 직접 발생하기에

그러나 서버 연결 설정은 Effect이다. 왜냐? 컴포넌트의 표시를 주관하는 어떤 상호 작용과 상관없이 발생한다. 

Effect는 커밋이 끝난 후에 화면 업데이트가 이뤄지고나서 실행된다.

이 시점이 React 컴포넌트를 외부 시스템과 동기화하기 좋은 타이밍 ⏱️

 

💡Effect는 주로 React 코드를 벗어난 특정 외부 시스템과 동기화하기 위해 사용된다. 브라우저API, 서드 파트 위젯, 네트워크 등 포함

만일, Effect가 단순히 다른 상태에 기반해 일부 상태를 조정하는 경우 필요없을 수 있다.

Effect로 동기화하기 – React

Effect로 동기화하기 – React

 

 

- 매개변수에 대한 설명

setUp(설정): 설정함수는 선택적으로 clean up(정리)함수를 반환할 수 있다.

의존성 변화에 따라 컴포넌트가 리렌더링될 경우, React는 이전 렌더링에 사용된 값으로 정리함수를 실행한 새로운 값으롯 ㅓㄹ정함수를 실행한다.

컴포넌트가 DOM에서 제거된 경우에도 정리 함수를 실행한다.

dependencies 선택사항: 설정 함수 코드 내부에서 참조되는 모든 반응형 값들이 포함된 배열로 구서오딘다.

반응형 값에는 props, state 모든 변수 및 컴포넌트 body에 직접 선언된 함수들이 포함되어 있다. 

[dep1, dep2, dep3]과 같이 작성해야한다. 

 

- 반환 값

useEffect는 undefined를 반환한다.

 

- 주의사항

컴포넌트의 최상위, 커스텀 Hook에서만 호출 가능

반복문이나 조건문에서 사용 불가

필요시, 새로운 컴포넌트를 추출해 해당 컴포넌트로 state를 이동해 사용 가능

 

외부 시스템과 컴포넌트를 동기화할 필요 없을 시, Effect를 선언할 필요x

 

[React] 라이프사이클 — 오늘도 한줄

[React] 라이프사이클

 

🗨️ useLocation() 에 대한 설명

React Router 라이브러리에서 제공하는 Hook, 현재ㅔ 브라우저의 URL 정보를 가져오는데 사용

컴포넌트 내에서 현재 페이지의 경로, 쿼리 매개변수, 해시 등 URL에 관련된 정보에 접근 가능하게 해준다.

 

useLocation이 반환하는 객체의 주요 속성

1. pathname: 현재 URL의 경로 부분 (예: '/about')
2. search: URL의 쿼리 문자열 부분 (예: '?id=123')
3. hash: URL의 해시 부분 (예: '#section1')
4. state: 페이지 이동 시 전달된 상태 객체
5. key: 각 위치에 대한 고유 식별자

.hd {
  background: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  padding: var(--fs16) 0;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99999;
}
.con {
  border: 1px solid red;
  max-width: 1200px;
  width: calc(100% - 4rem);
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gnb {
  display: flex;
  align-items: center;
  gap: var(--fs33);
}
.gnb > * {
}
.gnb nav,
.gnb .icon {
  display: flex;
  /* gap: var(--fs16); */
}
.gnb a {
  display: block;
  padding: var(--fs16) var(--fs20);
}
.gnb nav a {
  font-size: var(--fs20);
  border: 2px solid tomato;
  position: relative;
}
.gnb nav a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 2px;
  background-color: var(--dark-colors-accent-dark);
  transition: 0.3s;
}
.gnb nav a.active::before,
.gnb nav a:hover::before {
  width: 100%;
}

.gnb .icon a {
  padding: var(--fs8);
}

.gnb a:hover,
.gnb a.active {
  color: var(--dark-colors-accent-dark);
}
.ham {
  display: none;
}

@media (max-width: 1100px) {
  .gnb {
    display: flex;
    position: fixed;
    width: 70%;
    height: 100%;
    border: 2px solid red;
    top: 0;
    right: -100%;
    background-color: white;
    flex-direction: column;
    /* padding-top: 200px; */
    justify-content: center;
    transition: 0.3s;
  }
  .gnb.on {
    right: 0;
  }
  .gnb nav {
    flex-direction: column;
    text-align: center;
    border: 1px solid lightgray;
    width: 70%;
  }
  h1 {
    position: relative;
    z-index: 10;
  }
  .ham {
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 10;
  }
}
@media (max-width: 600px) {
}

[CSS] var() — 오늘도 한줄

[CSS] var()

[CSS] z-index — 오늘도 한줄

[CSS] z-index

[CSS] calc() — 오늘도 한줄

[CSS] calc()