프론트엔드/React

[프론트엔드] REACT Redux 라이브러리[4]

초깃값 설정 프로젝트에서 사용할 초깃값을 정의합니다. 초깃값의 형태는 숫자, 문자열, 객체 등 자유롭게 설정합니다. - index.js const divToggle = document.querySelector(".toggle"); const counter = document.querySelector("h1"); const btnIncrease = document.querySelector("#increase"); const btnDecrease = document.querySelector("#dncrease"); const TOGGLE_SWITCH = "TOGGLE_SWITCH"; const INCREASE = "INCREASE"; const DECREASE = "DECREASE"; const toggle..

[프론트엔드] REACT Redux 라이브러리[3]

간단한 UI 구성하기 먼저 스타일 파일을 vanlia-redux 폴더안에 작성합니다. 1. 파일 작성 - index.css .toggle { border: 2px solid black; width: 64px; height: 64px; border-radius: 32px; box-sizing: border-box; } .toggle .active { background: yellow; } - index.html 0 +1 -1 2. 화면 UI DOM 레퍼런스 만들기 이번 프로젝트에서는 UI를 관리 할 떄 별도의 라이브러리를 사용하지 않습니다. 따라서 DOM을 직접 수정하는 작업이 필요합니다. 다음과 같이 자바스크립트 파일 상단에 수정할 DOM 노드를 가리키는 값을 선언해줍니다. 아래와 같이 index 파일을..

[프론트엔드] REACT Redux 라이브러리[2]

Parcel로 프로젝트 만들기 프로젝트를 구성하기 위해 Parcel이라는 도구를 사용할 예정입니다. 이 도구를 사용하면 쉽고 빠르게 웹 어플리케이션 프로젝트를 구성 할 수 있습니다. 1. parcel-bundler 설치 yarn global add parcel-bundler #주의사항 설치가 안될 경우 아래 설치 npm install -g parcel-bundler 2. 폴더 추가/파일생성 아래의 순서대로 명령어 실행 mkdir vanilla-redux cd vanilla-redux #package.json 파일 생성 yarn init -y vanila-redux 디렉토리 안에 아래 두개 파일을 생성합니다. - index.html 바닐라 자바 스크립트 - index.js console.log("hello..

[프론트엔드] REACT Redux 라이브러리[1]

Redux란? 리덕스란 가장 많이 사용되는 리엑트의 상태관리 라이브러리이다. 리덕스를 사용할 경우 컴포넌트 상태를 업데이트 하는로직을 분리하여 더 효율적으로 관리 할 수 있다. 컴포넌트간의 상태를 공유할 떄도 컴포넌트를 거치는 일(props) 없이 쉽게 전달/업데이트가 가능하다. Conext Api도 같은 작업을 할 수 있지만 리덕스 라이브러리를 사용하면 상태를 더 체계적으로 관리 할 수 있기 떄문에 대규모 프로젝트를 사용할 경우에는 리덕스를 사용하는게 좋다. 코드 유지보수성, 작업 효율, 등을 극대화할 수 있고 미들웨어 기능을 제공함으로써 비동기 작업들을쉽게 관리 할 수 있다. 개념 정리하기 리덕스를 사용하면서 접하게 될 키워드 개념을 정리해보도록 하려고 한다. 1.액션 상태에 변화가 필요하면 액션(a..