React #2

가보자고~

---

✅ useState()란?

• useState() 는 배열을 제공한다.([value, modifier] 를 제공)

const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = useState(<상태 초기 값>);

• 상태 값 저장 변수에는 counter, value .. 등 원하는 이름을 붙이고,
  상태 값 갱신 함수(f)에는 set뒤에 데이터 이름을 붙이면된다.
  ex) [counter, setCounter] = useState(0);
• 어떤 값을 부여하던, setCounter 함수는 그 값으로 업데이트하고 리렌더링을 일으킨다.

// ex)
function App() {
	const [conuter, setCounter] = useState(0);
	const onClick = () => {
    	setCounter(counter +1);
    }
	return(
    	<div>
        	<h3>Total Clicks: {counter}</h3>
            <button onClick={onClick}>Click me</button>
        </div>
    );
}

• 순서를 적어보자면
  • counter 라는 데이터를 받음(초기값 0)
  • return() 문에 그 데이터를 담고 있다(리턴은 사용자가 보게될 컴포넌트)
  • counter 의 값을 바꿔줄 버튼이 클릭되면, counter 값을 바꿔줄 setCounter 함수가 호출
  • counter 의 새로운 값을 가지고 setCounter() 가 호출되며 업데이트,리렌더링 발생
  • 새로운 값은 setCounter에 써준 값.

✅ State Functions

• state를 설정하는 방법은 2가지가 있다.
  1. 직접할당
  • modifier를 사용하여 원하는 값을 직접 넣어주거나, 이전 값을 이용해서 현재 값을 계산(setState(state +1))
  2. 함수를 할당
  • 함수의 첫번째 인자는 현재 state이다. 현재 state를 기반으로 계산하고싶다면 함수를 할당하자.
    이 함수의 return 값이 새로운 state가 되는 것(setState((cureent) => cureent +1))
• 현재 state랑 관련이 없는 값을 새로운 state로 하고싶은 경우에는 (1),
  현재 state에 조금의 변화를 주어서 새로운 state를 주고 싶은 경우에는 (2)

✅ state 연습

단위변환 계산기_1

-minutes <-> hours / km <-> mile 각각 변환해주는 계산기를 만들어보자

function App () {
	const [minutes, setMinutes] = useState(0);
    const onChange = (event) => {
    	// input의 입력값을 가져와 업데이트
        setMinutes(event.target.value)
    };
    const reset = () => setMinutes(0);
	return(
    	<div>
          <div>
        	<h1>Supber Converter</h1>
            <label htmlFor="minutes"> Minutes</label>
            <input 
            	value={minutes}
            	className="minutes"
            	placeholder="Minutes"
                type="number"
                onChange={onChange}
            />
          </div>
          <div>
            <label htmlFor="hours"> Hours </label>
            <input 
            	value={Math.round(minutes/60)}
            	className="hours"
            	placeholder="Hours"
                type="number"
                onChange={onChange}
            />
          </div>
          <button onClick={reset}>Reset</button>
    	</div>
    );
}

• 위와 같이 작성하면, minutes 를 hours 로 변환해주는 계산기 완성!
• for,id는 JS 용어로, JSX에서는 JSX문법에 따라 작성해주어야 한다.
  • for => htmlFor
  • id => className
• disabled 기능을 추가하여 hours도 minutes로 변환해주자
  • input 태그의 disabled 속성 : 기본값 false(입력 불가 상태) /true(입력 가능상태)

function App () {
	const [amount, setAmount] = useState(0);
    const [fliped, setFliped] = useState(false);
    // → state값으로 input을 enabled할지 disabled 할지를 결정할 수 있음
    const onChange = (event) => {
    	// input의 입력값을 가져와 업데이트
        setAmount(event.target.value)
    };
    const reset = () => setAmount(0);
    const onFlip = () => setFliped((cureent) => !cureent);
    // →현재 state 값을 넣어주고, 결과는 그 반대를 도출하라 선언
	return(
    	<div>
          <div>
        	<h1>Supber Converter</h1>
            <label htmlFor="minutes"> Minutes</label>
            <input 
            	value={amount}
            	className="minutes"
            	placeholder="Minutes"
                type="number"
                onChange={onChange}
                disabled={flipped}
                  //→ 만약 fliped가 true 라면 disabled 처리
                  // disabled={flipped === true}와 같다
            />
          </div>
          <div>
            <label htmlFor="hours"> Hours </label>
            <input
            	value={Math.round(amount/60)}
            	className="hours"
            	placeholder="Hours"
                type="number"
                disabled={!flipped}
                  //→ 만약 fliped가 fasle라면 disabled 처리
                  // disabled={flipped === false}와 같다
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onFlip}>Flip</button>
    	</div>
    );
}

