본문 바로가기
프로그래밍/react

[220413] 데이터(props)가 바뀌면(state) 화면이 바뀐다(component)

by 한코코 2022. 4. 15.

한 페이지를 그릴때 , 보여지는 화면에 관련된 모든 컴포넌트를 가져오는 리액트의 습성때문에 기본적인 요청&응답이 길다.

예) 로그인 버튼을 누름 -> 로그인에 관련된 컴포넌트 모두 가져옴.

 

데이터를 건드리지 않고 화면을 모두 그리고 난 후에는 완료되었다는 신호를 준다.

ComponentDidMount라는 신호 (DOMContentLoad와 목적이 같음)

 

여기부터 비동기통신인 AXIOS를 사용해서 비동기적 통신으로 데이터와 접속함.

리액트는 NODEJS와 webpack의 도움을 받아서 이루어진다.

 

webpack : 100개의 서로다른 js를 1개의 js로 통합시켜주는 번역기 ( = 번들파일)

왜? -> 다른 js 파일을 만들다보면 변수명이 겹치게 되는데 그런 일을 방지해줌.

등장배경 -> require이 없던 10년전에 나타난 webpack

성능 -> 중복코드도 줄여줘서 결론적으로 리액트 속도를 빠르게 만들어준다.

 

 

 

리액트의 모토 : "데이터가 바뀌면 화면이 바뀐다."

화면에 보이는 모든 컴포넌트를 가져오는 리액트.

다시말하면 화면에 가져와야할 데이터의 변화에 민감하다는 뜻이다.

 

그렇다면 예전에 썼던 데이터를 계속 쓰면 되지, 왜 다른 컴포넌트로 가져올때마다 값을 다른 값에 저장해서 가져갈까?

같은 내용으로 같은 속성을 새로 만든다고해서 같지 않다. {} === {} 값이 false인걸 기억하자.

새로 생성할때 매번 다른 주소값을 가진 공간에 생성되므로 결론적으로 같지 않다!

 

또한 화면을 그리는 render(){} 함수 안에 화면에 나타나지 않으면서 계속 변화하는 함수를 넣는건 지양해야한다.

변화할때마다 리액트가 화면에 계속 그려야하기 때문.

함수는 가능한 render 함수 바깥으로 빼주자.

 

 

 

 

props와 state의 차이점

props : 컴포넌트 외부, 부모로부터 전달되는 불변의 데이터

state : 컴포넌트 내부에서 생성되며 바뀔 수 있는 데이터

<body>
    <div id="root"></div>
    
    <script type="text/babel">
        // <input>
        class Input extends React.Component{
            // constructor : 건설자란 뜻
            // constructor(props){super(props)}
            // value={} 이걸 사용하려면 먼저 작성해줘야하는 코드
            //이젠 선언하지 않아도 사용할 수 있도록 리액트가 만들어줌
            //결론 : 있다는것만 알아두자
            
            render(){
                return(
                    <input type="text" value={this.props.value } />
                    //지금 내가 있는 곳 Input =  this
                    //props의 속성 value를 설정한다
                    //App의 value와 헷갈리지 말자. 여기의 value는 html 속성임
                )
            }
        }

        //Props State
        class App extends React.Component{
            render(){
                return(
                    <div><Input value={1}/></div>
                    //Input 안에 들어와야할 값을 나타내는 value
                )
            }
        }

        ReactDOM.render(<App />,document.querySelector('#root'))
    </script>
</body>

사용자도, 개발자도 보이는 props 변수

여기에서 보이는 1은 <div><Input value={1}/></div>에 있는 1이다.

 

 

 

 

중괄호로 변수를 쓸 수 있는데 state를 사용하는 이유는?

중괄호를 변수로 사용할때 데이터 값이 달라질때는 새로고침을 해야 변화된 값이 달라지지만,

state를 변수로 사용할때 데이터 값이 달라질때는 새로고침을 하지 않아도 변화된다.

그러니 자주 데이터가 바뀌는 곳에는 변수를 state로 사용하면 편리하다.

 

 

 

 

 

html의 value값 & 화면에 보여지는 값 value 구분하기

