[리액트] State & Lifecycle

1. State ⭐⭐⭐⭐⭐

• React Component의 바뀌는(변경 가능한) 데이터

• State는 사전에 정해진 것이 아닌 개발자가 직접 정의한다.

• 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다!
  → 불필요한 재렌더링을 방지하기 위함
  

• state는 Javascript 객체이다.⭐⭐⭐

• state는 직접 수정할 수 없다! (하면 안된다!)

  • 엄밀히 말하면 수정은 가능하지만, state는 컴포넌트의 렌더링과 관련있으므로 마음대로 변경한다면 개발자의 의도대로 작동하지 않을 가능성이 높다.

  // state를 직접 수정 (잘못된 사용법)
  this.state = {
      name:'Soaple'
  };
  
  // setState 함수를 통한 수정 (정상적인 사용법)
  this.setState({
      name:'Soaple'
  });

2. Lifecycle

리액트 Component의 생명주기

• 리액트 Component 생성 → componentDidMount()

• 리액트 Component 변경, 수정 → componentDidUpdate()

• 리액트 Component 삭제 → componentWillUnmount()

• Component는 계속 존재하는 것이 아닌, 시간의 흐름에 따라 생성되고 업데이트 되다가 사라짐.

• 현재 React는 클래스 컴포넌트의 생명주기 함수를 거의 사용하지 않고 hook을 주로 이용하지만 더 깊은 이해를 위해 컴포넌트의 생명주기를 이러한 함수들을 통해 설정했다는 정도만 알아둘 것.

인용 자료 출처
처음 만난 리액트