React Component 사용 예제

#01, 02는 .jsx에 html, css 적용하기라 패스

---

#03 Component 사용하기

Component란, 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위. Component를 파일 단위로 작성한 후 필요한 위치에서 임포트 해 사용할 수 있다.

---

#04 생명주기 함수 render() 사용하기

React에서 생명주기란, Component의 생성, 변경, 소멸 과정을 뜻한다. #04~#07에서 학습할 render(), constructor(), getDerivedStateFromProps(), componentDidMount() 함수들은 '생성' 과정에 속한다.

render()는 return되는 html 형식의 코드를 화면에 그려주는 함수이다. 화면 내용이 변경되어야 할 시점에 자동으로 호출된다.

---

#05 생명주기 함수 constructor(props) 사용하기

constructor(props) 함수는 생명주기 함수 중 가장 먼저 실행되며, 처음 한 번만 호출된다. component 내부에서 사용되는 변수(state)를 선언하고 부모 객체에서 전달받은 변수(props)를 초기화 할 때 사용한다. super() 함수는 가장 위에 호출해야 한다.

---

#06 생명주기 함수 static getDerivedStateFromProps(props, state) 사용하기

getDerivedStateFromProps(props, state) 함수는 constructor() 함수 다음으로 실행된다. component가 새로운 props를 받게 됐을 때 state를 변경해준다. App.js에서 전달한 prop_value 변수를 props.prop_value로 접근해 가져올 수 있다.

---

#07 생명주기 함수 componentDidMount() 사용하기

componentDidMount() 함수는 작성한 함수들 중 가장 마지막으로 실행된다. render() 가 html 코드를 화면에 그려준 후 실행된다. 화면이 모두 그려진 뒤 실행되어야 하는 이벤트 처리, 초기화 등 가장 많이 활용된다.

---

#08 생명주기 함수 shouldComponentUpdate() 사용하기

shouldComponentUpdate() 함수는 component의 '변경' 과정에 속한다. 여기서 변경이란 props나 state의 변경을 말한다. componentDidMount() 함수는 '생성'단계의 함수 중 가장 마지막으로 실행된다. setState()함수가 state의 변경을 일으켰다. 따라서 '변경' 단계의 생명주기 함수 shouldComponentUpdate()가 실행된다. 이 함수는 boolean을 반환하는데, 반환값이 true일 경우 render()함수를 한 번 더 호출한다.

---

순서 흐름도

constructor() -> getDerivedStateFromProps() -> render() -> componentDidMount() -> (변경 있을 시) shouldComponentUpdate() -> render()

---

[출처 : 초보자를 위한 리액트 200제(정보문화사)]