반응형 웹사이트 이해하고 가기

웹 포트폴리오를 만들어야해서 관련된 영상을 보며 반응형사이트에 대해 이해했습니다.

이번에 영상을 보면서 3가지를 새롭게 배웠습니다.

1. CSS 변수 지정해서 적용하기
2. 반응형 Nav에 UseState가 적합
3. 다크모드 라이트 모드 변경

미리 변수 CSS만들기

CSS에서 라이트모드일때와 다크모드일때 다르게 나와야하는 부분들(텍스트 색깔, 로고, 배경 등)에 대해 변수로 지정했습니다.

이러면 다크모드 -> 라이트모드로 변경되도 매번 모든 CSS에 설정 안적어도 된다는 강점이 있습니다!

App.css

:root {
	--body-bg-color : #ecf0f3;
    --nav-bg : linear-gradient(0deg, #fff, #ecf0f3);
    --nav-box-shadow: 0 0 67px 0 rgb(109 117 143/13%);
    --logo-color: #1e1e1e;
    --txt-color: #1e1e1e;
    --invert: invert(0%);
}

[data-theme = "Dark"] {
	--body-bg-color: #1e1e1e;
    --nav-bg: #313030;
    --nav-box-shadow: 0 0 0px 0 rgb(109 117 143/13%);
    --logo-color: #ecf0f3;
    --txt-color: #fff;
    --invert: invert(100%);
}

이때 data-theme="Dark"는 HTML요소에 data-theme가 적용되어있으면 해당 요소들은 Dark테마로 적용됩니다.

즉 라이트모드는 :root에 적힌대로 나오고 다크모드는 data-theme="Dark"에 적힌대로 스타일이 변합니다.

반응형 Nav 만들기

처음에는 useRef를 사용해서 직접 DOM요소에 접근을 했었습니다.
하지만 gpt와 다수의 블로그의 도움을 받고 useState로 변경하게 되었습니다.

useRef vs useState

useRef의 경우 말했듯이 DOM요소에 직접 접근을 합니다.
특히 값이 변경되도 리렌더링하지 않는다는 큰 차이점이 있습니다.
특히 UI변경을 하지 않는 비동기처리, 이벤트핸들러에 유용합니다

useState의 경우 상태가 변할때마다 컴포넌트가 자동으로 리렌더링 됩니다.
사용자와의 상호작용을 다루기에 적합합니다
ex) 메뉴버튼을 클릭해 메뉴를 열고 닫을때 상태가 변해야하는데 이걸 자동 감지하고 화면을 업데이트 해줍니다

Nav 코드 및 코드 설명

Nav.jsx

const [isMenuOpen, setIsMenuOpen] = useState(false)
const [them, setTheme] = useState('Light')

const toggleTheme = () => {
	setTheme((prev) => (prev === 'Light' ? 'Dark' : 'Light'));
}

const menuHandler = () => {
	setIsMenuOpen((prev) => !prev)
}


// 테마 효과 변경 적용
useEffect(() => {
	document.body.setAttribute('data-theme', theme)
},[theme])

return (
	<div className={navCSS.nav_wrapper}>
    	<div className={navCSS.logo}>
        	<a href="#">PKH</a>
        </div>
        
        <ul className={`${isMenuOpen ? navCSS.ActiveNav : ''}`}>
            <li><a href='#'>HOME</a></li>
            <li><a href="#">Services</a></li>
        	<li><a href="#">Resume</a></li>
        	<li><a href="#">Client</a></li>
        	<li><a href="#">Contact</a></li>
       </ul>
       <div className={navCSS.NavBtns}>
       		<i 
          		className='ri-moon-line' 
          		onClick={toggleTheme} 
          		id={navCSS.Theme}
          		aria-label={`Switch to ${theme === 'Light' ? 'Dark' : 'Light'} theme`}
        	></i>
        	<i 
          		className='ri-menu-4-line' 
          		id={navCSS.bars} 
          		onClick={toggleMenu}
          		aria-label="Toggle menu"
        	></i>
       </div>
        
    </div>
)

피드백

조금 느리더라도 각 훅이 언제 가장 적합하고 어떻게 사용하는게 베스트인지 항상 고민하면서 사용하자

그리고 UI/UX는 유저를 위한 방향으로 만들기!!

지금은 많이 부족하지만 여기에 three.js를 도입하고 내가 만들 각 AI 서비스 링크나 혹은 바로 사용할 수 있게 만들어볼 예정입니다.