[react] 리액트 되돌아보기

ajax 통신에 대하여

ajax 이전의 통신은 매번 주소를 통해 서버에서 페이지를 받아왔다면 한주소내에서 이제는 특정객체를 통해서 리로드 없이 데이터를 제이슨형식으로 받아옴 그리고 한화면의 데이터 변경사한ㅇ만 적용시키는 식으로 변화시킴

 

이러한 환경속에서 스마트폰등장으로 spa 의 요구가 높아지고 정보의 일방공유가 아닌 상호 제공으로 다이나믹한 웹들의 등장 그과정속에서 리액트 나옴 

 

버츄얼돔 > 다이나믹한 웹에서 화면변화 잦아짐 화면변화를 하나마다 브라우저 렌더링(리플로우,리페인트) 과정이 일어나게됨 변화를 잡아내는 단위를 묶을수 없을까 고민의 결과 버츄얼 돔이라는 개념을 만들어내고 리렌더링 조건 이전의 변화들을 모아 버츄얼 돔과 비교(diff 알고리즘)해서 변경사항들을 종합해서 변경시키고 그걸 실제돔에 적용함(react-dom 라이브러리의 역할 react 와 역할이 구분되어있어서 추후에 native로 이용가능??)  그니까 공간 하나 더쓰면서 늘어나고 대신에 횟수가 줄어든거지

 

버츄얼돔 트리구조의 변경사항 체크할때 diff 알고리즘을 통해 n^3  => n 으로 줄이는데 이때 전제조건을 통해서 줄여줌 그래서 사용할때 전제조건을 고려해줘야됨 근데 그 전제조건이 노드의 타입이나 키가 바뀌면 그냥 바뀐걸로 치고 하위 그냥 다바꿈 그래성 동일선상의 노드들은 다른 키값을 가지고 있어야함

 

브라우저의 렌더와 리액트의 렌더의 차이점

브라우저는 html css 로 만든 렌더트리를 리플로우 리페인트 과정을 통해 화면에 보여주는 활동을 렌더라고 하며

리액트에서 렌더는 가상돔의 변경사항을 확인하고 적용하는 과정이다.

 

cra > 리액트용 린트설정, 바벨설정(구버전 라이브러리에서 사용가능하도록 최신문법컴파일해줌, ast(문법적의미부여한 트리구조의 자료구조)로 변환해줌 , jsx 사용가능), webpack(모듈번들러) 설정 어려운거 대신해줌 ㅎㅎ

 

컴포넌트는 순수함수임 동일인풋 동일 아웃풋 해줘야됨 외부영향이 없게 구성해줘야됨 뭐 컴포넌트 단위로 재사용 하려면 당연한 부분이기는 함 항상 다른곳에서 사용한다라면 이라고 가정하고 생각하고 쓰면 될듯 이벤트발생이랑 데이터페치해오더라도 유지잘되게

 

스테이트에대하여 > 리액트는 모든변화를 리렌더 하지 않음 변화를종합하는 때가 되야 변화를 종합해서 비교하고 반영함 그럼 그때가 언제냐가 즉 리렌더링이 언제일어나는가 하는 질문이야 근데 그중하나가 스테이가 변할때야 그래서 리렌더링과 연관있는 상태의 경우 변수로 관리하지 않고 스테이트로 관리함 setstate 해서 이전 state 와 다르면 리렌더 라고 생각하면됨 근데 이때 prevstate 와 비교에서 고려할점이 원시형 타입과 참조형의 차이를 고려해줘야 됨 비교가 shallow compare 형식으로 가장 상단의 참조만 비교하니까 참조형의 경우 그부분을 잘 고려해서 복사해서 setstate 해줘야 하고 state 자체를 immutable 하게 관리를 해줘야됨 

 

state 비동기 >.그리고 스테이트 batched update 됨 한이벤트에서 일어난 setstate들은 큐에서 처리되고 prevstate 반영하려면 콜백함수 전달해줘야됨 안그럼 마지막 꺼만 반영됨 > 이벤트하나에 리렌더 한번으로 막아줌

 

props , 컴포넌트구조 > 필요한거 다내려주는 거도 좋은데 항상 확장성 고려하면서 해보자