0. 라이프사이클

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


1. 마운트 단계

:페이지에 컴포넌트가 나타남

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

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

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

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


2. 업데이트 단계

컴포넌트 정보를 업데이트 함(리렌더링)

5) getDerivedStateFromProps : State를 Prop와 동기화하는 단계에 불리는 메서드(마운트 단계 뿐 아니라 업데이트 단계에서도 호출됩니다)

6) shouldComponentUpdate : 컴포넌트 리렌더링 여부를 결정하는 메서드, false 리턴시 업데이트 하지 않습니다.

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

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

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

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

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


3. 언마운트 단계

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

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



'Web Front > React.js' 카테고리의 다른 글

[React] Component LifeCycle API정리  (0) 2018.08.07
[React] create-react-app으로 React App 만들기  (0) 2018.08.06

1. create-react-app 설치

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

yarn global add create-react-app


2. 프로젝트 생성

create-react-app project-name


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

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


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

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


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



3. 실행

yarn start


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


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

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


끝!!

'Web Front > React.js' 카테고리의 다른 글

[React] Component LifeCycle API정리  (0) 2018.08.07
[React] create-react-app으로 React App 만들기  (0) 2018.08.06

1. 로컬 저장소 만들기

1. Git init

2. Git add


3. Git commit


2. 원격 저장소에 올리기

1. Git Remote Add

원격 저장소의 URL을 추가합니다. 앞으로 원격 저장소에 Push할 때에 이 URL을 사용하게 됩니다. 


2. Git push

끝!