state, props, 리액트 리렌더링

1. state VS props

props(“properties”의 줄임말) 와 state는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. 
props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

ⅰ.  state 와 props의 공통점

• 모두 일반 JS 객체
• 모두 렌더링 업데이트를 트리거함
  ❓트리거(trigger)란?
     데이터베이스가 미리 정해놓은 조건을 만족하거나 어떤 동작이 수행되면 자동적으로 수행되는 동작

ⅱ. state(상태)

• 가변 데이터
• 구성 요소에 의해 유지
• 변경 가능

ⅲ. props

• 불변의 데이터
• 부모컴포멈트로부터 전달됨
• 변경 불가함

2. 리렌더링 

ⅰ. 렌더링이란?

• 리액트에서 렌더링이란 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것을 의미

ⅱ. 리렌더링이란?

• 리액트에선 초기에 한번 렌더링을 진행하고, 그 이후에 특정 조건이 발생하면 다시 레너링을 진행하는 것을 리렌더링이라고 함
• 리렌더링이 되는 조건
  • 내부 상태(state) 변경시
  • 부모에게 전달받은 값(props) 변경시
  • 중앙 상태값(Context value 혹은 redux store) 변경시
  • 부모 컴포넌트가 리렌더링 되는 경우
• 무분별한 렌도링이 일어날 경우 성능 저하가 일어나게 되기 때문에, 이러한 조건들을 기준을 두고 코드를 작성하여 무분별하게 렌더링이 일어나지 않도록 주의 해야함
• redux store 변경시 자동으로 리렌더링이 되는 이유는, 리덕스 스토어가 < Provider store={store}>로 컴포넌트를 감싸주었을 때, 스토어 상태가 변경될 때마다 이를 참조하는 컴포넌트들이 리렌더링이 될 수 있도록 react-redux 라이브러리가 자동적으로 컴포넌트 들의 렌더 함수들을 subscribe 해주기 때문

ⅲ. 리렌더링 과정

1. 조건을 통해 컴포넌트 리렌더링
2. 구현부 실행 = props, hook실행, 내부 변수 및 함수 재생성
3. return 실행, 렌더링의 ㅣ작
4. 렌더 단계(Render Phase): 새로운 가상 DOM 생성 후 이전 가상 DOM과 비교해 달라진 부분을 탐색하고 실제 DOM에 반영할 부분을 결정
5. 커밋 단계(Commit Phase): 달라진 부분만 실제 DOM 반영
6. useLayoutEffect: 브라우저가 화면에 프린트하기 전에 useLayoutEffect에 등록해둔 effect(부수 효과 함수)가 동기적으로 실행되며, 이때 state, redux store등의 변경이 있다면 한번 더 리렌더링
7. Print: 브라우저가 실제 DOM을 화면에 보여줌
8. useEffect: 업데이트가 되어 화면에 그려진 직후, useEffect에 등록해둔 effect(부수 효과 함수)가 비동기로 실행됨

참조.

[React] 렌더링(리렌더링)

 

리액트 입문주차 강의를 들으면서 1년이라는 시간을 쉰다는게 정말 짧으면서도 긴시간이였다는걸 깨닫게 되었다
예전엔 다 알고 있던 개념이 정확하게 기억이 나지 않고 아주 조금만 기억이 나서 그런지 강의를 들으면서 그 개념하고 왠지 모르겟는데 헷깔리게 되서 더 안좋은거 같다...
그래도 더 열심히 듣다보면 예전에 했던 내용도 정확하게 기억할꺼라고 생각이 들고 그 당시에 완벽하게 완성하지 못했던 disneyplus 클론도 완성할수 있을꺼라고 생각이 들었다
이번에 오랜만에 todolist를 만들게 되었는데 예전에 만들었을때보다 컴포넌트 구조를 조금더 세분화해서 코드의 재활용성을 높이고 싶다는 욕심으로 인해서 너무 오래시간을 또 낭비한거 같다는 생각이 들고 난후는 앞으론 그러한건 더 정확하고 완벽하게 리액트를 공부하고 난 후에 다시 한번 해보아야겠다는 생각이 들었다
todolist를 다 만든 후 페어와 함께 level2과제를 진행했는데 페어를 한다는것이 더 조심스러워야 하고 내 의견을 너무 강력하게 어필했다는 생각이 들어서 조금은 그러한것을 고쳐야 한다고 생각이 들었다.