6.28 리액트 시작

(1교시)

오늘부터 리액트를 한다고합니다. 리액트는 누가만들었나> 페이스북이 만들었대요.

리액트 공식문서를 보면서 공부한다고합니다. (다른 강좌들도 비슷하다고 함). 공식문서는 구글에 그냥

리액트라고 치면됨.

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

처음 배울때 cdn 링크를 이용하는게 이해력을 높히는데 도움이 됨.

 

<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>

위 링크를 자주 사용할것이므로 잘 가지고있을것!

 

바벨을 사용할 땐 

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

이 링크도 추가!

 

이제 html 페이지를 하나 생성해줍니다.

->헤드 부분에 위 두 링크를 넣어줍니다.

 

이제 div 세팅 

<div id="root"></div>
    <script type="text/javascript">

    </script>

 

 

이제 컴포넌트를 만든다고 합니다 (class를 이용해서.. function을 이용하는 방법도 있다고 함)

@@@@컴포넌트가 뭔가요???

    class LoginBtn extends React.Component{
        constructor(props){
            super(props)
        }
        render(){
            return(

            );
        }
    
    //컴포던트 생성 기본 구조

세팅 값과 (render 이전부분까지), 밑에는

컴포넌트가 어떤것을 표현해줄지 그려주는 부분.

그리고 다음에 어떻게 화면에 렌더될 것인지 적어줘야 함.

만약에 내가 위에서 만든것처럼 '로그인'이라고 써진 버튼 하나를 만든다고 하면

    class LoginBtn extends React.Component{
        constructor(props){
            super(props)
        }
        render(){
            return(
                React.createElement('button',null,'로그인')
            );
        }
    }    
    ReactDOM.render( 
        React.createElement(LoginBtn),
        // ("button",null,"버튼"), //이 세번째 인자값은 innerHTML이라고 보면됨
        document.querySelector("#root")
    )
    

 

이렇게 하면됨.

 

내가 알림창을 띄우고싶다고 하면 component 안에 return 값에 

   React.createElement('button',{onClick:()=>{alert('로그인버튼입니다.')}},'로그인')

(! 주의 ! 이벤트를 발생시킬때 반드시 카멜형식으로 써야함. 첫번째 단어는 소문자/ 두번째단어를 대문자로 ex. onClick)

 

같은 화면을 setState를 이용해서 적어보면

React.createElement('button',
{onClick:()=>{ this.setState({isLogin:!this.state.isLogin}) }},
this.state.isLogin ? '로그아웃':'로그인')

 

(2교시)

JSX

createElement가 아니라 그냥 html 태그를 가지고만 엘리먼트를 생성해줄 수 있다고 함.

 

일반 텍스트를 자바스크립트로 표현하고 싶을때 대괄호를 붙여주는게 중요하다고 합니다. {}

 

예를 들면

        render(){
            return(
                //JSX형태
                <button onClick={()=>{ this.setState({isLogin:!this.state.isLogin}) }}>
                    {this.state.isLogin ? '로그아웃':'로그인'}
                </button>

저기 this.state.isLogin ? '로그아웃':'로그인'

이거 대괄호에 써준 이유!

 

jsx 사용하기 위해서는 바벨이라고 하는 패키지가 필요하다고 함.

밑 링크 헤드에 써주고, script 태그의 type 을 text/babel로 바꿔줘야 합니다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

 

 

이제 DOM 과 '상태' 에 대해서 알아본다고 함니다.

 

1초에 시간이 1씩 증가하는 코드를 만들어 본대요.

<div id="root"></div>
    <script type="text/javascript">
    function clock(){
        const div = document.createElement('div');
        const h1 = document.createElement('h1');
        const h2 = document.createElement('h2');

        let txt = 'hello world!'
        let timeTxt = `It is ${new Date().toLocaleTimeString()}`

        h1.innerHTML = txt
        h2.innerHTML = timeTxt

        div.appendChild(h1);
        div.appendChild(h2);

        document.querySelector('#root').innerHTML = div.innerHTML        
    }

    setInterval(clock,1000)

이게 자바스크립트 코드!

 

그다음으로 리액트

 

 

 

상태값 이용

 

 

 

(3교시)

이제 기본적인 문법이랑ㄱ ㅐ념설명만 한대요... DOM이랑 JSX 모르면 어챂 ㅣ진도 더 나가도 소용이 없대요.

5개의 컴포넌트로 구성된 박스!

1. 댓글 쓰는부분 2. 댓글 BOX 부분 3. 댓글 BOX 안의 각각 댓글 list 4. 댓글 눌렀을 때 나오는 input 박스 부분 5. 모두를 아우르는 전체 contain 영역

 

컴포넌트를 여러개 만들어본대요.

1. jsx 이용

       ReactDOM.render(
           <App />,
           document.querySelector('#root')
       ) 

까먹을 수 있으니까 DOM 먼저 써주고

    class World extends React.Component{
            render(){
                return(
                    <div>
                        World
                    </div>
                )
            }
        }

    class App extends React.Component{
        render(){
            return(
                <>
                    <Hello/> <World />
                </>
            )
        }
    }
    
    //위에 Hello 컴포넌트 있는데 못봄

위에 이렇게 적어주면

HTML 화면에 Hello World 가 나옴.

 

 

//실습시간!

이 화면을 만들어본다고 합니다! (기능구현 X)

 

 

@@@ 리액트 공식문서의 "자습서" 를 이용해서 학습하기! @@@

https://ko.reactjs.org/tutorial/tutorial.html

자습서: React 시작하기 – React

 

tictactoc 게임이라는 것을 만드는 코드가 있는데

교수님도 그냥 아무생각없이 100번은 따라쓴것 같다고합니다. (교수님은 승자결정하기 전까지 치셨다고..)

 

(4교시)

이어서 실습.... 

컴포넌트 나눠서 나름 적었는데 실행이 안됨. 

콘솔창에 

Uncaught SyntaxError: /Inline Babel script: Legacy octal literals are not allowed in strict mode. (10:63)

라고 에러가 뜨는데.. 이게 먼말이지..

 

지금 오류 해결함! (교수님의 헤업)

이거는 내가 innerHTML로 들어갈 부분에 까지 자바 스크립트처럼 대괄호를 씌워서 난 오류였움.

그래서 각 텍스트에서 대괄호를 빼주고

이걸 해결하니 

Target container is not a DOM element.     at Object.render

라고 하는 오류가 떴는데,

이 오류는 내가 html 에다가 <div id="root"></div> 까지 다 주석처리를 해버려서 생긴 오류였음.

render 할 "#root" 가 없는데 어떻게 보여주겠니...

그래서 이걸 또 주석에서 빼서 만들어주니 오류가 모두ㅠ 해결되었음~~~~그래서 브라우저에는 요렇게 나옴

 

 

 

(정답공개~)

컴포넌트를 나눈다 -> 중복된 요소를 제거한다! 로 이해할 수 있음

 

나는 아예 comment 부분이랑 form 부분으로만 나눠서

교수님은 이런 식으로 나누심