[TIL] Class 컴포넌트와 생명주기 메소드

Prop-Types

Component 가 외부와의 데이터를 주고받기 위해 props를 사용했는데, 이럴 경우 props의 Type 을 확인 해 줘야 하는 필요성이 생긴다.
(물론 애플리케이션의 크기가 작을 때는 props를 주고받는 것이 한눈에 보이기 때문에 필수적 이지는 않지만 Type 이 변할 수 있는 JavaScript의 특성상 Type 을 확실히 설정해 주고 이를 올바르게 사용하는 것이 효과적일 것이다.)

function Food({ name, picture, rating }) {
  return (
    <div>
      <h2>I like {name}</h2>
      <h4>{rating}/5.0</h4>
      <img src={picture} alt={name} />
    </div>
  )
}

Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number,
}

Food() 컴포넌트에서 받는 props 값의 타입을 체크하는데 사용된다. 예를 들어 Food() 컴포넌트에서 name이라는 props의 값이 string 타입인지 아닌지를 확인할 수 있다 그리고 반드시 값이 있어야 할 경우 isRequired 사용한다.

클래스 컴포넌트

class App extends React.Component {
state = {
count: 0
};
add = () => {
console.log("add");
};
minus = () => {
console.log("minus");
};
render() {
return (
<div>
  <h1>The number is: {this.state.count}</h1>
  <button onClick={this.add}>Add</button>
  <button onClick={this.minus}>Minus</button>
</div>
);

클래스 형 컴포넌트에서는 extends로 React.Componet를 상속받아야 한다 그리고 render() 함수가 필수로 정의되어야 하며 클래스 형 컴포넌트를 사용하는 이유는 **state(상태관리)**를 사용할 수 있기 때문에 클래스 컴포넌트를 사용한다(하지만 React Hook 이 생기면서 함수형 컴포넌트에서도 state가 변경 가능하도록 업데이트되었다)

State

state는 객체 형식이며 유동적인 데이터를 사용할 때 쓴다 즉 데이터가 변경이 가능하며 초깃값을 필수로 설정해야 한다 state를 직접 변경하면 안 되므로 setState를 호출하여 사용해야 하는데 state가 변경될 때 마다 refresh 하고 리렌더링을 하는데 만약 setState를 사용하지 않고 직접 조작하면 리렌더링이 되지 않는다
(setState란? 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다.)

class App extends React.Component {
  state = {
    count: 0,
  }
  add = () => {
    this.setState({ count: this.state.count + 1 }) // this.state = 5 <- 이런식을 직접 조작 x }; minus=()=> {
    this.setState({ count: this.state.count - 1 })
  }
  render() {
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    )
  }
}

이렇게 하면 add 버튼을 클릭하면 숫자가 오를 것이고 Minus 버튼을 클릭하면 숫자가 내려갈 것이다 하지만 이 방법은 그렇게 좋은 방법이 아니다.

class App extends React.Component {
  state = {
    count: 0,
  }
  add = () => {
    this.setState(current => ({ count: current.count + 1 }))
  }
  minus = () => {
    this.setState(current => ({ count: current.count - 1 }))
  }
  render() {
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    )
  }
}

이렇게 하는 것이 React에서 외부의 상태에 의존하지 않는 가장 좋은 방법이다 setState에 객체 대신 함수를 전달해 주는 것이 항상 setState가 최신의 state 값을 사용하도록 보장해 주는 것이다 매 순간 setState를 호출할 때마다 react는 새로운 state와 함께 렌더링을 할 것이다

Life Cycle Method

기본적으로 react가 component를 생성하는 그리고 없애는 방법이며 이것을 컴포넌트는 생성 → 업데이트 → 제거 단계를 차례로 겪는 것을 **생명주기 (Life Cycle)**이라 한다 이 생명주기에서 사용하는 메서드를 Life cycle method라 하며 여러 메서드가 있으며 필요 시점에 메서드를 호출하여 특정 시점에 코드가 실행되도록 설정할 수 있다.

Munting(생성)

constructor() → JS에서 class를 만들기 전 호출되는 것(컴포넌트가 websie에 갈 때 호출됨)
render() → 컴포넌트 호출
componentDidMount() → 컴포넌트가 render 한 후 호출

Update(업데이트)

componentDidUpdate → render를 호출한 다음 업데이트가 완료되면 호출함

Unmount(제거)

componentWillUnmount → 컴포넌트가 떠날 때 호출(다른페이지로 이동할 때)