[React] 영화 웹서비스 - 노마크코더

JeongInHuh·2023년 12월 27일

React

목록 보기

1/6

Count하기

React Ver.

JS Ver.

Minutes(분)-Hours(시) 변환하기

<!DOCTYPE html>
<html>

<head>
    <title>React App</title>
</head>

<body>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js" type="text/javascript"></script>

    <div id="root"></div>
    <script type="text/babel">
        const root = document.getElementById("root");

        function App() {
            const [amount, setAmount] = React.useState(0);
            const [flipped, setFlipped] = React.useState(false);
            const onChange = (event) => {
                setAmount(event.target.value);
            };
            const reset = () => setAmount(0);
            const onFlip = () => {
                reset();
                setFlipped((current) => !current);
            };
            return (
                <div>
                    <h1>Super Converter</h1>
                    <div>
                        <label>Minutes</label>
                        <input value={flipped ? amount * 60 : amount} id="minutes" placeholder="Minutes" type="number" disabled={flipped} onChange={onChange} />
                    </div>
                    <div>
                        <label>Hours</label>
                        <input value={flipped ? amount : Math.round(amount / 60)} id="hours" placeholder="Hours" type="number" disabled={!flipped} onChange={onChange} />
                    </div>
                    <button onClick={reset}>Reset</button>
                    <button onClick={onFlip}>Flip</button>
                </div>
            );
        }
        ReactDOM.render(<App />, root);
    </script>
</body>

</html>

State

Props

우리가 부여하는 특징의 개수는 상관 없다.
-> banana 말고 x 말고 또 계속 생성 가능
"key"="value" 형태와 같음
-> "banana"는 key, "Save Changes"는 value

banana라 이름 붙이든, x로 하든, props의 이름은 우리 맘임

결과

또는, props 를 없애고, 간단히 {banana}로 banana만 가져올 수 있음
props가 오브젝트라 가능한 일!

Props 개수

JeongInHuh

신입개발자. 이젠 서버를 곁들인 velog 꾸미기 : https://velog.io/@ybkim3603/Velog벨로그-사용법-튜토리얼 Git컨벤션: https://velog.io/@shin6403/Git-git-커밋-컨벤션-설정하기 커리어 방향 설정 모음글:https://velog.io/@eon7500/커리어-방향성-설정에-도움되는-글

다음 포스트