[ React ] Navbar 만들기 - 01

 

 

 

[1]  total { count 예정 } Day Journey 

[ 구현 기능 ] : ( + ) / ( - ) 버튼을 누르면 숫자가 증가되거나 감소함. 
[ 추가 기능 ] : 카운트가 1 이하로 떨어지지 않게 고정하기

 

 

[ 추가 기능 ] 구현을 위해 useState 를 이용해서 함수를 만들 때, 조건을 걸어야 한다고 생각을 했습니다. 

1. useState 이용해서 " btnIncrease " 와 " btnDecrease " 함수를 구현

2. 1 이하로 떨어지지 않게 하기 위해 btnDecrease에 조건을 지정

 

import {useState] from 'react';
///////////////////////////////

const [ up, btnup ] = useState(1);

const btnIncrease = () => {
	btnup(cnt + 1);
};

const btnDecrease = () => {
	if(cnt > 1){
    	btnup(cnt - 1};
    }
};

 

< TIP >

( cnt > 0 )으로 if 문을 걸었을 때, cnt가 -1 까지 되는 이유는 cnt 가 0일 때 안의 cnt -1 을 수행하기 때문이다. 

 

// cnt 함수를 적용하고 싶은 곳에 {cnt}를 넣어줍니다. 

<span className="journey__Title">total {cnt} Day Journey </span>