45일차 TIL 210510 React4

0. 사알짝 재밌었다. 뭔가 진짜 뭔가를 만드는듯한 느낌이 들었다…!!😤

1. 4일 내내 리액트를 보고있으니 그래 조금 익숙해진것 같기도 허다 - 데이터 흐름

  • 하나의 컴포넌트는 한가지 일만 한다.
  • 컴포넌트는 컴포넌트 바깥에서 props 를 이요ㅕㅇ해 데이터를 마치 인자 혹은 속성처럼 전달 받을 수 있다.
  • 데이터를 전달하는 주체는 부모 컴포넌트. 데이터의 흐름이 하향식( top - down ) 이다.
  • 단방향 데이터 흐름( one-way data flow )

2. state 가 아닌 경우

  • 부모로 부터 props 를 통해 전달 되는 경우 state 가 아님
  • 시간이 지나도 변하지 않으면 state 가 아님
  • 컴포넌트 안의 다른 state 나 props 를 가지고 계산이 가능하면 state 가 아님
  • 상태의 위치 : 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면 공통 부모에 상태를 위치해야 한다.
  • state 는 캡슐화 되어 있다. state 가 소유하고 설정한 컴포넌트 이외에는 어떠한 컴포넌트에도 접근 할 수 없다.
  • setState는 단순히 상태를 바꾸는 함수가 아니라 상태로 바꿔달라고 요청해주는 함수이다. 성능적인 이유 때문에 리액트에서는 비동기적으로 업데이트가 된다.
  • 기존 상태를 참고 할 필요가 있는 경우는 setState인자로 함수를 받아서 써도 된다.
this.setState((state=>{
  return {quality: state.quantitiy +1 };
});
  • 역방향 데이터 흐름 추가 : 부모 컴포넌트의 상태가 하위 컴포넌트에 의해 변할 때 ex ) 새로운 트윗 추가
  • 이떄는 상태를 변경시키는 함수를 하위 컴포넌트에 props로 전달해서 해결할 수 있다.

3. State 끌어올리기 ( Lifting State Up )

  • 상위 컴포넌트의 ‘상태를 변경하는 함수’ 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다
  • 이것이 상태끌어올리기! 😳
  • 하위 컴포넌트에 전달할때 props 내용은 내가 적절히 지어주면 됨
class ParentComponent extends React.Component {
  // ...생략...

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

  render() {
    return <div>
      <div>값은 {this.state.value} 입니다</div>
      <ChildComponent handleButtonClick={this.handleChangeValue} /> // 💡
    </div>
  }
}

그러고 나서 ChildComponent 는 props 로 전달 받은 함수를 컴포넌트 내에서 실행할 수 있게 된다.

function ChildComponent({ handleButtonClick }) {
  const handleClick = () => {
    // Q. 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
    // A. 인자로 받은 상태 변경 함수를 실행하자!

    handleButtonClick()
  }

  return (
    <button onClick={handleClick}>값 변경</button>
  )
}

Updated: