[TIL] 2020-03-18

 

[ groomedu ]

- 처음 만난 React(리액트) State and Lifecycle까지 수강

 

[ 배운 내용 ]

 

state란?
- 상태라는 의미를 가지고 있다. 즉, 리엑트 컴포넌트의 상태를 의미한다.
- 리엑트에서는 데이터를 의미하며, 컴포넌트에 대한 변경 가능한 데이터이기도 하다.
- state는 사용자가 정의한다.
- 렌더링이나 데이터 흐름에서 사용하는 값들만 state에 포함시켜야 한다.
- 그렇지 않은 데이터는 그냥 정적인 데이터로 관리하는 것이 좋다.
- state는 자바스크립트의 객체라고 보면 된다.
- state는 직접 수정할 수 없다.(하면 안 된다)
- 리엑트에서 관리하기 때문에 우리가 수정하면 이상한 방향으로 흘러갈 수 있기 때문이다.
- state는 꼭 setState()를 활용해서 수정해야 한다.

Lifecycle란?
- 생명주기라 하며, 우리가 태어나서 살아가고 죽는 과정처럼 컴포넌트도 그러한 생명주기가 존재한다.
- 그것을 Component Lifecycle이라 부른다.
- 리엑트 컴포넌트의 생명주기는 Mounting(출생), Updating(인생), Unmounting(사망) 이 존재한다.

Mounting(출생)
- 어떤 컴포넌트가 실행될 때, render() 함수보다 먼저 실행되면서, 
그 컴포넌트를 초기화 해주고 싶은 코드는 constructor 안에 다가 코드를 작성한다.
- 즉, constructor 는 초기화를 담당한다.
- constructor 생성자를 통해서 생성이 되고, render() 함수를 통해서 렌더링이 되고, 컴포넌트가 Mount가 완료된 이후에 componentDidMount()가 실행이 된다.

Updating(인생)
- 컴포넌트가 마운팅 된 후, 그 이후에 내용이 변경되면 업데이트가 일어난다.
- 새로운 프롬스가 들어 오거나 setState()를 통해서 state가 변경되거나, 또는 forceUpdate()로 강제로 업데이트를 시도했을 경우에, 렌더링이 다시 일어나게 되고, 리엑트는 이것을 다시 렌더링을 한다.
- 렌더링이 끝난 이후에 컴포넌트가 업데이트를 완료되었다는 함수 componentDidUpdate()를 호출하게 된다.

Unmounting(사망)
- 그렇게 컴포넌트가 업데이트를 반복하다가, 쓸모가 없을 때 Unmounting이 된다.
사람으로 치면 죽음을 의미한다.
- 컴포넌트가 Unmount가 될 것이라는 이유를 알려주는 componentWillUnmount()를 실행한다.