React 기본 사용

일단 react 를 사용하기 위해서

 

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

 

이 두가지 스크립트를 사용해준다.

 

 

기본 html세팅을 아래와 같이 잡아준다.

 

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

 

이제 javascript 안에 react를 render하는 제일 기본 함수를 사용해보자.

 

ReactDOM.render()

 

여기서 ReactDOM의 인자값을 두개

 

1. 넣을 내용

2. 넣을 위치이다.

 

 

두 인자값을 사용하는 기본 예시를 들어보자.

 

ReactDOM.render(
	React.createElement('button',null,'버튼'),
        document.querySelector('#root')
 )

 

여기서 첫번째 인자값인 createElement는 html 코드로 보자면 <button>버튼</button>과 같은 내용이다.

그리고 두번째 인자값으로 넣을 위치를 정해준다.

 

 

하지만 여기서 첫번째 인자값으로 createElement를 계속 사용한다면 데이터 양이 많아지면서 조잡해보이고 가독성도 떨어진다. 

 

이때 가독성을 높이려면 createElement를 할 수 있는 class를 만들어준다.

 

 

REACT CLASS

 

리액트에서 class 생성의 기본 세팅은

 

        class App extends React.Component {
            render() {
                return;
            }
        }

 

이렇게 된다. 여기서 class 안에 변수처럼 state를 설정할 수 있는데 정석으로 설정하려면

 

        class App extends React.Component {
            constructor(props) {
                super(props)

                this.state = {}
            }
            render() {
                return ;
            }
        }

 

이렇게 설정해준다. this.state 객체 안에 각 변수들의 값을 설정해 줄 수 있다.

 

return을 할때는 코드 자체를 return할 수도 있지만 괄호를 열어서 여러가지 값들을 넣을 수 있다.

 

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

                this.state = {
                    isLogin:false,
                }
            }
            render() {
                return (
                   {this.state.isLogin}
                );
            }
        }

 

이런경우 화면에 false가 표출된다

 

 

class에서 return을 할때는 html에서 사용하는 태그를 넣을 수가 있는데 이때 모든 태그가 닫혀있어야하고 태그가 두개 이상일때는 하나의 태그 안에 감싸져 있어야 한다.

 

예를 들어 input type="text" 라는 태그를 작성할때 <input type="text">이렇게 쓰면 오류가 발생한다. 그래서 <input type="text"/>이렇게 태그를 닫아줘야 오류가 나지 않는다.