• 디폴트 값이 false 라고 정했으므로 Hours는 disabled 되어야함
  disabled={!flipped} , Minuets에는 반대로 disabled={flipped}

• Minuets에는 에 값을 적어주었을 때만 hours 의 값이 변환되고,
  hours에 값을 적어주었을 때만 Minuets 값이 변하게 하기위해 '삼항연산자' 사용.

<input
	value={fliped ? amount : Math.round(minutes/60)}
    className="hours"
    placeholder="Hours"
    type="number"
    disabled={!flipped}
	onChange={onChange}
/>

• 만약, fliped 상태라면 단위변환이 아닌 state에 있는 현재값을 보여주고
  만약 fliped 상태가 아니라면 변환된 값을 보여주라 선언
• Minutes input 에도 적용시켜주자.

<input 
    value={fliped ? amount * 60 : amount}
    className="minutes"
    placeholder="Minutes"
    type="number"
	onChange={onChange}
	disabled={flipped}
/>

• hours와 반대로, fliped 상태라면(ture라면) 단위 변환 값을 보여주고,
  fliped 상태가 아니라면 state에 있는 현재값을 보여주라 선언
• 추가로, 이 상태에서 flip을 할때마다 변환된 값들이 서로 바뀌게됨
  따라, onFlip() 함수에 reset(); 함수를 추가

const onFlip = () => {
	reset();
	setFliped((cureent) => !cureent);
}

• 마지막으로, 사용자에게 현재 flip 상태인지 아닌지를 알려주기 위해
  filp 버튼에도 삼항연산자를 사용

<button onClick={onFlip}>{fliped ? "Turn Back" : "flip"}</button>

• 최종 코드

function App() {
	const [amount, setAmount] = useState(0);
    const [fliped, setFliped] = useState(false);
    const onChange = (event) => {
        setAmount(event.target.value)
    };
    const reset = () => setAmount(0);
	const onFlip = () => {
		reset();
		setFliped((cureent) => !cureent);
	};
	return(
    	<div>
          <div>
        	<h1>Supber Converter</h1>
            <label htmlFor="minutes"> Minutes </label>
            <input 
            	value={fliped ? amount * 60 : amount}
            	className="minutes"
            	placeholder="Minutes"
                type="number"
                onChange={onChange}
                disabled={flipped}
            />
          </div>
          <div>
            <label htmlFor="hours"> Hours </label>
            <input
            	value={fliped ? amount : Math.round(minutes/60)}
            	className="hours"
            	placeholder="Hours"
                type="number"
                disabled={!flipped}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onFlip}>{fliped ? "Turn back" : "Invert"}</button>
    	</div>
    );
}

단위변환 계산기_2code challenge

• Km 와 miles 를 변환하는 계산기를 직접 만들어보자 :)

function KmToMiles() {
        const [units, setUints] = React.useState(0);
        const [inverted2, setInverted2] = React.useState(false);
        const onChange2 = (event) => {
            setUints(event.target.value);
        };
        const reset2 = () => setUints("");
        const onFlip2 = () => {
            reset2();
            setInverted2((A) => !A);
        };
        return (
            <div>
                <div>
                    <label htmlFor="Km">Km </label>
                    <input
                        value={inverted2 ? units*1.609344 : units}
                        id="km"
                        placeholder="0"
                        type="number"
                        onChange={onChange2}
                        disabled={inverted2 === true}
                    />
                </div>
                <div>
                    <label htmlFor="miles">Miles </label>
                    <input
                        value={inverted2 ? units : units*0.609344}
                        id="miles"
                        placeholder="0"
                        type="number"
                        onChange={onChange2}
                        disabled={inverted2 === false}
                    />
                </div>
                <button onClick={reset2}>Reset</button>
                <button onClick={onFlip2}>{inverted2 ? "Turn back" : "Invert"}</button>
            </div>
        );
    };
    
 function App() {
        const [index, setIndex] = React.useState("xx");
        const onSelect = (event) => {
            setIndex(event.target.value);
        }
        return(
            <div>
                <h1>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>
                <hr/>
                {index === "xx" ? "Please select your units" : null}
                {index === "0" ? <MinutesToHours /> : null}
                {index === "1" ? <KmToMiles /> : null}
            </div>
        );
 };
    

• 최종!!!!!!
  • 메인(select 와 option 사용해 2개의 메뉴로 분리)
    
    
  • minutes <-> hours 시간변환기
    
    
  • Km <-> miles 거리 변환기