React 공식 문서 읽기 - 2회: 주요 개념(2)

오늘도 드가보자

Components와 Props – React

---

props는 읽기 전용이다

문서 피셜 'React는 매우 유연하지만 한가지 엄격한 규칙이 있다'는데,
그게 바로

모든 React 컴포넌트는 자신의 props를 다룰 때
반드시 순수 함수처럼 동작해야 합니다.

---

순수 함수 (Pure function)

순수함수란 항상 동일한 입력값에 대해
동일한 결과를 반환한다.

입력값을 바꾸지도 않으며,
내부 상태에 따라 결과값을 바꾸지도 않는다.

---

함수형 컴포넌트를 클래스로 변경하기

먼저 어떤 점을 짚어야 하는지 보고,
예제를 통해 알아보자.

1. 클래스는 React.Component를 상속한다.
2. 함수형 컴포넌트의 return은 render()가 된다.
3. render()에서는 JSX를 반환한다.
4. props는 this.props가 된다.

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

이런 함수형 컴포넌트가

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

이런 식으로 변경된다.

---

생명주기와 클래스 메서드

전에 한번 생명주기에 대한 내용을 다룬 적이 있다.

React.js의 LifeCycle (with Hooks)

---

마운트, 언마운트

마운트: 컴포넌트가 처음 DOM에 렌더링 될 때마다. 
언마운트: 컴포넌트가 DOM에서 삭제될 때마다

만약 내가 생성 -> 삭제 -> 생성 -> 삭제한다면,
마운트 -> 언마운트 -> 마운트 -> 언마운트
가 발생한다.

---

State를 사용할 때 주의할 점

1. state를 직접 변경하지 말 것

state를 바꿀 때는 항상 setState함수를 이용하도록 한다.
hook을 사용한다면 set함수를 이용하자.

직접 교체를 하게 되면 이전 값과 비교할 때
다르다고 판단하지 못한다.

---

2. State 업데이트는 비동기적일 수도 있다.

react는 setState가 호출 되면 다음 사이클에 state를 수정한다.
그 사이에 무슨 일이 벌어질지도 모르고,
가장 흔한 경우는
업데이트 하기전에 여러 함수가 호출되는 것이다.

---

3. 업데이트는 병합된다.

state에 a와 b라는 키와 값이 있다고 생각해보자.
내가 a만 수정한다면, a만 업데이트가 일어난다.

this.state = { a: 3, b: 4 }
setState({ a: 5 })
// 결과: { a: 5, b: 4 }

---

데이터는 하향식이다

부모 컴포넌트에서 자식 컴포넌트로 값을 내려준다.