리액트 UI 데이터

이 포스팅은 [실전 리액트 프로그래밍]을 공부하고 정리한 내용으로, 대부분의 내용이 해당 서적에서 나왔음을 밝힙니다.

챕터3은 UI 라이브러리인 리액트에서 UI 데이터를 관리하는 방법을 가르쳐준다.
리액트에서는 상탯값(state)과 속성값(prop)으로 UI 데이터를 관리한다.
정리하면, UI 데이터 = state + prop 이라고 할 수 있다.

리액트에서는 UI 데이터가 변경되면 렌더함수(render)를 이용해서 화면을 자동으로 갱신한다.

UI 데이터

1) state
컴포넌트의 state은 해당 컴포넌트가 관리하는 데이터이다.
상태값을 변경할 때는 setState 메서드를 사용하며,
setState 메서드에 첫번째 파라미터는 객체/함수가 사용될 수 있다.
ㄴ '객체'가 사용되면 기존 상탯값과 병합된다.
ㄴ '함수'가 사용되면 해당 함수는 자신이 호출되기 직전의 상탯값을 매개변수로 받는다. (setState 메서드가 비동기로 동작함으로써 사용하는 방식)
setState 메서드의 두번째 파라미터는 상탯값 변경 후에 사용되는 콜백함수이다.
2) prop
컴포넌트의 prop은 부모 컴포넌트로부터 전달받는 데이터이다.
prop은 불변 객체이므로 값을 변경하려고 시도하면 에러가 발생한다.

---

Q) 일반적으로 상위 컴포넌트가 렌더링 되면, 자식 컴포넌트는 자식 컴포넌트가 가진 속성값의 변화와 관계없이 렌더링된다. 이러한 렌더링 이슈를 해결하기 위해서 어떻게 하는가?

A) 컴포넌트를 만드는 2가지 방법 모두 각각의 방식이 있다.

1) 클래스형 컴포넌트

function Title(props) {
  return <p>{props.title}</p>;
}
export default React.memo(Title);
// React.memo 함수의 인자로 함수형 컴포넌트를 입력하면
// 해당 컴포넌트의 상태값이나 속성값이 변경되는 경우에만 렌더링이 된다.

2) 함수형 컴포넌트

export default class Title extends React.PureComponent {
  render() {
    return <p>{this.props.title}</p>;
  }
}
// 컴포넌트를 만들때, React.Component가 아닌
// React.PureComponent를 상속해서 사용하면
// 해당 컴포넌트의 상태값이나 속성값이 변경되는 경우에만 렌더링이 된다.

---

참고로, 클래스형 컴포넌트는 리액트 내부에서 인스턴스로 존재한다.
각 인스턴스는 자신만의 메모리 공간을 갖고 있기 때문에, 같은 컴포넌트라고 하더라도 자신만의 상탯값이 존재한다.

---