React Basic - 1. 기본적인 컴포넌트

Bloooooooooooooog..·2023년 6월 4일
0

리액트 사용

가장 원시적인 형태의 리액트 사용부터 공부하기로 한다.

<!-- 개발자 모드 -->
<script crossorigin src="http://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="http://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 배포 모드 -->
<!--<script crossorigin src="http://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="http://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> -->

실무에서는 개발용 모드가 아닌 배포용 모드로 사용할 것이지만, 실제로는 웹팩, 바이트, 바벨 등의 처리를 하기 때문에 script를 쓸 일은 없다.

사용 방식

리액트를 사용하는 방식은 두 가지 방식이 있다.

  1. 클래스 방식 - 거의 사용하지 않는다.
  2. function 사용 방식

실제로는 클래스 방식은 거의 사용하지 않는다. Error Boundary 정도에서만 사용한다.

<script>
    'use strict';

    class LikeButton extends React.Component{

    } // 1% ErrorBoundary
    const LikeButton = () =>{};
    function LikeButton(){}

</script>
  • 리액트는 JS 기반으로 화면까지를 꾸민다고 생각하면 된다.
  • 리액트는 데이터 중심으로 움직이다.
  • 리액트는 데이터를 state에 담고 render를 통해 화면을 구성한다
// 클래스 방식의 사용
    class LikeButton extends React.Component{
        constructor(props){
            super(props);
            this.state = {liked:false};
        }
        render(){
            if(this.state.liked){
                return 'You Liked this.';
            }

            return React.createElement('button', {onClick: ()=>this.setState({liked:true})}, 'Like');
        }
    }

리액트는 데이터가 바뀌면 자동으로 화면이 바뀌게 된다.

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

<script>
    'use strict';

// 기본적인 기능을 하는 class
    class LikeButton extends React.Component{
        constructor(props){
            super(props);
            this.state = {liked:false};
          // 데이터를 위한 부분
        }
        render(){
            if(this.state.liked){
                return 'You Liked this.';
              // 화면 구성을 위한 부분
            }

            return React.createElement('button', {onClick: ()=>this.setState({liked:true})}, '뿡빵');
        }

    } // 1% ErrorBoundary


</script>
<script>
    ReactDOM.render(React.createElement(LikeButton), document.querySelector("#root"));
// 화면 출력을 위한 ReactDOM의 사용
</script>
</body>

위에서 reactDOM.render를 통해 LikeButton클래스를 사용해 root div 안에 화면이 뿌려진다.
LikeButton안에서 state.liked는 기본 false로 되어있다.

render() 함수를 보면 liked 가 true일 때, return으로 'You Liked this.를 나타내게 되어있다.

class 맨 밑의 return에서 클릭 시 state.liked가 true가 되는 button 요소가 생성된다.

profile
공부와 일상

0개의 댓글