React, Front-end Library(3)

https://reactjs.org/docs/hello-world.html에서 react에 대해 공부하고 정리해본다.

 

State and Lifecycle.

State는 props와 유사하지만, 공개되지 않고 component에 의해 완전히 제어된다. State를 사용하려고 하면 우선 사용하려고 하는 위치의 component를 Class로 변환해야 사용이 가능하다. Class로 변환하는데는 다음과 같은 단계로 변환할 수가 있다.

 1. React.Component 를 확장하는 동일한 이름의 ES6 class를 생성한다.
 2. render() 라고 불리는 빈 method를 component 안에 추가한다.
 3. component 함수의 내용을 render() method 안으로 옮긴다.
 4. render() 내용 안에 있는 props 를 this.props 로 바꿔준다.
 5. 남아있는 빈 함수들을 지운다.

 

이와 같은 단계를 거치면 component는 이제 Class로 정의가 된다. Class로 정의가 되고, state를 추가하는 데는 다음과 같은 3가지 단계가 필요하다.

 

1. render() method 안에 this.props. — 라고 되어 있는 인자들을 this.state. — 로 바꿔준다. (this.props.date가 있다면 this.state.date 이런식으로..)

2. 초기 this.state를 지정해줄 constructor를 Class 안에 추가한다. Class component는 항상 props로 기본 constructor를 호출해야 한다.

 

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()
    };
}

3. ReactDOM에서 기존에 있던 prop을 지워준다.

 

Life cycle

application에서는 많은 component가 존재하는데 component가 제거될 때 해당 component에서 사용한 자원, 정보들을 확보하는 것이 중요하다. 
 Class component에 의해 생성된 DOM이 제거될 때마다 초기화를 하고 싶다면 Class component 안에 특별한 method를 선언해서 component가 마운트되거나 언마운트 될 때 일부 코드를 실행시킬 수 있다.

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

componentDidMount, componentDidUpdate, componentWillUnmount 와 같은 method들을 ‘Life cycle(생명주기) method’ 라고 한다. 
 componentDidMount() method는 component가 DOM에 rendering 된 후에 실행이 된다. componentWillUnmount() method 안에 있는 값들은 기존에 있던 DOM에서 Class component가 삭제되는 순간에 발동이 된다. 이를 통해 작동하던 value들을 멈추거나 초기화할 수가 있다.

 

setState

state를 바꾸고 싶은 경우가 있다. 하지만 component에서 state를 직접 수정을 하면 안된다. state 내부의 props들을 바꾸고 싶을 때, setState()를 이용해서 바꿀 수가 있다. this.state는 오직 constructor 안에서만 지정이 가능하다. state가 바뀌는 것이 비동기적일 수 있는데 React 성능을 위해 setState() 호출을 한번에 합쳐서 할 수가 있다. setState()가 호출되면 React는 기존 state를 setState가 호출되고 나서의 state로 병합한다. 이를 통해 독립적인 변수가 state에 있을 수 있고 별도의 setState로 이러한 독립적 변수들을 업데이트 할 수 있다.

 

The Data Flows Down

Data는 아래로 흐른다. state를 소유하고 있는 component 외에는 어떠한 component도 접근을 할 수 없다. 따라서 component는 자식 component에 props를 통해서 state의 value들을 전달할 수가 있다.

 

<FormattedDate date={this.state.date} />

...
function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

FormattedDate 상위 객체에서 위와 같이 this.state.date를 넣어주면, FormattedDate는 이 값을 props를 이용해서 사용을 할 수가 있다. 하지만 FormattedDate에서는 이 값들이 state로부터 왔는지, 수동으로 입력된 것인지는 모른다. 이러한 Data의 흐름을 top-down(하향식), 또는 단방향식 Data Flow라고 한다. 모든 state는 항상 특정 component가 소유하고 있고 그 state로부터 파생된 UI 또는 Data는 오직 자신의 아래에 있는 component에만 영향을 미칠 수 있다.