티스토리 뷰
노마드코더에서 useState 예제로 단위 변환을 할 수 있는 웹 사이트를 만들었다.
이번에도 완전히 따라하기 보다는 어떻게 하는지를 대충 훑어보고 직접 처음부터 다시 만드는 식으로 복습했다.
1. useState(data, setData)
react의 useState는 데이터의 상태를 관리하는 함수다.
첫번째 매개변수인 data에는 데이터의 초기값을 넣어줄 수 있다.
두번째 매개변수인 setData는 첫번째 데이터를 변경할 때 사용하는 함수다.
데이터의 상태가 setData함수를 통해 변경되면 자동으로 재렌더링을 시켜주기 때문에 유용하다!
관습!
두번 째 매개변수는 set' data이름 ' 으로 지어준다.
2. 전체 코드
<!DOCTYPE html>
<html lang="ko">
<link rel="stylesheet" href="/css/react-practice.css">
<body>
<div id="root">
</div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById('root');
function MinutesTimes() {
const [time_amount, set_time_amount] = React.useState();
const [flipped, set_flipped] = React.useState(false);
const minute_input = (event) => {
set_time_amount( current => {
return event.target.value;
})
};
const hour_input = (event) => {
set_time_amount ( current => {
return event.target.value;
})
};
const reset = () => {
console.log('click reset button');
set_time_amount( current => {
return 0;
})
};
const reverse = () => {
console.log('click reverse button');
reset();
set_flipped ( current => {
return !current;
})
};
return (
<div class = "section_containers">
<div className="h3_title_containers">
<h3 className="h3_titles">Minute & Hour</h3>
</div>
<div className="convert_input">
<div className="first_input">
<label htmlFor="minute">Minute</label>
<input placeholder="minute" id="minute" type="number" value={ !flipped ? time_amount : time_amount * 60 } disabled={flipped} onChange={minute_input}></input>
</div>
<div class="second_input">
<label htmlFor="hour">Hour</label>
<input placeholder="hour" id="hour" type="number" value={ !flipped ? time_amount / 60 : time_amount } disabled={!flipped} onChange={hour_input}></input>
</div>
</div>
<button onClick={reset}>reset</button>
<button onClick={reverse}>reverse</button>
</div>
)
}
function MeterKilometer() {
const [meter_amount, set_meter_amount] = React.useState();
const [flipped, set_flipped] = React.useState(false);
const meter_input = (event) => {
set_meter_amount( current => {
return event.target.value;
})
};
const km_input = (event) => {
set_meter_amount ( current => {
return event.target.value;
})
};
const reset = () => {
console.log('click reset button');
set_meter_amount( current => {
return 0;
})
};
const reverse = () => {
console.log('click reverse button');
reset();
set_flipped ( current => {
return !current;
})
};
return (
<div class = "section_containers">
<div className="h3_title_containers">
<h3 className="h3_titles">Meter & Km</h3>
</div>
<div className="convert_input">
<div class="first_input">
<label htmlFor="meter">Meter</label>
<input placeholder="meter" id="meter" type="number" value={ !flipped ? meter_amount : meter_amount * 1000 } disabled={flipped} onChange={meter_input}></input>
</div>
<div class="second_input">
<label htmlFor="km">Km</label>
<input placeholder="km" id="km" type="number" value={ !flipped ? meter_amount / 1000 : meter_amount } disabled={!flipped} onChange={km_input}></input>
</div>
</div>
<button onClick={reset}>reset</button>
<button onClick={reverse}>reverse</button>
</div>
)
}
function NoneSelect() {
return(
<div class = "section_containers">
<div className="h3_title_containers">
<h3 className="h3_titles">Select your conversion</h3>
</div>
</div>
)
}
function App() {
const [option_index, set_option_index] = React.useState('xx');
const index_change = (event) => {
console.log(event.target.value);
set_option_index(event.target.value);
};
return(
<div>
<h1 id="main_title">Converter</h1>
<select class="convert_select" value = {option_index} onChange = {index_change}>
<option class="convert_select" value = "xx"> Select Conversion </option>
<option class="convert_select" value = "0" > Minute & Hour </option>
<option class="convert_select" value = "1" > Meter & km </option>
</select>
<hr />
{option_index === "xx" ? <NoneSelect /> : null}
{option_index === "0" ? <MinutesTimes /> : null }
{option_index === "1" ? <MeterKilometer /> : null }
</div>
)
}
ReactDOM.render(<App />, root);
</script>
</html>
App()
표시되는 화면
변환할 단위를 선택하는 창을 띄운다.
function App() {
const [option_index, set_option_index] = React.useState('xx');
const index_change = (event) => {
console.log(event.target.value);
set_option_index(event.target.value);
};
return(
<div>
<h1 id="main_title">Converter</h1>
<select class="convert_select" value = {option_index} onChange = {index_change}>
<option class="convert_select" value = "xx"> Select Conversion </option>
<option class="convert_select" value = "0" > Minute & Hour </option>
<option class="convert_select" value = "1" > Meter & km </option>
</select>
<hr />
{option_index === "xx" ? <NoneSelect /> : null}
{option_index === "0" ? <MinutesTimes /> : null }
{option_index === "1" ? <MeterKilometer /> : null }
</div>
)
}
useState로 <select>태그의 <option>을 관리한다.
<select>태그의 onChange 속성을 통해 상태를 변경시키고,
이벤트가 발생한 값에 따라 해당 값에 따른 Component를 호출한다.
MinutesTimes() & MeterKilometer()
로직은 동일해서... 하나의 코드만 올린다!
옵션을 선택하면 변환값을 입력하는 input창이 두개 있다.
input에 들어가는 값과, disabled 속성을 useState로 관리하도록 했다.
function MinutesTimes() {
const [time_amount, set_time_amount] = React.useState();
const [flipped, set_flipped] = React.useState(false);
const minute_input = (event) => {
set_time_amount( current => {
return event.target.value;
})
};
const hour_input = (event) => {
set_time_amount ( current => {
return event.target.value;
})
};
const reset = () => {
console.log('click reset button');
set_time_amount( current => {
return 0;
})
};
const reverse = () => {
console.log('click reverse button');
reset();
set_flipped ( current => {
return !current;
})
};
return (
<div class = "section_containers">
<div className="h3_title_containers">
<h3 className="h3_titles">Minute & Hour</h3>
</div>
<div className="convert_input">
<div className="first_input">
<label htmlFor="minute">Minute</label>
<input placeholder="minute" id="minute" type="number" value={ !flipped ? time_amount : time_amount * 60 } disabled={flipped} onChange={minute_input}></input>
</div>
<div class="second_input">
<label htmlFor="hour">Hour</label>
<input placeholder="hour" id="hour" type="number" value={ !flipped ? time_amount / 60 : time_amount } disabled={!flipped} onChange={hour_input}></input>
</div>
</div>
<button onClick={reset}>reset</button>
<button onClick={reverse}>reverse</button>
</div>
)
}
state를 변경하는 함수는 data를 바로 변경하지 않고 화살표 함수의 형태로 써주는 게 좋다!
'Web > React' 카테고리의 다른 글
| [React] slide 구현하기 (0) | 2022.09.27 |
|---|---|
| [React] React예제 200 (78~84) - Redux (0) | 2022.06.24 |
| [React] React 예제 200 - 76~77 (0) | 2022.06.24 |
| [React, 프로젝트] 일치하는 목록 추천, 이메일 형식 검사 (0) | 2022.04.29 |
| [React] React 기본 (0) | 2022.04.24 |