CodeHoon

React.js hook를 사용하려고 하던 와중 처음부터 이러한 에러를 대면했다...

Uncaught SyntaxError: Cannot use import statement outside a module

문제점

1. 리액트 훅을 기본적으로 적용하는 법을 몰랐다.

해결방법

1. script 를 html에 적용시키는 과정에서 script의 type을 지정해주어야 한다.

<script type="text/babel" src=" "> </script>

type="text/babel" 혹은

<script type="text/jsx" src="./01.useState.js"></script>

type="text/jsx"로 해결이 가능하다.

스크립트 타입을 변경해주시길 바랍니다.

안녕하세요 상훈입니다.

React로 체크박스를 체크하면 타이머가 돌아가고, 체크박스를 해제하면 타이머가 멈추는 

체크박스를 이용한 스톱워치를 구현하려고합니다.

<div id="root"></div>

    <script type="text/babel">
        class App extends React.Component {
            constructor(props){
                super(props)
                this.state = {
                    seconds : 0
                }
                this.handleChange = this.handleChange.bind(this)

            }

            handleChange (event) {
                if(event.target.checked){
                    this.timerId = setInterval( () => {
                        this.setState({
                            seconds: this.state.seconds+1
                        })
                    }, 1000)
                }else{
                    clearInterval(this.timerId)
                }
            }

            render () {
                return (
                    <div>
                        <input type="checkbox" onChange={this.handleChange}/>   
                        <span>타이머활성화</span>
                        <h1>Timer : {this.state.seconds}</h1> 
                    </div>
                )
                
            }
            
            
        }
    
        const container = document.querySelector("#root")
        ReactDOM.render(<App />, container)
    
    </script>

이전까지는 1가지의 기능만 구현을 했었는데,

이번건 2가지의 기능(체크박스 -> 이벤트 -> setInterval())를 사용하였기 때문에 헷갈릴 수 있다.

안녕하세요 상훈입니다.

React로 체크박스 클릭시, text부분의 색을 변경하고 줄을 긋는 기능을 구현하려고합니다.

  <div id="root"></div>

    <script type="text/babel">
        class App extends React.Component {
            constructor (props) {
                super(props)
                this.state = {
                    checked : false
                }
                this.handleClick = this.handleClick.bind(this)
            }
            
            render () {
                const textStyle = {
                    color : this.state.checked ? 'blue' : 'red',
                    textDecoration : this.state.checked ? 'line-through' : 'none'
                }
                return (
                    <div>
                        <input type="checkbox" id="checkboxItem"
                            onClick = {this.handleClick} />    
                        <label for="checkboxItem">선택해주세요</label>
                        <h2 style={textStyle}>Text</h2>
                    </div>
                )
            }

            handleClick (event) {
                this.setState ({
                    checked : event.target.checked
                })
            }
        }

        const container = document.querySelector("#root")
        ReactDOM.render(<App />, container)
    
    </script>

render 함수 내의 상수를 선언해놓고 이를 삼항연산자( x ? y : z) 를 사용하여 해당 기능을 구현하였습니다.

안녕하세요 상훈입니다.

React.js 로 input 태그 내에 값을 입력하면 내용을 곧바로 h1 태그 내에 작성되게 하는 기능을 구현하겠습니다.

 <div id="root"></div>

    <script type="text/babel">
    class App extends React.Component {
        constructor (props){
            super(props)
            this.state = {
                text: '',
            }
            this.handleChange = this.handleChange.bind(this)
        }

        render () {
            return (
                <div>
                    <input type="text" 
                        value={this.state.text}
                        onChange={this.handleChange} />    
                    <h1>{this.state.text}</h1>
                </div>
            )
        }

        handleChange (event) {
            this.setState({
                text: event.target.value
            })
        }
    }

    const container = document.querySelector("#root")
    ReactDOM.render(<App />, container)

    </script>

지난번과 마찬가지로, 

root라는 id를 가진 div 태그를 생성하였습니다.

text = '' 로 놓고,  값이 변할때마다 handleChange() 함수를 호출하고, 그 값을 h1태그에 보여주는 형식입니다.

수정 21.09.01.10:11

에러해결 - ReactDOM.Component => React.Component

DOM이 아니라 그냥 React만 호출해야했다.

VM42:9 Uncaught TypeError: Super expression must either be null or a function, not undefined

React.js 하던와중 갑자기 이런 에러가 발생

왠지모르겠음.. 

super()를 선언할때 인자로 null 혹은 function이 들어가야하는데 undefined가 들어갔다. 라는 뜻 같은데..

props에 해당하는 부분이 undefined 된건가?

흠.

코드는 대충 클릭이벤트 함수를 생성한것인데, 이렇다. 

<body>
    <div id="root"></div>

    <script type="text/babel">
        class App extends ReactDOM.Component {
            constructor (props) {
                super(props)
                this.state = {
                    count : 0
                }
                this.countUp = this.countUp.bind(this)
            }
            render () {
                return (
                    <div>
                        <h1>클릭한 횟수 : {this.state.count}</h1>
                        <button onClick={this.countUp}>클릭</button>
                    </div>
                    )
            }
    
            countUp (event) {
                this.setState({
                    count: this.state.count + 1
                })
            }
            
        }

        const container = document.querySelector("#root")
        ReactDOM.render(<App />, container)

        
    </script>


</body>

자바스크립트를 이용해서 영어 키보드를 구현하도록 하겠습니다.   (다음 포스팅은 한글 키보드..)

물론 cdn을 이용해서 기본 키보드에서 좀 더 꾸며진 모습을 확인할 수 있습니다.

head태그 내에 넣을 내용

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
</head>

body 태그 내에 작성할 내용

<body>
    <input class="input" placeholder="Tap on the virtual keyboard to start" />
    <div class="simple-keyboard"></div>
  
    <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"></script>
    <script src="src/index.js"></script>

    <script>
        const Keyboard = window.SimpleKeyboard.default;

        const myKeyboard = new Keyboard({
        onChange: input => onChange(input),
        onKeyPress: button => onKeyPress(button)
        });


        function onChange(input) {
        document.querySelector(".input").value = input;
        console.log("Input changed", input);
        }


        function onKeyPress(button) {
        console.log("Button pressed", button);
        }

    </script>
</body>

확인해보니 최소 px의 가로길이는 500px 로,

모바일 환경에서는 불가능하다는 판단을 내렸고, 태블릿 정도까지는 갈 수 있다고 판단됩니다.