REACT 5일차 (리액트 컴포넌트-2)

프로퍼티의 경우 컴포넌트 내부에서 값을 바꿀 수 없다.

하지만 값을 바꿔야하는 경우가 있다.

그 경우 state를 사용한다.

 

state는 보통 버튼을 클릭하거나 입력하는 등의 이벤트와 함께 사용된다.

constructor(props){

  super(props);

  this.state={  =>state의 초기값을 객체형태로 정의

    loading:true,

    formData: 'no data',

  };

  this.handleData=this.handleData.bind(this); => 함수로 보냄

  setTimeout(this.handleData,4000);  => 4초후 함수 호출

}

handleData() {

  const data='new data';

  const {formData}=this.state;

  this.setState({

    loading:false,

    formData:data+formData,

  });

  console.log('loading 값',this.state.loading);

}

 

state 사용시 주의점

1.생성자(constructor)에서 반드시 초기화 해야함

*적당한 값이 없으면 빈 객체라도 할당*

2.state값을 병경할 때는 setState 함수를 사용해야 함

*임의로 state값을 변경하면 render함수가 새로 호출되지 않음*

*따라서 setState함수를 통해 render함수또한 호출 하는 것    *

3.setState함수는 비동기로 처리되며 setState 코드 이후

연결된 함수들의 실행이 완료된 시점에 화면 동기화

4.state를 staate로 바꿔 실행해 본 결과 state는 단순 변수 명이아니라

진짜 해당 컴포넌트의 상태라 생각하는게 좋을듯. +setState도 함수임

 

setState를 사용하면 prevState를 통해 이전 state값을 쉽게 얻을 수 있음

handleData(data) {

  this.setState(prevState => ({

    loading:false,

    formData: data+prevState.fromData

  });

}

 

하지만 꼭 state를 관리하는데 setState를 쓸 필요는 없다

forceUpdate() 함수(컴포넌트 내장 함수)를 사용하면 강제로 화면을 새로고침한다.

 

--------------------------------------------------------------------------

 

컴포넌트의 생명주기(Life Cycle) 함수

 

1.constructor(props) 함수

-맨 처음 한번만 호출, 상태를 선언할 떄 사용

-항상 super(props);를 먼저 호출해야함

(프로퍼티와 생명 주기 상태 초기화)

 

2.render() 함수

-데이터가 변경되어 새 화면을 그려야 할 때 자동으로 호출

 

3.static getDerivedStateFromProps(props,state) 함수

-상위 컴포넌트에서 전달받은 프로퍼티로

  state값을 연동할때 주로 사용, 반환값으로 state변경

 

4.componentDidMount() 함수

-render 함수가 JSX를 화면에 그린 이후에 호출되는 함수

-> 컴포넌트가 화면에 모두 표현된 이후 해야하는 작업들은 여기에 구현

 

5.shouldComponentUpdate(nextProps,nextState) 함수

-프로퍼티나 state값이 바뀌면 화면을 새로 출력해야 하는지 판단하는 함수

-반환값이 false여도 forceupdate()를 사용했다면 true로 인식

 

6.getSnapshotBeforeUpdate(prevProps,prevState) 함수

-컴포넌트의 변경된 내용이 가상 화면에 완성된 이후 호출되는 함수

-컴포넌트가 화면에 실제로 출력되기 전에 호출되므로 화면에 출력될 엘리먼트의 크기 또는 스크롤 위치 등의 DOM 정보에 접근할 때 사용

 

7.componentDidUpdate(prevProps,prevState,snapshot) 함수

-컴포넌트가 실제 화면에 출력된 이후 호출되는 함수

-getSnapshotBeforeUpdate의 반환 값과 이전 프로퍼티, 이전 state값을 사용하여 스크롤 위치를 옮기거나 커서를 이동시키는 등의 DOM정보 변경

 

8.componentWillUnmount() 함수

-컴포넌트가 소멸되기 직전에 호출되는 함수

-컴포넌트에서 감시하고 있는 작업들을 해제할 때 필요한 함수