ReactJS) Component구성요소, 생명주기

* React Component

• JSX: JavaScript + XML - js에 xml 을 추가한 확장형 문법 (js와 html을 동시에 작성할 수 있다)

컴포넌트

• 기존 웹 프레임워트 MVC : 정보, 화면, 구동코드를 분리하려 관리.

• Model(정보), View(화면), Controller(구동 컨트롤러)

⇒ 이 방식은 코드관리에 효율성이 높으나 MVC 각 요소의 의존성이 높아 재활용은 어려웠다.

*컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용도 할 수 있고 컴포넌트를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.
(ex) 다양한 모양의 블록을 조립)

1. 데이터를 전달하는 프로퍼티

• 상위 컴포넌트에서 하위 컴포넌트에 값을 전달할 때 사용

• 이 때 프로퍼티 값은 수정할 수 없다.

• 문자열 프로퍼티 사용하기

• 프로퍼티의 자료형을 선언하는 방법은 리액트에서 제공하는 prop-types를 이용하면 된다.

• 다양한 프로퍼티가 있다 (숫자, 불리안, 객체, 함수.... etc)

2. 컴포넌트 상태 관리하기

• 값을 저장하거나 변경할 수 있는 객체,

*state 사용시 주의할 점

• 생성자에서 반드시 초기화해야한다.

• state값을 변경할 때는 setState() 함수(상태관리 함수)를 반드시 사용해야한다.

• setState() 함수는 비동기로 처리되며, setState() 코드 이후로 연결된 함수들의 실행이 완료된 시점에 화면 동기화 과정을 거친다.

state값은 setState() 함수로 변경한다.

• render() 함수로 화면을 그려주는 시점은 리액트엔진이 정하기 때문

• state값을 직접 변경해도 render() 함수는 새로 호출되지 않는다

• setState() 함수를 호출하여 state값을 변경하면 리액트 엔진이 자동으로 render()함수를 호출하므로 화면에 변경된 state값을 새롭게 출력할 수 있다

setState() 함수의 인자로 함수를 전달하면 이전 state값을 쉽게 읽을 수 있다.

• setState() 함수의 인자로 함수를 전달하면 이전 state값을 따로 읽는 과정을 생략할 수 있다

클래스 인스턴스 변수와 forceUpdate() 함수로 state관리하기

• forceUpdate() 함수는 강제로 화면을 새로고침한다

3. 컴포넌트의 생명주기

• 컴포넌트의 생성부터 소멸까지의 과정

• 컴포넌트는 생명주기마다 함수를 갖고 있다, 이 함수들을 이용하면 특정 시점에 원하는 동작을 하도록 만들 수 있다.

• 생명주기 함수는 render()함수를 포함해 8종의 함수가 있다.

• 생명주기 함수는 리액트 엔진에서 자동으로 호출한다.

constructor→ getDerivedStateFromProp→ render → componentDidMount→ 생성완료(생성과정)→ getDerivedStateFromProp→ shouldComponentUpdate→ render → getSnapshotBeforeUpdate→ componentDidUpdate→ 갱신완료(갱신과정)→ componentWillUnmount→ 소멸완료(소멸과정)

1. constructor(props) 함수

• 맨 처음에 생성될 때 한번만 호출, 상태를 선언할 때 사용

• 항상 super(props)함수를 가장 위에 호출해야한다 :: 프로퍼티와 생명주기상태등을 초기화하는 중요한 과정을 포함하고 있다.

2. render()함수

• 데이터가 변경되어 새 화면을 그려야할 떄 자동으로 호출되는 함수

3. static getDerivedStateFromProps(props, state) 함수

• 정적함수, 함수안에서 this.props나 this.state같은 방법으로 프로퍼티나 state값에 접근할 수 없다

4. componentDidMount() 함수

• render()함수가 JSX를 화면에 그린 이후에 호출되는 함수

• 만약 컴포넌트가 화면에 모두 표현된 이후 해야하는 작업들은 여기서 한다

5. shouldComponentUpdate(nextProps, nextState) 함수

• 프로퍼티를 변경하거나 setState()함수를 호출하여 state값을 변경하면 '화면을 해로 출력해야 하는지' 판단하는 함수

• 화면을 새로 출력할지 말지 판단하며, 데이터 변화를 비교하는 작업을 포함하므로 리액트 성능에 영향을 많이 준다

• 화면변경을 위해 검증작업을 해야하는 경우 이 함수를 사용

6. getSnapshotBeforeUpdate(prevProps, prevState) 함수

• 컴포넌트의 변경된 내용이 가상 화면에 완성된 이후 호출되는 함수

• 컴포넌트가 화면에 실제로 출력되기 전에 호출되므로 화면에 출력될 엘리먼트의 크기 또는 스크롤 위치 등의 DOM정보에 접근할 때 사용된다

7. componentDidUpdate(prevProps, prevState, snapshot) 함수

• 컴포넌트가 실제화면에 출력된 이후 호출되는 함수

• 부모 컴포넌트로부터 전달된 이전 프로퍼티(prevProps)와 이전 state값(prevState)과 함께 getSnapshotBeforeUpdate() 함수에서 반환된 값(snapshot)을 인자로 전달받는다.

• 이 값들을 이용하여 스크롤 위치를 옮기거나 커서를 이동시키는 등의 DOM정보를 변경할 때 사용

8. componentWillUnmount() 함수

• 컴포넌트가 소멸되기 직전에 호출되는 함수

• 보통 컴포넌트에서 감시하고 있는 작업들을 해제할 때 필요한 함수

  [참고] DO-IT-REACT