[항해99] WIL

State

동적인 데이터를 다룰때 State 사용, props 처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터

State 객체를 사용하고 싶으면 컴포넌트를 생성할때 constructor 함수를 적어준다. 컴포넌트 생성자에서 super를 호출하기 전에는 this를 사용할 수 없기 때문 !

class App extends Component {
  constructor(props) {
    super(props);
      this.state={
      Subject:{title:'WEB',sub:'hello World!'}
    }
  }
  render() {
    return (
      	<div className="App">
        <Subject 
        	title={this.state.subject.title} 
    		sub={this.state.subject.sub}>
        </Subject>
      </div>
    );
  }
}

즉, 컴포넌트의 시작 부분에 constructor()이라는 함수가 컴포넌트의 초기화를 시켜줘야 State에 값을 넣어 사용할 수 있다.

 

setState

 setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트는 리렌더링이 된다.

 

Props

props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달 할 때 사용한다.

 

*예시 

import React, { Component } from 'react';

class MyName extends Component {
  static defaultProps = {
    name: '이름'
  }

  render() {
    return (
      <div>
         이름은 <b>{this.props.name}</b> 입니다.
      </div>
    )
  }
}

export default MyName;

import React, { Component } from 'react';
import MyName from './MyName';

class App extends Component {
  render() {
    return <MyName name ="우종훈" />;
  }
}

export default App;

* state와 props의 차이점?

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

 

리렌더링 발생 조건

1. state 변경이 있을 때,
   • 유동적인 데이터를 저장하기 위해 state라는 것을 이용한다. 이때 state 값을 바꿔주기 위해서는 setState 메서드를 이용해야 한다. 이유는 리액트가 state 변경이 감지되면 리렌더링을 해주는데 메서드를 사용하지 않고 직접 바꿔주면 감지를 못한다.
2. 새로운 props가 들어 올때,
   • 전달받은 props 값이 업데이트 됬다면 리 렌더링이 된다.
3. 부모 컴포넌트가 렌더링 될때
   • 새로운 props가 들어오지 않더라도 부모컴포넌트가 리렌더링이 된다면 자식컴포넌트 역시 리렌더링이 된다.
4. shouldComponentUpdate에서 true가 반환 될때
5. forUpdate가 실행 될때