[TIL]React

naming·2021년 8월 3일
0

React를 class형이 아닌 함수형으로 공부하고자 한다.

  • 리엑트에서 말하는 데이터란 상태를 말한다.
    상태 = 데이터
    애플리케이션이 갖고 있는 상태(예를들면 전체 트윗 목록)
  • 단방향 흐름(데이터는 아래로 흐른다)
  • CRUD 웹사이트를 구성하는 기본적인, 필수요소이다.
    C : Create
    R : Read
    U : Update
    D : Delete

내부에 컴포넌트를 각각 읽어주게 와이어 프레임을 그려볼 수 있다.
최상위 컴포넌트와 하위컴포넌트들이 구성되어 있을 수 있다.
하위 데이터 내용이 바뀌면 전체트윗목록(예를들면 추가 후 트윗 전체 갯수)이 바뀌게 된다.

이는 React Lifting State Up

상태 끌어올리기를 해야 한다.
->상위 컴포넌트에서 변경된 상태(데이터)는 하위 컴포넌트로 전달

상태변경 함수를 통해서 아래로 내려줄 수 있다.

  • 최상위 컴포넌트에서는 상태변경 함수를 선언.
  • 하위 컴포넌에서는 상태변경 함수를 실행.

1) 변경되었는지를 리액트가 판단해서 하위 컴포넌트들이 다시 렌더링 된다.
2)변경되었는지 어떻게 판단?
3)상태를 변경할 떄 지켜야할 규칙이 있기 때문!
useState
그 규칙은 immutability하게 상태 변경해서 주소값이 다르니까 상태가 변경된걸 리액트가 감지를 하게 됨.
->virtual DOM

상태는 객체인데
만약 이 객체를 직접 수정을 하게 되면 주소값이 동일하게 되어서 바뀌었더는 것을 감지할 수가 없다.
객체 속성에 하나하나 접근하게 되면 시간복잡도의 효율성을 위한 작업이다.

데이터를 단방향으로 흐르게 한 이유 또한 효율성을 위한 점으로 볼 수 있을 것 같다.

profile
Encoding, Storage, Retrieval

0개의 댓글