[노마드/ReactJS 영화 웹 만들기] - Ch03 | 5. Inputs and State

ReactJS

배포용과 개발용 모드

react, reactdom을 import 하는 script tag에서 production -> development로 변경하는데 production은 배포 모드, development는 개발 모드를 의미한다.

개발모드는 버그로 이어질 수 있는 요소들을 미리 경고하는 검증 코드가 포함되어 있다.

<!--배포모드-->
<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--개발모드-->
<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.development.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.min.js"></script>

JSX에서의 HTML 태그

1. input 옆의 쓰는 label의 for 속성은 react에서는 htmlFor로 표시한다.
2. controlled component :Input 태그 나오면 value, onChange 속성을 붙여서 상태를 관리하자

즉, JSX는 class / for과 같이 JavaScript에서 선점된 문법 용어를 사용 못한다. class는 className으로 for은 htmlFor로 바꿔 쓴다

 

JSX안에서 주석 다는 방법

{/* 주석내용 */}

 

태그의 꺽쇠 안에서는 자바스크립트처럼 // 로 주석가능

Event.targe

onChage 함수에 even를 인자값으로 전달하면 다양한 값을 확인해 볼 수 있는데, input의 value가 변화하는 것을 확인하려면 events.target.value를 사용하면 된다.

const onChange = (event) => {
    setMinutes(event.target.value); //InputEvent의 target.value = event.target.value
};

<script type="text/babel">
    const root = document.getElementById('root');
    function App() {
        const [minutes, setMinutes] = React.useState();
        const onChange = (event) => {
            setMinutes(event.target.value); //InputEvent의 target.value = event.target.value
        };
        return (
            <div>
                <h1>계산기</h1>
                <lable htmlFor="minutes">분</lable>
                <input
                    value={minutes}
                    id="minutes"
                    placeholder="분"
                    type="number"
                    onChange={onChange}
                />
                <h4>You wanna covert : {minutes} minutes</h4>
                <lable htmlFor="hours">시간</lable>
                <input id="hours" placeholder="시간" type="number" />
            </div>
        );
    }

    ReactDOM.render(<App />, root);
</script>

 

깃허브 자료

GitHub - Seogun95/Movie-web-servic-ReactJS: ReactJS로 영화 웹 서비스 만들기 노마드 코더 클론 코딩