코드스테이츠(state, Lifecycle)

state란

state 뭔가 마음에드는 단어입니다. 상태, 라는 뜻이며 한 컴포넌트의 state는 다른 컴포넌트의 state에서 수정이 불가능합니다 또한 하위 컴포넌트로 state를 props로 전달해줘야만 가능합니다 (주의 state에 직접 접근 X, 초기설정 필수) 여기서 props는 컴포넌트 내부의 immutability data(불변성 자료)
긍까 설명하자면 유동적인 데이터를 가능하게 해주는? '상태' 이다.

여기서 재밋는점은 모든 데터를 상태로 둘 필요가 없다고 합니다 상태는 항상 최소화 해서 애플리케이션이 복잡해지지않도록 주의하고 상태로 두어야 하는지 여부는 아래와 같이 판단할수있습니다
1.부모로부터 props를 통해 전달되는지
2.시간이 지나도 변하지 않는지
3.컴포턴트 안의 다른 state나 props를 가지고 계산이 가능한지
위의 3가지 값이 true면 !== state 입니다.

상태 끌어올리기

React는 단 방향 데이터 흐름입니다 그러므로 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 '역방향 데이터 흐름'과 같이 보일수도 있어서 상태를 끌어올림으로써 해결할수 있습니다

import React from "react";

export default class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "날 바꿔줘!"
    };
    this.handleChangeValue = this.handleChangeValue.bind(this);
  }

  handleChangeValue() {
    this.setState({
      value: "보여줄게 완전히 달라진 값"
    });
  }

  render() {
    return (
      <div>
        <div>값은 {this.state.value} 입니다</div>
        <ChildComponent handleButtonClick={this.handleChangeValue} />
      //여기다가 상태를 변경하는 코드를 작성하고 값은 바꿀 값으로 props를 받아준다.
          </div>
    );
  }
}

function ChildComponent({ handleButtonClick }) {
  //여기의 인자로 상태를 변경하는 것을 받아준다.
  const handleClick = () => {
    // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
    // 상태를 변경할 이벤트?를 걸어준다.
    handleButtonClick();
  };

  return <button onClick={handleClick}>값 변경</button>;
  //온 클릭에다가 실행을 걸어준다.
}

lifecycle

그런 말이 있다고 합니다 'lifecycle은 인생과 같다.' 컴포넌트의 상태는 생성, 업데이트, 제거등 으로 나타나고 실행하는 순간마다 컴포넌트는 새롭게 랜더링 됩니다. lifecycle의 메소드는 아래와 같습니다
-Didmount = 화면등장!
-Didupdate = 새로운 상태!
-Didmount = 사라지기 전!

fetch를 이용하여 AJAX 요청을 한 것과 같이, 함수 내에서 일어나지 않는 연산이지만 함수에 영향을 미치는 것을 sideEffect라고 한다.