//Props는 속성값을 읽는다
class App extends React.Component{
    render(){
        const Ele = React.createElement(
                                        'div',
                                        {
                                            value:1,
                                            name:'ingoo',
                                            age:33,
                                            class:'header',
                                            id:'wraper'
                                        },
                                        'hello world'
        )
        return(
            <div>{Ele}<Input value={1}/></div>
            //Input 안에 들어와야할 값을 나타내는 value
        )
    }
}

 

 

 

리액트 실행 흐름 이해하기 (기본폼)

class C extends React.Component{
    render(){
        return(
            <span>Hello</span>
        )
    }
}

class B extends React.Component{
    render(){
        return(<C />)
    }
}

class A extends React.Component{
    render(){
        return(<B />)
    }
}

class App extends React.Component{
    render(){
        return(
            <div>
                <A />
            </div>
        )
    }
}

ReactDOM.render(
    <App />
    ,document.querySelector('#root')
)

 

 

 

리액트 실행 흐름 이해하기 (변수를 사용할때 쓰는 중괄호)

또는, JSX 영역 안에서 자바스크립트를 사용할거야!라는 표시의 중괄호

리액트에서는 중괄호를 언제 쓰는지 알아두는게 중요하다. (헷갈리면 난리남.)

class C extends React.Component{
    render(){
        const {text} = this.props
        return(
            <span>Hello {text}</span>
        )
    }
}

class B extends React.Component{
    render(){
        //class A 안에 있는 <B value={name}에서 name
        const {value} = this.props //자바스크립트 영역

        //html 코드 안에 있는건 JSX영역
        return(
            <div className = "asdf">
                {value}
                <C text={value}/>
            </div>
        )
    }
}

class A extends React.Component{
    //name 값을 받아오는 this
    //this.props.name 또는
    //변수명을 쓸때는 {}을 사용한다.
    render(){
        const {name} = this.props
        return(
            <div>
                <B value={name}/>
            </div>
        )
    }
}

class App extends React.Component{
    render(){
        return(
            <div>
                <A name={"ingoo"}/>
            </div>
        )
    }
}

ReactDOM.render(
    <App />
    ,document.querySelector('#root')
)

 

 

 

리액트 실행 흐름 이해하기 (동일선상에 놓기)

class D extends React.Component{
    render(){
        const {name1} = this.props
        return(
            <div> c : {name1}</div>
        )
    }
}
class B extends React.Component{
    render(){
        const {name} = this.props
        return(
            <D name1 = {name} />
        )
    }
}

class C extends React.Component{
    render(){
        const {value} = this.props
        return(
        <div>
            d : {value}
        </div>
        )
    }
}

class A extends React.Component{
    render(){
        const {name} = this.props
        return(
        <div>
            <C value={name}/>
        </div>
        )
    }
}

class App extends React.Component{
    render(){
        return(
            <div>
                <A name={"ingoo"}/>
                <B name={"ingoo"}/>
            </div>
        )
    }
}

ReactDOM.render(
    <App />
    ,document.querySelector('#root')
)

 

 

 

생략되는 생성자 constructor

원래 있어야하지만 자주 사용하는 기능이라 constructor 코드를 사용하지 않아도 사용할 수 있도록 리액트가 만들어놓았다. 

//모든 변수를 객체로 관리하는 리액트
//생성자 constructor
constructor(props){
     super(props)
     this.state = { }
}


//이제는 이렇게만 쓰면 사용할 수 있음.
state = {}

 

 

이전 컴포넌트에서 state라는 변수를 받아왔으면 반드시 state 변수명을 사용해야한다.

데이터 변화에 민감한 리액트기때문에 변수명이 바뀐것도 상태변화라고 인식하기 때문.

 

'프로그래밍 > react' 카테고리의 다른 글

[220414] 빙고게임 완성하기 - 01  (0) 2022.04.17
[220414] 리스트로 DB 데이터를 다루는 방법  (0) 2022.04.17
[220414] 리스트의 단점을 극복하는 상태 끌어올리기  (0) 2022.04.17
[220414] 리액트에서 이벤트 생성하기  (0) 2022.04.16
[220413] 리액트 시작하기 (react, react-dom, 컴포넌트)  (0) 2022.04.15

관련글

댓글

티스토리툴바