# 서론 요즘 대부분의 웹앱, 모바일웹이 다크모드를 지원한다. 배터리 절약, 안구 보호, 세련된 디자인 등을 이유로 많이 사용하는 것 같다. 나도 라이트 모든는 눈이 아파서 항상 다크 모드를 사용한다...이번에 그 다크 모드를 사이드 프로젝트에 적용해보고자 한다. # 다크 모드 구현을 위해 필요한 것들 Theme : light와 Dark에 필요한 color Property를 담는다. GlobalStyles : document 전체에 Theme 적용을 위한 값을 담는다. Toggle: Dark Mode on/Off하는 컴포넌트 useDarkMode: DarkMode/LightMode 전환하하고 localStorage에 값을 담는 custom Hook # 코드 먼저 styles.d.ts를 만들어서 DefaultTheme에 대한 type을 정의한다. d.ts는 전역 변수나 전역 함수를 `imp

슬라이드할 컴포넌트 container로 사용할 곳에 useRef로 DOM element에 접근. 스타일은 overflow-x: scroll로 scroll 생성. 알아야할 지식들 onMouseDown: 마우스 왼쪽 버튼을 누를 때 발생하는 이벤트 onMouseUp: 마우스 왼쪽 버튼에서 손을 뗄 때 발생하는 이벤트 onMouseMove: 마우스를 움직이일 때 발생하는 이벤트(마우스 클릭여부 상관X) DOM.scrollwidth: 스크롤 할 수 있는 요소의 총 너비(스크롤 바에 의해 감춰진 영

useCallback은 특정 함수의 참조값을 저장해놓고(Memoization), 그 참조값이 변할 때만 다시 호출 해줌. 먼저 이 코드를 보자.(youtube채널 별코딩의 영상을 보고 정리함) useCallback state의 number값을 출력해주는 someFunction함수가 있고, someFunction의 참조값이 변할 때마다 someFunc의 상태를 알려주기 위해 useEffect사용했다. 얼핏 보기엔 useEffect를 사용했기 때문에 state의 number값을 바꾸면 someFunction이 변하거나 재호출 된 것이 아니기 때문에 someFunction가 호출되지 않을 것 같다. ![](https://velog.velcdn.com/images/tt8784/post/e78c8e89

이 디자인 패턴을 정리하게 된 이유 >#### Netflix를 html, css, js로 작성한 뒤, 리액트로 옮겨보는 작업을 하던 도중. Components를 어떻게, 어느 정도 수준까지 분리해야할까라는 고민이 생겼다. 그렇게 Design Patter 중 Presentational & Container Components라는 패턴을 보게 되었고. 예전에 '리액트를 다루는 기술'이라는 책에서도 본 기억이 있기에 적용해보기로 했다. 하지만 역시 이론과 실제는 달랐다. Component를 어느 단위까지 쪼개야 하는지, Container와 Presentational을 나누는 정확한 기준은 무엇인지 너무 막연했다. 아래는 내가 가진 의문점들이다. 1) 기능적인 부분의 범위는 어디까지인가? 2) Container와 Presentational이 같은 범위 안에 있어도 괜찮은가? Presentational Components<b

LEARNING REACT를 읽고 정리한 글입니다. `` Q. input의 입력값이 변할 때마다 alert창을 띄워주고 싶다면 어떻게 해야할까?? 이럴 때 필요한 것이 useEffect이다. useEffect함수 안에 alert를 넣어주면 렌더러가 매 렌더링을 마칠 때마다 side effect로 alert를 실행시켜 준다. 즉, 렌더러가 side effect(부수효과)로 무엇인가 실행 시키고 싶을 때 useEffect를 사용한다. useEffect를 사용하면 렌더링이 끝나기를 기다렸다가 alert나 console.log등의 값을 제공할 수 있다. > Side Effect는 2가지 종류로 나뉜다. clean-up해야 하는 것. 그렇지 않은 것. 의존관계 배열 리액트는 state가 변하면 컴포넌트 트리 또한 리랜더링