모든 리액트 컴포넌트에는 라이프사이클이 존재합니다. 말 그대로 생명주기입니다. 컴포넌트가 마운트 되기 전 후, 업데이트가 되는 시기, 또 언마운트된 시기 등 10가지의 메서드로 라이프사이클이 정의됩니다. 

1) constructor : 컴포넌트 클래스 생성자

2) getDerivedStateFromProps : State를 Prop와 동기화하는 단계에 불리는 메서드

3) render : 렌더링 단계에 불리는 메서드

4) componentDidMount : 마운트 후 불리는 메서드

* 최적화를 위해서 중요한 메서드입니다. 리렌더링을 최소화 하기 위해서 잘 활용해야 합니다.

7) render : 리렌더링 단계에 불리는 메서드

8) getSnapshotBeforeUpdate: 컴포넌트 변화를 Virtual Dom에서 Dom으로 반영 직전 불리는 메서드

9) componentDidUpdate: 컴포넌트의 업데이트 후 불리는 메서드

업데이트는 props, state가 변경될 때, 부모 컴포넌트가 리렌더링될 때, forceUpdate가 호출 될 때 이렇게 4가지 경우에 호출됩니다.

:페이지에서 컴포넌트가 사라짐

10) componentWillUnmount : 컴포넌트가 사라지기 직전에 불리는 메서드

먼저 글로벌에 create-react-app을 설치합니다.

놀랍게도 이렇게하면 React 프로젝트가 생성됩니다. 갓페이스북!! 참고로 create-react-app은 페이스북에서 제공해주는 것이랍니다.

위 명령어로 제가 한번 생성해보겠습니다.

react-todolist라는 프로젝트를 생성했습니다. 참고로 프로젝트 이름에 대문자는 사용할 수 없습니다.

생성한 프로젝트는 아래와 같은 폴더 구조를 갖습니다. 딱 필수로 필요한 것들만을 포함하고 있습니다.

Dependency를 보면 react, react-dom, react-scripts가 포함되어 있습니다.

yarn start 명령어를 입력하니 아래와 같이 React 프로젝트가 실행되었습니다!

yarn 명령어는 아래와 같이 있습니다. 설치가 완료되면 저렇게 목록을 보여줍니다. 

그런데 마지막 happy hacking!?? 이건 뭘까요 ㅋㅋㅋ Happy hacking 키보드 사고싶다..

끝!!