[TIL] 03.03 리액트로 단위변환기 만들어보기

리액트로 단위변환기를 만들어 보려고 한다! 먼저 기본 구조를 잡아주려고 다음과 같은 코드를 작성했다.

 

function App() {
        return (
            <div>
                <h1>Super Converter</h1>
                <input placeholder="Minutes" type="number" />
                <input placeholder="Hours" type="number" />
            </div>
        );
    };

 

구조화면

이어서 label 태그를 생성하여 input 태그와 id를 연결시켜준다 여기서 주의할 점은

JSX 에서는 HTML, JS 에서 사용되는 단어가 조금 다르다 예를 들면

아래의 코드처럼 label for은 label htmlFor로 이 외에도 class 네임을 지정할 때는 className 으로 설정해준다.

 

function App() {
        return (
            <div>
                <h1>Super Converter</h1>
                <label htmlFor="minutes">Minutes</label>
                <input id="minutes" placeholder="Minutes" type="number" />
                <label htmlFor="hours">Hours</label>
                <input id="hours" placeholder="Hours" type="number" />
            </div>
        );
    };

 

useState는 array를 제공한다 그리고 그 첫번째 element 가 첫번째 값이 된다. 두번째 element에는 minutes을 수정해주는 modifier함수가 들어간다.

 

  function App() {
        const [minutes, setMinutes] = React.useState();
        const onChange = () => {
            setMinutes(event.target.value);
        }
        return (
            <div>
                <h1>Super Converter</h1>
                <label htmlFor="minutes">Minutes</label>
                <input 
                value={minutes}
                id="minutes" placeholder="Minutes" type="number" 
                onChange={onChange}
                />
                <h4>You want to convert {minutes}</h4>
                <label htmlFor="hours">Hours</label>
                <input id="hours" placeholder="Hours" type="number" />
            </div>
        );
    };

input의 value 를 state로 연결했다. 이렇게 하면 어디서든 input의 value를 수정해줄 수 있다.

다음으로는 onChange라는 함수를 만들어주고 데이터를 업데이트 해준다.

 

 

ref.https://nomadcoders.co/

노마드 코더 Nomad Coders