[React] React 시작하기(3) - state 와 생명주기란

state 란?

리엑트에서 state 란 내부에서 동작하는 모든 동적 데이터, 혹은 동적인 상태를 뜻한다.

컴포넌트를 내부적으로 상태 관리할때 사용한다.

리엑트의 state는 정보를 클라이언트 단에 일시적으로 저장하기 위해 만들어졌다.

 

상태 기반은 event trigger 를 기본으로 동작한다.

데이터를 변화시키는게 아니라,

데이터를 state로 취한 후 새로운 객체(state) 를 반환해 새로운 데이터의 상태를 얻는 개념이라고 볼 수 있다.

 

state 자체는 Object 이며 변수나 데이터를 담을 수 있다!

그리고 이 state 에 들어간 데이터는 변경될 수 있다.

 

state  선언하기

// let [작명(=데이터를 담고있음), 작명(=state의 변경을 도와주는 함수)] = useState(보관할 자료);

function content(){
  let [inputValue, setInputValue] = useState({
    title: "hello",
    date: "2022-03-29",
    description: "this is content",
    writer: "nychicken",
    likeCount: 0,
  });
}

 

🔥  주의 사항 

1. 생성할때 반드시 초기화를 해야한다.

초기화가 되지 않았다면 해당 state 값에 접근이 불가능하다. (빈값이라도 집어넣자!)

 

2. state 값을 변경할땐 setstate() 함수 (= 상태관리함수) 를 사용하자!

state 값을 변경하면 render() 함수가 새로 호출되지 않는 반면,

setState() 함수를 사용하면 리엑트 엔진이 자동으로 render() 함수를 호출한다.

(= state 를 직접 수정하지 않는다 -> 해당 컴포넌트를 다시 렌더링 하지 않기 때문)

 

3. setState() 함수는 비동기로 처리된다.

setState() 이후로 연결된 함수들의 실행이 완료된 시점에 화면 동기화 과정을 거친다.

 

4. 함수가 호출 될 때 마다 새롭게 화면을 출력하고 싶을땐 forceUpdate() 함수를 사용한다.

이 함수는 클래스 인스턴스 변수와 화면을 강제로 출력하는 기능을 가졌다.

 

React의 생명주기(Life cycle)

React의 컴포넌트들의 사이클은

생성 (Mount) -> 업데이트 (Update) -> 제거(Unmount)

순서대로,

1. Mount: 컴포넌트가 페이지에 나타날때  

2. Update:컴포넌트 내부의 값(props, state)이 변경될 때

3. Unmount:컴포넌트가 페이지에서 사라질때

 

Mount 진행 시 호출 되는 method 순서

- constructor() : class 호출 시 가장 먼저 호출. 생성자 호출 이후 rendering 진행

- getDerivedfromProps() : rendering 시 호출

- render() : rendering 진행

- componentDidMount() : rendering 완료 후 호출

 

Update 진행시 호출되는 method 순서

setState() : 기본적으로 상태변경을 위한 setState 호출 시 아래 method 들이 순차적으로 발생

 

- getDerivedStateFromProps() : 상태 변경으로 인한 component update 호출

- shouldComponentUpdate() : 상태변경으로 인한 Update 여부 결정

- rendering() : component 변경 및 호출이 선행 된 후 rendering 진행

- getsnapshotBeforeUpdate() : rendering 진행 중 호출. 사용하지 않는 method

- componentDidUpdate() : 변경된 상태를 최종적으로 rendering 후 호출

 

Unmount 진행시 호출되는 method

- componentWillUnmount() : component 제거 후 rendering 하기 전 호출