![[프론트엔드] REACT Redux 라이브러리[3]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FIIdoP%2FbtrymHOv5lV%2F10jWvRcfqdyKJND7DcF0Uk%2Fimg.png)
728x90
간단한 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
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<div class="toggle"></div>
<hr/>
<h1>0</h1>
<button id="increase">+1</button>
<button id="decrease">-1</button>
<script src="./index.js"></script>
</body>
</html>
2. 화면 UI
DOM 레퍼런스 만들기
이번 프로젝트에서는 UI를 관리 할 떄 별도의 라이브러리를 사용하지 않습니다.
따라서 DOM을 직접 수정하는 작업이 필요합니다.
다음과 같이 자바스크립트 파일 상단에 수정할 DOM 노드를 가리키는 값을 선언해줍니다.
아래와 같이 index 파일을 수정합니다.
- index.js
const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#dncrease");
액션 타입과 액션 생성 함수 정의
프로젝트에서 변화를 일으키는 것을 액션이라고 합니다.
액션 이름은 문자열 형태로 대문자로 작성해야 하고 고유한 이름을 가져야 합니다.
이름이 중복될경우 예상지 못한 결과를 발생시킬 수 있기 때문입니다.
아래와 같이 파일에 액션 생성함수를 선언해줍니다.
- 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 toggleSwitch = () => ({ type: TOGGLE_SWITCH });
const increase = (difference) => ({ type: INCREASE, difference });
const decrease = () => ({ type: DECREASE });
728x90
'프론트엔드 > React' 카테고리의 다른 글
| [프론트엔드] REACT Redux 라이브러리[5] (0) | 2022.04.06 |
|---|---|
| [프론트엔드] REACT Redux 라이브러리[4] (0) | 2022.04.05 |
| [프론트엔드] REACT Redux 라이브러리[2] (0) | 2022.04.04 |
| [프론트엔드] REACT Redux 라이브러리[1] (0) | 2022.04.03 |
| [프론트엔드] REACT Context API [7] (0) | 2022.04.03 |