React

컴포넌트생성 & 변수스타일

일단 우리는 3가지의 링크가 필요하다 🕵️‍♀️필수

<script src="./js/react.development.js" defer></script>
<script src="./js/react-dom.development.js" defer></script>
<script src="./js/babel.min.js" defer></script>

HTML

DOM 연동의 개념을 이해하기 위해
HTML에는 root 와 app을 만들어 두었다.

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

Script

우선 JSX문법을 사용하기 위해 script의 type은 text/bable 로 꼭 적어준다. <script type="text/babel">

01. 기본으로 있는 상태관리 (defaultProps)

defaultProps 란?
클래스 컴포넌트의 기능으로 props에 기본값을 세팅할 수 있도록 도와준다.

1번 예제

Section1Component.defaultProps={
	title: 'section1Component',
    name: '가나다',
    tel: '010-9999-8888'
    }

Section1Component의 defaultProps를 만든다.

• title : section1Component,
• name : '가나다',
• tel : '010-9999-8888'

그리고 나서 클래스형 함수에 만들어 준다.

class Section1Component extends React.Component{
            render(){
                return(
                    <div>
                        <section id="section1" style={{width:'100%', height: '100vh', display:'flex'}}>
                            <h2 style={{margin:'auto', fontSize:'70px',color:'#39c'}}>{this.props.title}</h2>
                            <h3 style={{margin:'auto', fontSize:'50px',color:'#39c'}}>{this.props.name}</h3>
                        </section>
                    </div>
                );
            }
        }

section안에 h2와 h3를 보면 {this.props.title} 과 {this.props.name}가 있다.

<h2 style={{margin:'auto', fontSize:'70px',color:'#39c'}}>{this.props.title}</h2>
<h3 style={{margin:'auto', fontSize:'50px',color:'#39c'}}>{this.props.name}</h3>

위에 defaultProps로 만들어둔 title : section1Component 이 나올것이고 name : '가나다'가 나올것이다.

결과
section1Component 가나다

---

2번 예제

🕵️‍♀️ 2번 예제는 defaultProps를 클래스형 컴포넌트 안에서 만들어본다.

👩‍🏫 [tip] : render 안에는 자바스크립트가 사용가능하다.

 class Section2Component extends React.Component {
            static defaultProps={
                title:'Section2 Component',
                name:'다나까',
                kor: 100,
                eng: 99,
                mat: 100
            }
            render() {
                let {title,name,kor,eng,mat}=this.props 
                return ( 
                    <div>
                        <section id="section2" style={sec2Style}>
                            <h2 style={sec2Styleh2}>{title}</h2>
                            <h3 style={sec2Styleh3}>{name}</h3>
                            <h3 style={sec2Styleh3}>{kor}</h3>
                            <h3 style={sec2Styleh3}>{eng}</h3>
                            <h3 style={sec2Styleh3}>{mat}</h3>
                        </section>
                    </div>
                );
            }
        }

👩‍🏫 [tip] : 1번예제와 달리 이번은 this.props를 사용하지 않고 바로 {name} , {title} 등을 쓰고싶을 때
let {title,name,kor,eng,mat}=this.props 변수로 담아서 this.props를 생략하여 사용할 수 있다.

또는 스타일을 입력할 때도 마찬가지이다.

const sec2Styleh3={
            margin:'auto',
            fontSize:'50px',
            color:'#000'
        }

변수안에 스타일들을 담아서 아래 예제와 같이 사용가능

👇👇이렇게

<h3 style={sec2Styleh3}>{name}</h3>

결과
section2Component 다나까 100 99 100

---

02. 리액트 DOM : 리액트의 DOM 컨테이너와 리액트 컴포넌트 연동하기

ReactDOM.render(
            <Section1Component/>,
            document.getElementById('root')
        );
        ReactDOM.render(
            <Section2Component/>,
            document.querySelector('#app')
        )

아까 처음에 설명한 root와 app이 있었다

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

• Section1Component 는 root로
• Section2Component 는 app으로 연동한다.