React

CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.자바스크립트 파일 안에서 CSS를 작성하는 형태이다. 그렇기때문에 .css/.scss 파일을 만들지 않아도 된다.npm install

redux : 전역상태를 관리하는 라이브러리 store에 전역 상태를 저장, 프로그램에서 관리하는 store는 하나, state는 여러개 될 수 있다\|component : store에서 필요한 state 값을 구독하여 사용한다\|어떻게 변경시킬지에 대한 정보를 담아서

useNavigate 이렇게 셋팅 이렇게 함수 만들어서 경로 설정 할 수 있다 useParams useSearchParams ![](https://velog.v

https://www.npmjs.com/package/redux-persist에서 quick start 셋팅 참조 가능 redux 에서 local storage 사용할 수 있도록 하는 라이브러리npm install redux-persist장바구니에 담기 누르면

Hyper Text Markup Language<태그> <태그/> 이렇게 열고 닫는 태그 쓰거나 <br /> 처럼 한번에 여닫을 수 있다. html 의 뼈대를 구성하는 태그보통 웹사이트는 페이지별로 html파일이 따로 존재하고, 페이지를 이동하게 될 경

제목이 너무 장황하군요누군가에게는 당연하다고 느껴질 수 있지만 나는 처음 깨달은 사실이기에 블로그에 글을 남겨 까먹지 않으려 한다.useState 는 리액트 훅의 일종으로 state값 관리를 도와주는 훅이다.useState의 기본 형태는 다음과 같다여기서 state와

그럼 예제를 통해 useMemo를 사용해보겠습니다. 해당 예제는 일부러 무거운 연산을 실행하여 부하를 일으키면서 숫자와 텍스트를 변경하는 코드입니다.App.jsx에서는 화면이 렌더링 될 때마다 heavyCalc 함수를 실행하며 number와 text를 바꿔주는 함수핸들

useId를 이용하면 간단하게 고유의 ID를 생성할 수 있습니다. useId를 사용하는 방법을 간단한 예제를 통해 알아보겠습니다.App.jsx는 useId로 체크박스에 ID를 부여하고, Child 라는 컴포넌트를 보여주는 코드입니다.Child 컴포넌트 또한 위와 같이

useDeferredValue는 React18에 새로 나온 Hook으로 리렌더링의 우선순위에 따라 의도적으로 렌더링을 지연시킬 수 있습니다. 이러한 기능은 이후 챕터에서 다룰 debounce, throttle 과 비슷해보이지만 useDeferredValue Hook을

리덕스 툴킷은 상태관리 라이브러리인 리덕스의 문제점을 보완하기 위해 만들어졌다. store에서 state를 구독하여 어떻게 변경시킬지에 대한 정보를 담아서 action이라는 객체를 만든다. 그리고 그 action을 dispatch(처리될 작업을 실행시키고 보내는 것)해

개발을 할 때에는 다양한 저장소에 데이터를 저장한다. 그동안 거의 로컬스토리지 기능만 이용하였는데 팝업을 띄울 일이 있어서 쿠키를 이용해보았다. 팝업을 띄우는 것은 어렵지 않지만 체크박스를 체크하면 하루동안 팝업이 나오지 않고 다시 하루가 지나면 팝업이 뜨게 해야 했다