section0. 6-함수 컴포넌트(함수형 아님)

class를 안쓰는 이유

class는 this문제가 있었다. constructor를 무조건 사용해야한다던가 bind를 해야했었다. (화살표 함수를 써도 되긴했음)

아무튼 그래서 function으로 되돌아 갔다고한다.

그리고 복잡하고 코드가 길어짐!

<script type="text/babel">
    'use strict';

    const e = React.createElement;

    class LikeButton extends React.Component {
        constructor(props) {
            super(props);
            this.state = {liked: false};
        }

        render() {
            if (this.state.liked) {
                return 'You liked this.';
            }

            //return e('button', {onClick: () => this.setState({liked: true})}, 'Like');
            return (
                <button onClick={()=>this.setState({liked:true})}>
                    Like
                </button>
            );
        }
    }
</script>
<script type="text/babel">
    //ReactDOM.render(<LikeButton/>, document.querySelector('#root')) //17버전 코드 (18버전에서도 잘 돌아감)
    ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton/>);
</script>

 

함수 컴포넌트

함수 컴포넌트를 사용하면 코드가 매우 간결해지는 효과가 있음.

<script type="text/babel">
    'use strict';

    function LikeButton(){ //함수 컴포넌트
        const [liked, setLiked] = React.useState(false);
        const onClicked = () => {
            setLiked(true);
        }

        if(liked){
            return "You liked this";
        }
        return (
            <button onClick={onClicked}>Like</button>
        )
    }
</script>
<script type="text/babel">
    //ReactDOM.render(<LikeButton/>, document.querySelector('#root')) //17버전 코드 (18버전에서도 잘 돌아감)
    ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton/>);
</script>

 

라이브러리를 혼자서 재구성해보는 능력 (혹은 라이브러리 안쪽을 상상할 수 있는 능력)은 매우 중요하므로 연습하면 매우 좋다고함.