본문 바로가기
블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기

[83일차]20210708 React 기본 개념 복습

알로호모라 2021. 7. 8. 15:20
반응형

React (webpack 없이!) 복습 시간 ! 

 

 

 

1. 기본 React 코드 준비 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>REACT TIME</title>
    <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>
    
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        class App extends React.Component{
            render(){
                return(
                    <>
                        Hello world !
                    </>
                )
            }
        }
        
        ReactDOM.render(
            <App/>,
            document.querySelector('#roor')
        )
    </script>
</body>

</html>

 

 

 

2. loginBox Component 를 App 에 달기 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>REACT TIME</title>
    <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>
    
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        class App extends React.Component{
            render(){
                return(
                    <>
                        <LoginBox/>
                        APPPPPS 
                    </>
                )
            }
        }

        class LoginBox extends React.Component{
            render(){
                return(
                    <>
                        Loginbox
                    </>
                )
            }
        }
        
        ReactDOM.render(
            <App/>,
            document.querySelector('#roor')
        )
    </script>
</body>

</html>

<> </> --> JSX 원래 태생은 JS 이다. 

                        <LoginBox/>
                        {React.createElement(LoginBox)}

위의 두 코드는 같은 의미 ! LoginBox 를 사용하겠다 ~ 

 

{ } 괄호를 쓰는 이유 : jsx에서 js문법을 사용하겠다. 

nunjucjs를 사용하겠다 라고 한 코드는 위에 return() 

<> </> 이걸 쓰게되면 React.createElement... 는 TEXT 일 뿐 

JS로 실행시키고 싶으면 { }로 감싸주기 

nunjucks 안에 JS 문법을 사용하고싶으면 = 괄호 {  } 를 쓴다. 

 

 

3. App <- LoginBox <-Login 이렇게 Components 만들기 

Login에 button 추가 

 

위의 헷갈리는 함수 흐름도 이해해보기 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>REACT TIME</title>
    <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>
    
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        class App extends React.Component{
            render(){
                return(
                    <>
                        <LoginBox onClick="Login"/>
                    </>
                )
            }
        }

        class LoginBox extends React.Component{
            render(){
                return(
                    <>
                        <Login onClick={this.props.onClick}/>
                    </>
                )
            }
        }

        class Login extends React.Component{
            onClickHandle=()=>{
                alert(this.props.onClick)
            }
            render(){
                return(
                    <>
                        내가 Login 입니다.
                        <button onClick={this.onClickHandle}>{this.props.onClick}</button>
                    </>
                )
            }
        }
        
        ReactDOM.render(
            <App/>,
            document.querySelector('#root')
        )
    </script>
</body>

</html>

위의 코드를 알아보기 쉽게 변수명 v로 만들기 

        class App extends React.Component{
            render(){
                return(
                    <>
                    {/* 아래 'Login' 은 text이다  */}
                        <LoginBox v="Login"/>
                    </>
                )
            }
        }

        class LoginBox extends React.Component{
            render(){
                return(
                    <>
                        <Login v={this.props.v}/>
                    </>
                )
            }
        }

        class Login extends React.Component{
            onClickHandle=()=>{
                alert(this.props.v)
            }
            render(){
                return(
                    <>
                        내가 Login 입니다.
                        <button onClick={this.onClickHandle}>{this.props.v}</button>
                    </>
                )
            }
        }

JS vs JSX 영역 나누기 -> 주석처리의 모양을 보면 나온다 !! 

        class Login extends React.Component{
            // JS 영역 
            onClickHandle=()=>{
                alert(this.props.v)
            }
            render(){
                return( 
                    <> 
                        {/* 여기부터 JSX */}
                        <button 
                            onClick={this.onClickHandle}>
                                {this.props.v}
                        </button>
                    </>
                )
            }
        }

 

 

3. React 함수  복습 / 정리

함수명  only -> 함수 그 자체 f(){} 

함수명 + () -> 함수 실행 (return값 없으면 안의 함수 명령들은 다 실행이 되고 return undefined ) 

 

JSX에서 첫 글자가 대문자면 Class Component라고 인지

 

1.  

        class Login extends React.Component{
            // JS 영역 
            onClickHandle=()=>{
                alert(this.props.v)
            }
            render(){
                return( 
                    <> 
                        {/* 여기부터 JSX */}
                        <button 
                            onClick={this.onClickHandle}>   // 요 부분 
                                {this.props.v}
                        </button>
                    </>
                )
            }
        }

onClickHandle() 이렇게 쓰게되면 onClick을 하지 않아도 함수가 실행되어 바로 alert가 뜬다. 

() 이 없으면 onClick이라는 변수에 "함수 자체" 를 보내줌 

 

2. 

                        {/* 여기부터 JSX */}
                        <button 
                            onClick={()=>this.onClickHandle()}>
                                {this.props.v}
                        </button>
                    </>

() => Fn()  이 구문도 실행된다.

함수 안에 함수가 있는 형태 / 담은 상태 --> 실행시키는게 아니고 onClick이 되어야 ()=>{} 요 안에 있는 함수가 실행이됨

언제 사용하는지 ? -- > 함수에 인자값을 담고 싶을 때 

 

        class Login extends React.Component{
            // JS 영역 
            onClickHandle=(data)=>{
                console.log(data)
                alert(this.props.v)

            }
            render(){
                return( 
                    <> 
                        {/* 여기부터 JSX */}
                        <button 
                            onClick={this.onClickHandle('hi!')}>
                                {this.props.v}
                        </button>
                    </>

이 경우 바로 함수가 실행되어 인자값 'hi'를 console.log() + alert(v) 한다

위의 내용을 잘 분석해보면 잘 이해가 감 !!! 

 

 

 

 

 

 

< 어제 과제 리뷰 >

 

// 컴포넌트 파일에 모든 컴포넌트 넣었으면 더 좋음 

// 공통적으로 쓰는 모든 곳에 쓸거같은건 component 폴더 안에 넣기 

// ex)Top, SidebarCompo (재활용 가능한) 같은 경우Banana 페이지에 넣을 필요가 없었다. 

// 폴더구조 수정

children 활용 해보기 

다른 사람이 보기에 코드 / 파일 / 폴더 명 관리를 잘 하기 

 

 

저 초록색깔 부분을 하나의 컴포넌트로 하게 되면 다른 page 메뉴 갈 때 편하다 

그리고 content 안에서 input  두 개를 또 두 개의 컴포넌츠로 하면 더 좋다고 하심 ! 

 

 

오늘은 간단한 복습들과 Tictactoe 게임으로 3명씩 팀을 이뤄서 서로 오류를 수정해보기!

 

 

내일 공부할 것

반응형

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

[85일차]20210712 React hooks API useMemo useCallback  (0) 2021.07.12
[84일차]20210708  (0) 2021.07.12
[81일차 복습] css 반응형 햄버거 (삼선) 메뉴 만들기 / 리액트 라우터 react-router-dom  (1) 2021.07.07
[81일차]20210707 웹팩, 리액트 header 반응형, router 라우터, 경일 홈페이지 상담게시판 page 구현  (0) 2021.07.07
[80일차 복습] React 리액트, 웹팩, CSS 연결, 반응형 / Header 만들기  (0) 2021.07.06

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' Related Articles

티스토리툴바