React 강의 1주차

리액트는

언어가 아니라 프레임 워크이기 때문에 사용하는 방법을 배우는 것!
리액트는 javascript 이지만 문법이 다르다!

리액트를 사용하는 이유

유지보수를 쉽게 하기 위해
데이터 처리를 쉽게
가독성 업업
화면 딜레이 없이 자연스럽게 넘어간다
앱과 비슷한 느낌 구현

첫 리액트 컴포넌트

<html>
    <head>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script>
            const e = React.createElement;
            class LikeButton extends React.Component{
                constructor(props) {
                    super(props);
                    this.state = {
                        liked: false,
                    };
                }
                render() {
                    return e('button', 
                    { onClick: () => { this.setState({ liked: true})}, type: 'submit'},
                    this.state.liked === true ? 'Liked':'Like',
                    ); 
                }
            }
        </script>
        <script>
            ReactDOM.render(e(LikeButton), document.querySelector('#root'));
        </script>
    </body>
</html>
``
우여곡절이 많았던 첫 코드라 기록해보기...

스크립트에 적었던 react와 react-dom은 코드 쓰기 전에 바로 설치하기
react-dom 이 웹에 렌더링을 해주는 역할
State 는 바뀌거나 바뀔 수 있는 부분!
(위 코드에서 like 를 누른 여부가 상태)
class 하나가 컴포넌트 한 개

.
.
.

JSX와 Babel

babel 를 쓰는 이유

원래 javascript 안에서 html 문법을 쓰는 게 불가능하기 때문에 babel 스크립트를 추가해줘야함

JSX

: js + xml
xml은 엄격하기 때문에 틀리지 않게 주의
~~( 근데 xml 이 뭐지? )~~

Babel를 이용한 코드

<html>
    <head>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
            class LikeButton extends React.Component{
                constructor(props) {
                    super(props);
                    this.state = {
                        liked: false,
                    };
                }
                render() {
                    return <button type="submit" onClick={() => { this.setState({ liked: true })}}>
                        { this.state.liked === true ? 'Liked' : 'Like' }
                        </button>;
                }
            }
        </script>
        <script type="text/babel">
            ReactDOM.render(<div>
                <LikeButton />
                <LikeButton />
                <LikeButton />
                <LikeButton />
                </div>, document.querySelector('#root'));
        </script>
    </body>
</html>

여기서 구분할 것

대문자 = react Component (ex: LikeButton)
소문자 = html 태그 (ex:div)

구구단게임 코드

<html>
    <head>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
            class GuGuDan extends React.Component {
                constructor(props) {
                    super(props);
                    this.state = {
                        first: Math.ceil(Math.random() * 9),
                        second: Math.ceil(Math.random() * 9),
                        value: '', 
                        result: '',
                    };
                }
                onSubmit = (e) => {
                                e.preventDefault();
                                if (parseInt(this.state.value) === this.state.first * this.state.second) {
                                    this.setState({
                                        result: '정답',
                                        first: Math.ceil(Math.random() * 9),
                                        second: Math.ceil(Math.random() * 9),
                                        value: ' ',
                                    });
                                } else {
                                    this.setState({
                                        result: '땡',
                                        value: ' ',
                                    });
                                }
                            };
                            onChange = (e) => this.setState({ value: e.target.value});
                render( ) {
                    return (
                        <div>
                            <div> {this.state.first} 곱하기 {this.state.second}는? </div>
                            <form onSubmit={this.onSubmit}>
                                <input type="number" value={this.state.value} onChange={this.onChange} />
                                <button> 입력! </button>
                            </form>
                            <div>{this.state.result}</div>
                        </div> 
                    );
                }
            }
        </script>
        <script type="text/babel">
            ReactDOM.render(<div> <GuGuDan /><GuGuDan /><GuGuDan /> </div>, document.querySelector('#root'));
        </script>
    </body>
</html>

리액트 1-1 강에서 컴포넌트를 여러 개 둘 수 있다는 말이 이런 거구나 실감하게 해준 코드. 중복을 줄이는 방법!

태그 사이 컨텐츠에 중괄호 두 개

= 자바스크립트를 쓸 수 있다

여기서 구분 할 것

html 속성은 그냥 중괄호
자바스크립터는 중괄호 안에 this.state.aaa

리액트의 단점

컴포넌트를 꼭 div 로 감싸줬어야 했었지만
-> 개선 됨

<div> ... </div> 를 <> </> 로

이때 에러가 나면

<React.Fragment> </React.Fragment> 로 바꿔주면 됨

여기서 에러가 나는 이유는 Babel2를 설치하지 않았기 때문

그룹연산자

쓸데없이 그룹으로 묶어주는 괄호들
연산에서 우선순위를 매길 때가 아니면 의미가 없음
Just 보기 좋게 하기 위해서 두는 것이기 때문에 지워도 작동에 문제 x

focus 주는 법

콘솔에 document.querySelector('input').focus()
ref
.
.
.
.
.
.
.
.
.

강의 1주차 후기

복잡한 코드들을 리액트를 사용함으로써 간단하게 표현할 수 있다는 점이 좋았다. 그렇지만 아직 html 이나 javascript 를 찍먹 수준으로만 해본 나에게 대뜸 도전하기에는 이해가 덜 되는 부분이 많았던 강의라 아쉬웠다. 처음에 강의를 틀었을 때 이러한 부분 때문에 이해가 전혀 안 갔었는데 듣다보니 원리도 알 거 같고 차츰 무언가 늘어가고 있는 거 같아서 정말 다행이라고 생각했다. 리액트에 기반이 되는 다른 것들을 배경지식으로 쌓고 왔으면 이해 할 수 있는 부분이 늘어날 거 같아 앞으로는 다른 강의들도 틈틈히 들으며 병행해야겠다. 초짜 파이팅 ㅋㅋ

Author And Source

이 문제에 관하여(React 강의 1주차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mu99ou/React-강의-1주차

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