한발 먼저 가본 문과생이 알려주는
데이터 시각화 – React 그놈.. ( props vs state )

저번 연재 글에서 React와 Github pages를 이용하여 React SPA(Single-Page-App)를 만들었다.

이제 보여주고 싶은 data를 chart로 표현하는 일만 남았다.

그 전에 잠깐 React에 대해서 간단하게 알아보고 가자.

React를 사용하다 보니 props, state이라는 단어가 자주 보이고 들린다.

이게 뭔데 자주 보이는 걸까?

props와 state가 뭔데?

react logo

우선 props, state 모두 component에 영향을 끼친다.

그러나 차이점이 있다. (당연한 이야기를..)

우선 React 공식 사이트를 살펴보자.

‘props’는 component에 임의의 입력을 주어 화면을 변화시킨다고 한다.

‘state’는 props와 비슷하나 더 개인적이고 완전히 component에 의해 통제를 받는다고 적혀있다.

 

너는 저게 무슨 소리인지 알아?

 

조금 더 자세히 살펴보자.

 

props는 변경되지 않는 data를 다룬다.

parent component(일반적으로 App.js)에서 child component(view의 구성 요소들: head component, foot component..)로 props data를 보내주고 child component는 그 값을 보관하고 있는다.

즉, component는 props로 data를 주고 받고, parent component가 아닌 곳에서는 변경이 불가능하다.

state 각 component에서 만들어지고 보관한다.

그러므로 다른 component (parent component라도!)에서는 수정이 불가능하고 해당 component에서만 수정이 가능하다.

변동이 많은 data 경우, component마다 필요한 data가 다를 경우 사용한다.

예를 들어 클릭으로 값이 변하는 경우, 입력으로 실시간 data를 불러오는 경우가 있다.

혹은 일정 시간이 지나면 값이 변하는 경우도 사용할 수 있다.

 

 

아직 조금 알쏭달쏭하다.

비유를 통해 쉽게 이해해보자. (문돌이는 비유를 좋아한다. 나만 그럴 수도 있다..)

어떤 엄마가 아이들에게 미아 방지 카드를 주었다.


//아이

class App extends React.Component {
    render(){
        return  (
            <div>
                <p>주소={ this.props.주소 } </p>
                <p>이름={ this.props.이름 } </p>
	        <p>전화번호={ this.props.전화번호 } </p>
            </div>
        );
    }
}

(실제는 아니지만) 이런 식으로 적혀있다.

아이들 모두 엄마에게서 같은 카드를 받았다.

지금 받은 미아 방지 카드의 주소, 이름, 전화번호라는 ‘항목’이 props이다.


//엄마

ReactDOM.render(<App 주소="서울 용산구 ㅁㅁ"
                        이름="데이비드 베컴"
                        전화번호="010-1234-5678"/&gt;,
                document.getElementById('App'));

그리고 엄마는 props를 통해 아이들에게 같은 주소, 이름, 전화번호 정보를 넘겨주었다. props는 이런 방법으로 정보를 넘겨준다.

See the Pen Props example by HJ (@oneybee) on CodePen.0

그런데 아이마다 이름이 다르다. 어떻게 수정해야 할까?


//아이

    class App extends React.Component {
    	 constructor(props) {
    			 super(props);
    			 this.state = {이름: '리오넬 메시'};
    }

        render(){
            return  (
                <div>
                    <p>주소={ this.props.주소 } </p>
                    <p>이름={ this.state.이름 } </p>
    		    <p>전화번호={ this.props.전화번호 } </p>
                </div>
            );
        }
    }

이런 식으로 아이들마다 다른 이름을 작성했다. 지금 작성한 것이 state다.

state는 아이가 받은 미아 방지 카드에서만 수정할 수 있다.

 

See the Pen State example by HJ (@oneybee) on CodePen.0

비유를 통하니 딱딱한 설명보다 조금 쉽게 이해된다!

(아 역시 이래서 내가 문돌이 인가 보다 ✌)

아래는 state 값을 이용해 자유롭게 미아 방지 카드 정보를 입력하게 했다.

자유롭게 입력해보자.

See the Pen 미아방지카드_입력 by HJ (@oneybee) on CodePen.0

 

 

props, state에 관한 재밌는 사실들

 

33317648873_0ee9fe6916_b

마지막으로 props와 state에 관한 몇 가지 재밌는 팩트체크를 해보자

parent component와 child component 간에 데이터 교환은 props로 한다?

➔ 그렇다 👌 (parent component에서 child component로 props data를 보내고, child component는 받은 props data를 보관한다.)

 

데이터 변경은 props로 한다?

➔ 아니다 ❌ (props는 데이터를 component 간에 전달하는 역할을하고, state를 이용하여 자체적으로 data를 변경할 수 있다)

오늘은 만드는 것 대신에, React에서 중요한 props와 state를 알아봤다.

사실 이 개념을 배운지가 얼마 되지 않았기에, 적당히 잘 표현이 되었는지 모르겠다. 혹시나 잘못된 부분이 있다면 그런 부분에 대한 의견은 언제나 감사하다 🙇‍♂️🙇‍♂️

Summary
한발 먼저 가본 문과생이 알려주는, 데이터 시각화 - React 그놈.. ( props vs state )
Article Name
한발 먼저 가본 문과생이 알려주는, 데이터 시각화 - React 그놈.. ( props vs state )
Description
한발 먼저 가본 문과생이 알려주는, 데이터 시각화 - React 그놈.. ( props vs state )
Author