사이트 : 노마드코더
강의 : ReactJS로 영화 웹 서비스 만들기
시각 : 2022.04.18
◆ 완료한 강의 :
- #3 [2021 UPDATE] STATE: #3.0 Understanding State ~ #3.9 Final Practice and Recap
1. State활용
const [] = React.useState()
사용하면 Array 한개가 생김.
[ 담을 데이터용 변수, 담을 데이터를 처리할 함수용 변수] 이렇게.
두번째 항에 '함수'는 무슨 값을 넣던 업데이트 해준 후 리렌더링 시켜줌
버튼을 '클릭'하면 카운트를 하기
return 문을 사용할 때는 최상위 태그 아무거나 하나가 필요함
(보통 div 태그를 이용한다.)
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
// JSX는 감싸는 부모태그가 있어야 되서 의례적으로 하나 만듬
</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"> // 번역하여 HTML로 전달해주는 BABEL
const root = document.getElementById("root");
function App() {
const [counter, setCounter] = React.useState(0);
// counter는 data가 저장될 변수
// setCounter는 count를 계산하기 위한 modifier 함수
const onClick = () => {
//setCounter(counter + 1);
// 다른 곳에서 counter를 업데이트 해버릴 수 있어 좋은 방법이 아님
// 아래 방법이 실수할 일 없이 안전함
setCounter((current) => current + 1);
//current는 '현재의 값'을 뜻함.
};
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click Me</button>
</div>
);
}
ReactDOM.render(<App />, root);
// reactDOM에 렌더링. root(div)에 함수 App을 집어넣음
// render -> 사용자에게 보여준다.
// JSX는 변수를 전부 '대문자'로 시작해야 함.
// 안그러면 일반 태그 같은걸로 인식함
</script>
</html>
2-1. Mins<-> Hours 단위 변환기 연습
- Minutes를 자유롭게 입력 (입력 활성화)
-> 나누기 60해서 Hours로 보여줌(입력 비활성화)
- Hours를 자유롭게 입력 (입력 활성화)
-> 곱하기 60해서 Mins로 보여줌 (입력 비활성화)
function App() {
const [amount, setAmounts] = React.useState();
const [inverted, setinverted] = React.useState(false);
// inverted의 기본 값은 'false'
const onChange = (event) => {
setAmounts(event.target.value);
// console.log(event)해서 target에서 value를 확인했음
};
const reset = () => setAmounts(0);
const onFlip = () => {
reset();
setinverted((current) => !current);
}; //리셋 + disabled 값을 바꿈
return (
<div>
<h1 className="hi">Super Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={inverted ? amount * 60 : amount}
// if inverted가 true 상태면 disabled 됨.
// 그러니 아래에 시간단위로 입력 감지된 값 x 60 해줌.
// inverted가 false면 활성화됨. 그땐 원래처럼
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
//onChange는 '변화가 감지되면'
disabled={inverted}
//disabled={inverted === true}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={inverted ? amount : Math.round(amount / 60)}
// 삼항 연산자 if else와 같은 형태.
// if inverted가 true 상태면 활성화됨. 그땐 amount로 출력
// if inverted가 false면 비활성화됨. 그땐 Math...로 출력
id="hours"
placeholder="Hours"
type="number"
onChange={onChange}
disabled={!inverted}
//disabled={inverted === false}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{inverted ? "Turn back" : "Invert"}</button>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
2-2. KM<-> Mile 단위 변환기 연습
새로운 component, 함수 한개를 더 생성함.
위와 같으나, 'input'들의 value 값 계산 방식을 바꿔 줘야함.
1 mile = 약 1.61km
1 km = 약 0.6 mile
KM [활성화시] : 자유입력 / Mile [비활성화시] : km 입력 값 / 1.61
Mile [활성화시] : 자유입력 / Km [비활성화시] : mile 입력 값 * 1.61
return (
<div>
<div>
<label htmlFor="km">Km</label>
<input
value={inverted ? (number * 1.61).toFixed(1) : number}
id="km"
placeholder="Km"
type="number"
onChange={onChange}
disabled={inverted === true}
/>
</div>
<div>
<label htmlFor="miles">Miles</label>
<input
value={!inverted ? (number / 1.61).toFixed(1) : number}
id="miles"
placeholder="Miles"
type="number"
onChange={onChange}
disabled={inverted === false}
/>
</div>
3. 다수 Component 연결하기
'select'는 HTML 함수. 클릭했을 때 선택지 목록을 만들어줌.
선택지는 'option'이라는 아들 태그로 여러개 만들면 됨.
const [index, setIndex] = React.useState("xx");
// data index의 기본 값을 'xx'로 준 모습.
const onSelect = (event) => {
setIndex(event.target.value);
// data index는 select 태그의 자식 태그들 선택지 값에 따라 변화
};
return (
<div>
<h1 className="hi">Super Converter</h1>
<select value={index} onChange={onSelect}>
<option value="xx">Select your units</option>
<option value="0">Minutes & Hours</option>
<option value="1">Km & Miles</option>
</select>
{index === "xx" ? "Please select your units" : null}
// data index 값이 xx(기본값)이면 문구열 생성, 아니면 null.
{index === "0" ? <MinutesToHours /> : null}
// data index 값이 '0'이면, 'MinutesToHours'를 렌더링, 아니면 null
{index === "1" ? <KmToMiles /> : null}
// data index 값이 '1'이면, 'KmToMiles'를 렌더링. 아니면 null
</div>
);
Come As You Are