React8 Redux Toolkit Redux Toolkit은 Redux를 더욱 쉽게 사용하기 위해 만들어졌다. 쉽게 만들어졌다고? 그럼 쓰지 않을 수가 없다. 그 전에 Redux Toolkit이 나오게 된 이유를 보도록 하자. Redux의 문제점 리덕스의 복잡한 스토어 설정 리덕스를 효율적으로 사용하기 위해서 설치해야되는 많은 패키지들(redux-action, redux-thunk 등) 리듀서(reducer)에 들어가는 필요하지만? 불필요해보이는 많은 양의 코드들(상용구 코드) 위의 문제점들을 개선한 것이 React Toolkit 이라고 보면 된다. 그럼 이제 어떻게 하면 되는지 알아보도록 하자. 예제로는 이전에 Redux 할 때 했던 Counter와 로그인 폼을 섞을 예정이다. 둘이 연관성은 딱히 없지만 왜? 슬라이스 마다 파일을 나누.. 2022. 7. 28. Redux로 전역 데이터 관리 하기 Redux는 상태의 중앙 관리를 위한 상태 관리 도구이다. 전역 상태를 생성하고 관리하기 위한 라이브러리 이다. 리덕스는 전역 상태를 보관하는 저장소, 상태 저장소에 접근을 위한 리듀서, 리듀서에 행동을 지시하는 액션, 저장소에 보관된 상태를 가지고 오는 서브스크립션으로 구분된다. 우선 redux와 react-redux가 설치되어 있어야 한다. npm install redux react-redux Redux Store 만들기 예제) 버튼을 누르면 카운터 증감하고, 토글 버튼으로 보여주고 사라지게 하는 예제이다. 보통은 src 밑에 store 라는 폴더를 만들고 index.js라고 파일을 만들어 준다. index.js import {createStore} from 'redux'; const initalSt.. 2022. 7. 28. Button Component 활용하기 버튼은 아마 페이지마다 자주 쓰는 Component 일 것이다. 나중에 가져다가 쓰면 편할 것 같아서 정리해본다. 디자인만 바꾸면 되니깐!!! UI / Button.module.css .button { width: 100%; font: inherit; padding: 0.5rem 1.5rem; border: 1px solid #8b005d; color: white; background: #8b005d; box-shadow: 0 0 4px rgba(0, 0, 0, 0.26); cursor: pointer; } .button:focus { outline: none; } .button:hover, .button:active { background: #ac0e77; border-color: #ac0e77; bo.. 2022. 7. 28. Modal Component 활용하기 웹 개발을 하면서 Modal은 떼려야 뗄 수 없는 관계이다. 이 컴퍼넌트는 재 사용율이 높을 것 같아서 여기다가 정리한다. ReactDOM.createPortal을 사용했다. 우선 public/index.html 파일에 가서 modal을 띄울 div를 하나 만든다. 나는 root div 바로 위에 추가했다. id는 overlays로 네이밍 했다. 그다음 components 밑에 UI 폴더 밑에 파일을 생성한다. Modal.module.css .backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 20; background-color: rgba(0, 0, 0, 0.75); } .modal { position: fi.. 2022. 7. 28. css-module 리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 이라는 기술을 사용하면, CSS 클래스의 충돌을 막을 수 있다. CRA 로 만든 프로젝트에서 CSS Module 를 사용 할 때에는, CSS 파일의 확장자를 .module.css 로 하면 된다. 예를 들어보자. Box.module.css .box { background: blueviolet; color: white; padding: 3rem; width: 300px; text-align: center; } 위와 같이 css 파일을 만들어준다. Box.js import React from "react"; import classes from "./Box.module.css"; const Box = () => { return Div Box; }.. 2022. 7. 27. useEffect hook useEffect hook 함수는 리엑트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행 할 수 있도록하는 Hook이다. 바로 사용법을 알아보자. 1. import 방법 import React, {useEffect} from 'react'; 2. 선언 방법 useEffect(()=> { // function // 아래 return 부분은 생략 가능. return () => { console.log('cleanUp'); }; },[deps]) - function : 마운트 시에 수행하고자 하는 작업 props 로 받은 값을 컴포넌트의 로컬 상태로 설정 외부 API 요청 (REST API 등) 라이브러리 사용 (D3, Video.js 등...) setInterval 을 통한 반복작업 혹은 setTimeout .. 2022. 7. 26. 이전 1 2 다음
