[ReactJS] props & state

1.  Props

 

• Properties의 줄임말
• 속성을 나타내는 데이터
• 함수의 매개변수와 같이 컴포넌트끼리 값을 전달
• 읽기 전용으로, 컴포넌트 내부에서 값 수정이 불가

 

 

가장 중요한 마지막 특징을 살펴보자.

 

 

function sum(a, b) {
  return a + b;
}

 

위와 같은 간단한 함수를 보면 입력되는 값이 컴포넌트 내부에서는 바뀌지 않고 있다.

이는 즉, 더한 값이 리턴되지만, a와 b 자체의 값은 변하지 않는다는 것을 의미한다.

 

이러한 함수를    pure function    이라고 부른다.

 

 

function withdraw(account, amount) {
  account.total -= amount;
}

 

반대로 여기 이 함수를 보면 amount의 값이 함수 내부에서 바뀐다는 것을 볼 수 있다.

amount 자체의 값이 바뀌는 이러한 함수는    impure function    이라고 부른다.

 

 

 

모든 리엑트의 컴포넌트는 반드시 첫번째 pure function처럼 동작해야 한다.

 

하지만 값을 바꿔야하는 경우에는 어떻게 해야할까??

 

이럴 경우 state를 활용하면 된다.

 

 

 

2.  State

 

• 함수 내에서 선언된 변수와 같이 컴포넌트 안에서 변경이 가능한 데이터를 관리해야 할 때 사용
• 컴포넌트에서 동적인 값을 상태 (state)라고 부르고, 동적인 데이터를 다룰 때 이벤트와 함께 사용

 

 

 

App.js

 

import React from "react";
import PropTypes from "prop-types";

class App extends React.Component {
  state = {
    count: 0
  };
  add = () => {
    this.state.count = 1;
  };
  minus = () => {
    this.state.count = -1;
  };
  render() {
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

 

 

2.1   state를 사용할 때 주의사항

• state는 직접 수정할 수 없다.

 

주의 사항을 참고하여 위 코드를 유심히 보면 잘못된 부분을 찾을 수 있다.

 

 

.

.

.

.

 

 

 

이렇게 코드를 작성한 부분을 보면 state를 직접 수정한 것을 볼 수 있는데,

state를 직접적으로 수정하려고 하면

 

오잉

 

" state를 직접 변경하지 말고   setState  를 사용해라 "

라고 알려준다.

 

 

 

 

2.2   직접 바꾸면 안되는 이유?

 

 

1.   props와 state 사이의 일관성이 깨질 수 있으며, 이러한 상황이 발생할 경우 디버깅하기 굉장히 까다로운 이슈를 일으킬 수 있기 때문에.
2. 동시 업데이트를 활성화 시키기 위해서...

 

찾아본 바로는 이러한 이유들이 있다고 한다.

 

 

 

[ 참고 ]

https://github.com/facebook/react/issues/11527#issuecomment-360199710

RFClarification: why is `setState` asynchronous? · Issue #11527 · facebook/react

 

 

 

 

2.3   setState 사용해보기

 

 

다시 돌아와서 ...

 

setState를 사용해보자.

setState 함수는 컴포넌트의 state 객체에 대한 업데이트를 실행한다.

 

 

다시 말해, state가 변경되면 컴포넌트가 리렌더링 되어서 화면에서도 업데이트 된 정보를 볼 수 있도록 해준다.

 

 

add = () => {
    this.setState(current => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState(current => ({ count: current.count - 1 }));
  };

 

 

 해당 함수를 사용하여 이런 식으로 코드를 수정해주면 제대로 작동하는 것을 확인할 수 있다.

 

 

 

 

---

 

 

 

 

https://nomadcoders.co/react-for-beginners

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders