React - State and Lifecycle

1. State

• 컴포넌트 내부에서 바뀔 수 있는 값을 의미
• 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state

 

2. 클래스형 컴포넌트의 State

• 컴포넌트에 state를 설정할 때는 다음과 같이 constructor 메서드를 작성, 이는 컴포넌트의 생성자 메서드. 클랙스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해 주어야 한다. 이 함수가 호출되현 상속받고 있는 리액트 Component 클래스가 지닌 생성자 함수를 호출

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {number: 0};
  }

  render() {
  	const { number } = this.state; // state를 조회할 때는 this.state로 조회
    return (
      <div>
        <h1>{number}</h1>
        <button
        // onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정
        onClick={() => {
        // this.setState를 사용하여 state에 새로운 값을 넣을 수 있다.
         this.setState({ number: number + 1});
         }}
        >
        +1
        </button>
      </div>
    );
  }
}

 

3. 함수 컴포넌트의 useState 

•  Hooks를 사용하기 전에 배열 비구조화 할당 알아보자. 배열안에 들어 있는 값을 쉽게 추출할 수 있도록 해주는 문법

const array = [1, 2];
const one = array[0];
const two = array[1];

const array = [1, 2];
const [one, two] = array;

• useState를 호출하면  첫 번째는 현재 상태, 두 번째는 상태를 바꾸어 주는 함수입니다. 이 함수를 세터라고 부른다.

const Hello = () => {
	const [message, setMessage] = useState('');
    const clickKr = () => setMessage('안녕하세요');
    const clickEn = () => setMessage ('hello');
    
    return (
      <div>
       <button onClick = {clickKr}> 한글 </button>
       <button onClick = {clickEn}> 영어 </button>
       <h1> {message} </h1>
      </div>
    );
};

 

4. Lifecycle 이해

 

• 이 메서드들은 컴포넌트 클래스에 덮어 써 선언함으로 서 사용 가능
• mount : DOM이 생성되고 웹 브라우저상에 나타나는 것
  • constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
    • constructor(props){} : 초기 state를 정의 할 수 있다.
  • getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드
    • props로 받아 온 값을 state에 동기화시키는 용도
  • render : 우리가 준비한 UI를 렌더링하는 메서드
  • componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
    • DOM 정보, state 변화, 네트워크 요청 같은 비동기 작업 처리
• Updating
  • props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트가 리렌더링 될때
  • this.forceUpdate로 강제로 렌더링을 트리거할때
    • shouldComponentUpdate : 컴포넌트가 리런데링을 해야 할지 말지 결정하는 메서드, forceUpdate 호출 시  생략하고 render 함수 호출
      • 이 메서드를 따로 생성하지 않으면 기본적으로 true 반환
    • getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
    • componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출
• unmount
  • componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드