리액트!!!
리액트는 라이브러리인가 프레임워크인가???
리액트는 자바스크립트의 라이브러리일까? 아니면 프레임워크일까...?
흠,,, 리액트를 만든 페이스북에서는 라이브러리라고 한다!!
그럼 왜 리액트를 사용할까?
컴포넌트 기반의 환경구성
리액트는 화면의 한부분을 컴포넌트라는 단위로 나누어 독립적으로 관리할수있다. 재사용성에 용이하다는 장점을 가진다
virtual DOM으로 인한 빠른 속도
virtual DOM은 UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념. React에게 원하는 UI상태를 알려주면 DOM이 그 상태와 일치하도록 한다.
SPA(single page application)
- 장점 : 서버 자원을 아낄수있음
- 단점 : 유저가 많아지면 서버의 자원이 많이 사용되며 불필요한 트래픽 낭비가 야기된다.
Virtual DOM(가상 DOM)은 뭐지,,,
DOM(Document Object Model)은 XML/HTML 문서에 접근하기 위한 일종의 인터페이스.
DOM은 새로운 요청이 있으면
HTTP response > DOM TREE > CSSOM TREE > RENDER TREE > Painting
위와 같은 형태를 거쳐 리렌더링된다. DOM의 속도는 느리지 않지만 요청량이 많아지면 속도는 저하될것이다. 여기서 버츄얼돔의 장점이 나온다.
리액트는 버츄얼돔을 사용하여 실제 돔에 접근하여 접근하는 대신!! 추상화시킨 자바스크립트 객체를 구성하여 사용하게되는데 마치 실제 돔의 가벼운 사본과 비슷하다
리액트는 데이터가 변화여 브라우저에 실제 돔을 업데이트할때 세가지 절차가 있다
- 전체 UI를 버츄얼돔에 리렌더링
- 이전 내용과 현재 내용 비교
- 바뀐 부분만 실제 돔에 적용
함수형 vs 클래스형
클래스 컴포넌트
- 객체지향 프로그래밍 구조를 띄며 state 초기화하기 위해 counstructor(생성자) 함수를 필요로한다.
- 생성자 함수를 통해 state를 초기화해야 하기 때문에 함수형 컴포넌트에 비해 코드가 길어지고 사이즈가 커질수있다.
- state 기능 및 라이프 사이클 기능을 사용할수있으며, 임의 메서드를 정의할수있다.
- render 함수가 필수이며 그안에서 보여줘야할 JSX를 반환해야한다.
함수형 컴포넌트
- hooks를 사용하여 생성자 함수를 통해 state를 초기화하지않더라도 사용가능
- 선언하기 좀 더 편하고 메모리 자원을 덜 사용한다.
- 제공되는 hooks 함수를 사용하고 필요시 커스텀 hooks를 생성하여 동작시킬수있다.
- 프로젝트 완성후 빌드시 배포할때도 함수형 컴포넌트를 사용하는것이 파일크기가 더 작다
함수형 컴포넌트는 state와 라이프사이클 api를 사용하는것이 불가능한게 단점이었는데 hooks를 통해 해결되었다.
props vs state
props
컴포넌트 속성을 설정할때 사용하는 요소다. props값은 해당 컴포넌트를 불러와 부모 컴포넌트에서 설정할수있음
state
컴포넌트 내부에서 바뀔수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기전용으로만 사용할수있다.
가끔 부모에게서 받은 props를 자식단계에서 부모단계로 전달하고싶을때도있다
이때는 Redux 글로벌 상태관리를 사용하자!
Redux는 뭘까...는 다음 챕터에서...
출처 : 프론트엔드 면접 질문 대비
