[리액트]props state

1. props

props는 생성자 인자로 비유해서 이해했다.

MyComponent 태그를 보면 속성=값 으로 인자를 넘겨줬다.

객체를 찍어낼때 생성자 인자로 "a", "b"를 넘겨줬다고 생각하면된다.

2.state

state는 클래스의 private 멤버로 비유해서 이해했다.

state를 정의하려면 위와 같이 하면 된다.
생성자 써주고 그 안에다 정의해주면 된다. 걍 방식이다.

제품으로 치면 props는 외부 연결선이고 state는 내부 전선에 해당한다.

내부 전선이 밖으로 나와있으면 좋은제품이라할수없다.

위와 같이 구현하면 <App/>을 렌더링하는 입장에서는 state가 있는지 없는지 모른다.

즉 외부에선 모른다.

 

<응용1>

props로 넘어온 애들을 state에 세팅해주고 사용할 때는 위와 같이

constructor만들고 그안에서 this.state=해서 세팅해주면된다.

 

<응용2>

컴포넌트 안에 내부 컴포넌트가 있을때, 자신의 state를 내부 컴포넌트의 props로 계층화해서 내려줄 수 있다.

 

3. 개꿀

class안의 state, props가 변하면 render가 자동으로 재호출되고 하위 컴포넌트의 render도 싹다 호출된다고 한다.
하나가 변경됐을 때, 그에 영향을 받는 하위 애들이 알아서 갱신되니까 편하다.
실제로 각 컴포넌트 render() 함수 가서 console.log찍어보면 알 수 있다.

 

<주의할점>

state가 바뀌면 그 state를 참조하는 모든 자식컴포넌트들이 다시 render되는데,
이때 this.state.a=b 일케 변경시키면 값은 바뀌지만 render가 안된다.
this.setState({ a:b }); 일케 해줘야 다시 render가 된다.

내가 처음생각한건 private변수라 setter 메쏘드를 통해서만 접근이되는줄알았는데

그건 아니고 setter 안에 render를 다시하게끔 내부구현이 되어있는듯 싶다.