사용자는 서버와 interaction을 한다.
예를 들어 회원가입 후 로그인 블로그 포스팅이나 쇼핑 등의 활동을 한다.
그렇다면 그 정보들은 어디에 저장되는 걸까?
보통은 서버와 통신하는 데이터베이스에 저장이 된다.
그렇다면 이런 상태에서 댓글의 내용이 어디에 저장되어 있을까요?
클라이언트 사이드의 메모리 위에 저장되는 것이 일반적
만약 이런 내용들이 실시간으로 데이터베이스에 업데이트 되고 저장된다면, 유저의 불편함과 과도한 네트워크 비용을 초래할 수 있다.
따라서 클라이언트 사이드의 메모리 위에서 값들을 기억하고 사용할 수 있도록 해야 한다.
리액트에서는 메모리 위에 저장되는 값 중에서 대표적으로 props와 state가 있다.
특히 state를 상태라고 부른다.
상태관리란 state의 관리를 말한다.
import React, {useState} from 'react;
function App(props){
const[state, setState] = useState(null);
return (
<div></div>
)
}
export default App;위 코드를 보면 props라는 파라미터와 useState로 선언된 state가 보인다.
props는 부모 컴포넌트로부터 물려받은 값으로 자식 컴포넌트인 APP컴포넌트에서 그것을 읽을 수만 있다.
state는 함수형 컴포넌트에서 useState로 선언된다.
그 값은 setState 등을 사용하여 컴포넌트 내부에서 직접 업데이트 할 수 있다.
개발자들은 state에 저장된 값들을 활용하여 손쉽게 프론트엔드의 UI로 표현할 수 있다.
이 그림에서 초기에 컴포넌트가 생성될 때를 Mounting이라고 한다.
생성 후 그리고 소멸 전 props나 상태가 업데이트 되는 때를 Updating이라고 한다.
함수형 컴포넌트에 라이프 사이클 플로우는
1. 우선 컴포넌트를 Mounting한다.
2. return 값을 rendering한다.
3. rendering된 상태를 가상 돔에 그린다.
4. 가상 돔과 돔의 element들을 비교한다.
만약 가상 돔의 element들과 돔의 element들에서 다른 부분이 감지된다면,
5. 그 부분만을 돔에 update한다.
초기 렌더링의 경우 현재 컴포넌트에 대한 정보가 돔에 없기 때문에, 현재 컴포넌트의 모든 부분을 돔에 그립니다.
6.컴포넌트 내부에 useLayoutEffect와 useEffect훅을 실행합니다.
여기까지가 마운팅 과정입니다.
7.직전에 실행된 useEffect나 유저의 interaction등에 의해 state또는 props값이 변경됩니다.
8.가상돔을 변경된 state와 props에 맞추어 다시 그립니다.
9.가상돔과 돔의 element들을 비교합니다.
만약 가상돔의 element들과 돔의 element들에서 다른 부분이 감지된다면,
10. 그 부분만을 돔에 update합니다.
11.state나 props의 값이 변경되었지만, UI의 변화가 없다면, 돔을 update하지 않습니다.
useLayoutEffect와useEffect훅을 실행합니다.
컴포넌트가 소멸할 때 useEffect내부에 return에 정의된 clean과 function을 실행합니다. 그리고 컴포넌트는 소멸합니다.
