React - Component/class

Component

우선 리액트에는 Component라는 개념이 있다. 먼저 컴포넌트를 살펴보자.

우리가 html을 구성을 할떄 header/visual/footer등등 많은 부분이 있는데 그 안에서 또 영역을 나눌 수 있다.

그 하나씩 나누는 부분을 컴포넌트라고 우리는 칭할 수 있다는 것이다.

컴포넌트를 사용하는 이유는 데이터가 바뀌면 화면을 바뀌게 만들기 위해서 하나의 카테고리를 만들었다고 보면 된다.

컴포넌트를 작성하는 코드방식은 바닐라 자바스크립트로 구현을 해놓았다. 따라서 어려운 것은 없을 것이다.

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

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render()

먼저 여기서 class 에서 생성자 함수를 쓰고 super를 쓰는 이유는 부모에 있는 클래스의 인스턴스를 생성하기 위함이다.

무조건 props를 받아야 하는데 그 이유는 properties의 prop이다.

그리고 this.state를 작성해준다.

여기서 this.state가 중요해지는데 왜냐하면

상태라는 말이 중요하기 떄문이다. 아까 데이터가 바뀌면 화면이 바뀐다라고 이야기 했는데, 그렇게 하기 위해서는 this.state가 그것의 초석이다.

즉 state가 바뀌면 컴포넌트가 바뀐다고 이야기 할 수 있다.

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

                this.state = {
                    isLogin: false
                }
            }

            render(){
                //React.createElement('Element이름', '속성', 'innerHTML')
                return React.createElement('button', null, 'Login')
            }
        s

        const root = ReactDOM.createRoot(
            document.querySelector("#root")
        )
        root.render(React.createElement(LoginBtn))
}

속성값에는 onclick이라는 것을 추가할 수 있다. id, onclick(함수), class 등등등이 들어갈 수 있다.

onclick을 넣어보자. onclick안에 상태를 바꾸는 함수를 넣어줄 것이다.

this.setState()이다.

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

        this.state = {
            isLogin: false,
        }
    }

    render() {
        //React.createElement('Element이름', '속성', 'innerHTML')
        return React.createElement(
            "button",
            {
                onClick: () => {
                    this.setState({ isLogin: !this.state.isLogin })
                },
            },
            "Login"
        )
    }
}

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(React.createElement(LoginBtn))

Reat.Component 는 생각하지 말자. comPonent는 기본적으로 state라는 인스턴스가 들어가 있고

state를 바꿀 수 있는 setState라는 메서드가 있다. 즉 this.setState는 Component에 있다.

state라는 값은 기본적으로 우리가 component에서 데이터를 저장하는 공간이라고 생각하자

그럼 여기서 this.state ={isLogin:true}로 바꾸면 되지 않느냐 라고 질문 할 수 있지만

이 경우 객체는 참조형 데이터 라는 사실을 기억해야 한다.

그럼 만약에 this.state.isLogin =true 로 하게 된다면 메모리 주소가 바뀌는가? 안바뀐다는 사실을 기억해야 한다.

setState()의 역활은 this.state를 다시 재 선언하고 안에 isLogin이라는 값을 똑같이 설정시킨다는 것입니다.

따라서 객체가 완전히 다른 객체를 받았음을 알게 되고 그에 따라 재 렌더하게 하는것이 setState의 역활이라는 것을 알아야 합니다.

따라서 리액트는 이 메서드를 통해서 하는것을 권장이 아닌 필수 이다.

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

        this.state = {
            isLogin: false,
        }
    }

    render() {
        //React.createElement('Element이름', '속성', 'innerHTML')
        return React.createElement(
            "button",
            {
                onClick: () => {
                    this.setState({ isLogin: !this.state.isLogin })
                },
            },
            this.state.isLogin ? "Logout" : "Login"
        )
    }
}

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(React.createElement(LoginBtn))

이렇게 사용이 가능하다는 것을 알아야 합니다.

코드의 작성형태가 어떻게 돌아가는지 알아야 한다.

이벤트 안에 DOM 을 조작하는 코드가 있는것이 일반적으로 당연하다(절차지향적)

react 코드는 이벤트 안에 상태(데이터)만 변경한다는 사실을 깨달아야 한다.

이벤트가 발생이 되었을때 상태가 바뀌는 코드만 구현되어 있다는 사실, 렌더가 되는 영역은

우리가 바꾼 데이터에 따라서 렌더가되는것을 깨달아야 좀 편해진다는 사실을 기억하면 좋을것입니다.

다시 정리하자면 데이터가 바뀌면 화면이 바뀐다는 것은 this.state라는 상태가 바뀌면 컴포넌트가 바뀐다는 것은

재실행된다는 것이다.

const root = ReactDOM.createRoot(document.querySelector("#root"))

먼저 DOM.createRoot를 사용한다는 것은 거기서부터 reacDOM을 사용하겠다는 뜻이다. 거기 안에서만 사용하고

root.render를 사용한다는 것은 어떤 엘리먼트를 넣겠다를 지정하는 것이다.

root.render(React.createElement(LoginBtn))

이렇게 지정을 하고 엘리먼트를 넣을 것인데 컴포넌트 클래스를 넣었다. 그것은 어디에 있냐면 React.createElement를

통해서 우리가 인자값을 넣었다는 것을 인지해야 한다.

그럼 컴포넌트는 엘리먼트인가? createElement안에 넣었기 떄문에 element라고 생각하는것을 기능이 강화된 엘리먼트 라고 생각하는 것이 좋다.

상태를 담을 수 있는 엘리먼트라고 생각하자.

자 근데 여기서 우리가 쓰는 LoginBtn는 new LoginBtn()에 인자값이 들어와야 하는게 아닌지 라는 의문을 가질 수 있다.

인스턴스화가 되어야지 무엇인가 할 수 있는게 아닌가? 할 수 있지만 그걸 해주는 것이 바로 아래 코드이다.

root.render(React.createElement(LoginBtn))

createElement가 class를 넣어주면은 LoginBtn을 인스턴스화 시켜주고, root.render가 실행이 되려면

결과물이 있어야 하는데 LoginBtn이 있어야 하기 때문 createElement가 객체를 만들고

render가 createElement안에 있는

render(){
                //React.createElement('Element이름', '속성', 'innerHTML')
                return React.createElement('button', {onClick: ()=>{
                    this.setState({isLogin:!this.state.isLogin})
                }},
                this.state.isLogin ? 'Logout':"Login" )
            }

render라는 호출을 다 날리는 것이라고 생각하면 된다.

class 문법적으로 어떻게 되는지를 구분지어서 생각하자.

그렇게 되면 나머지 코드들이 이해하기 좋아진다.

왜 이렇게 알아야 하냐면 더 이상 절차적으로 코드를 작성할 수 없기 때문이다.

따라서 앞으로는 작은 단위의 컴포넌트를 읽는 방법을 정확히 파악하고 있어야 한다.