단숨에 React.js 이해하기 :: create-react-app 없이

index.html 파일 하나로 끝내보죠.
react.js와 react-dom.js만 있으면 돼요.

<head>에 이걸 넣어요.

<!-- head -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

ReactDOM으로 리액트의 루트를 원하는 위치에 끼워넣는다고 생각하면 돼요.

<!-- body -->
<div id="content"></div>
<script>
    ReactDOM.render(
        React.createElement('h1', null, 'Hello World'),
        document.getElementById('content')
    );
</script>

이번엔 클래스 컴포넌트를 만들어 봐요.

<!-- body -->
<div id="content"></div>
<script>
    class HelloWorld extends React.Component {
        render() {
            return React.createElement('h1', null, 'Hello World');
        }
    }

    ReactDOM.render(
        React.createElement(HelloWorld, null),
        document.getElementById('content')
    );
</script>

이번엔 함수 컴포넌트를 만들어 봐요.

<!-- body -->
<div id="content"></div>
<script>
    function helloWorld(props) {
        return React.createElement('h1', null, 'Hello World');
    }

    ReactDOM.render(
        React.createElement(helloWorld, null),
        document.getElementById('content')
    );
</script>

클래스 컴포넌트의 props에 값을 넘겨봐요.
컴포넌트를 재사용할 수 있어요.

<!-- body -->
<div id="content"></div>
<script>
    class HelloWorld extends React.Component {
        render() {
            return React.createElement('h1', null, this.props.title);
        }
    }

    ReactDOM.render(
        React.createElement(
            'div',
            null,
            React.createElement(HelloWorld, { title: 'Hello World' }),
            React.createElement(HelloWorld, { title: 'Hello Banjubu' }),
            React.createElement(HelloWorld, { title: 'Hello Juelria' })
        ),
        document.getElementById('content')
    );
</script>

함수 컴포넌트의 props에도 값을 넘겨요.

<!-- body -->
<div id="content"></div>
<script>
    function helloWorld(props) {
        return React.createElement('h1', null, props.title);
    }

    ReactDOM.render(
        React.createElement(
            'div',
            null,
            React.createElement(helloWorld, { title: 'Hello World' }),
            React.createElement(helloWorld, { title: 'Hello Banjubu' }),
            React.createElement(helloWorld, { title: 'Hello Juelria' })
        ),
        document.getElementById('content')
    );
</script>

클래스 컴포넌트는 생성주기에 따라 자동으로 호출되는 메소드가 있어요.

<!-- body -->
<div id="content"></div>
<script>
    class HelloWorld extends React.Component {
        constructor() {
            super();
            console.log('constructor');
        }

        componentDidMount() {
            console.log('componentDidMount');
        }

        componentWillUnmount() {
            console.log('componentWillUnmount');
        }

        render() {
            return React.createElement('h1', null, this.props.title);
        }
    }

    ReactDOM.render(
        React.createElement(HelloWorld, { title: 'Hello World' }),
        document.getElementById('content')
    );
</script>

태그를 생성할 때 속성값을 넣을 수 있어요.
<a> 태그로 해보죠.

<!-- body -->
<div id="content"></div>
<script>
    class HelloWorld extends React.Component {
        render() {
            return React.createElement(
                'a',
                { href: 'https://banjubu.tistory.com' },
                'Go to the Banjubu.com'
            );
        }
    }

    ReactDOM.render(
        React.createElement(HelloWorld, { title: 'Hello World' }),
        document.getElementById('content')
    );
</script>

한 번 보여주고 끝나는 페이지는 재미없죠?
클래스 컴포넌트에는 state라는 속성과 setState라는 메소드가 있어서 값이 변할 때마다 render가 다시 호출되요.
화면을 다시 그린다는 의미에요.

<!-- body -->
<div id="content"></div>
<script>
    class HelloWorld extends React.Component {
        constructor() {
            super();
            this.state = { txt: '' };
        }

        render() {
            return React.createElement(
                'div',
                null,
                React.createElement('label', null, this.state.txt),
                React.createElement('input', {
                    value: this.state.txt,
                    onChange: (event) =>
                        this.setState({ txt: event.target.value }),
                })
            );
        }
    }

    ReactDOM.render(
        React.createElement(HelloWorld, null),
        document.getElementById('content')
    );
</script>

함수 컴포넌트는 useState 훅(hooks)을 이용해요.

<!-- body -->
<div id="content"></div>
<script>
    function helloWorld() {
        const [txt, setTxt] = React.useState('');

        return React.createElement(
            'div',
            null,
            React.createElement('label', null, txt),
            React.createElement('input', {
                value: txt,
                onChange: (event) => setTxt(event.target.value),
            })
        );
    }

    ReactDOM.render(
        React.createElement(helloWorld, null),
        document.getElementById('content')
    );
</script>

기본적인건 다 배웠네요.
이제 create-react-app을 이용해서 JSX, styled-components, 애니메이션, 라우팅, 리덕스 정도 더 배우고 실무에 들어가서 필요에 따라 하나씩 학습하면 돼요.

Author And Source

이 문제에 관하여(단숨에 React.js 이해하기 :: create-react-app 없이), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@banjubu/단숨에-React.js-이해하기-create-react-app-없이

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

단숨에 React.js 이해하기 :: create-react-app 없이

Author And Source

좋은 웹페이지 즐겨찾기