[React] 리액트에 대해서

민초의지배자 2021. 12. 9. 15:55

프론트엔드를 하려면 라이브러리와 프레임워크를 다룰 줄 알아야 한다길래
리액트,앵귤러 뷰 중에 이리저리 알아보다가
솔직히 입문자가 보기에 다 똑같아 보였기에 제일 많이 추천하고 많이 사용하는
리액트를 선택해 배우고 있다.

본 포스팅은 개인적 공부를 위해 아래 글을 참고해 정리한 것입니다.
https://m.blog.naver.com/z1004man/221878557383
https://velog.io/@dojunggeun/React-interview-questions-15

1. 리액트의 장점

https://www.eduzek.com/reacts-virtual-dom-vs-real-dom/

1) Virtual DOM으로 인해 빠른 속도

- REACT의 Virtual DOM은 UI를 구성하는 DOM트리를 메모리에 보관하고 업데이트가 일어나면
이전 돔 트리랑 비교해서 업데이트할 요소의 목록만 골라 최소한의 업데이트가 일어나기에 효율적

2) component를 사용해서 유지 보수가 용이

- 리액트는 컴포넌트들로 이루어진 UI라이브러리인데, 각각의 컴포넌트는 각자 다른 한 가지의 기능을 수행하며
재 사용이 가능한 독립적인 녀석들
- 따라서 관리하기가 편하며, 반복되는 부분을 대체할 수 있고, 각 컴포넌트를 쌓아서 효율적으로 화면을 구성 가능하다.

3) 단 방향 데이터 흐름

- React는 한쪽 방향으로만 데이터가 전달되며 상위 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 넘겨 줄 수 있다
- 따라서 데이터를 추적하기 쉽고 디버깅을 쉽게 해준다.

2. JSX란?

1) 정의

- JSX는 JavaScript XML의 약자로 리액트 내부에서도 쉽게 HTML코드를 작성하게 해주는 자바스크립트 확장 문법이다

2) HTML과의 차이점

- JSX는 JS 코드이기에 함수나 비즈니스 로직 사용 시 { } 안에 작성 해 줘야 한다.
- JSX는 두 개 이상의 자식 노드를 만들때는 반드시 하나의 상위 노드로 묶어 줘야 한다
- class 지정 시 className으로 지정해 줘야함

<div className="sidebar" />

3. 함수형 컴포넌트와 클래스형 컴포넌트의 차이

https://www.youtube.com/watch?v=CIri5LG1Hfg

1) 클래스,함수 컴포넌트

- 리액트는 컴포넌트를 만드는 방법으로 클래스, 함수 두가지를 사용
- React16.8 (Hooks)가 도입되기 이전에는 주로 Class형을 사용했는데 이유는 내부에 데이터를 저장 할 수 있고, 생명 주기 메소드를 사용 하기 위해서이다.
- 이후 hooks가 도입되며 funtion형 컴포넌트에도 state와 라이프 사이클 메소드를 가질 수 있어졌다.

2) 클래스형 컴포넌트

- 객체지향 프로그래밍의 구조를 띄고 있으며, state 초기화 위해서는 constructor(생성자) 함수를 필요로 한다.
- 생성자 함수를 작성해 state를 초기화 하기 때문에 함수형에 비해 코드가 길어지고 사이즈가 커질 수 있음
- state기능 및 라이프 사이클 기능을 사용 가능
- render 함수가 꼭 있어야 하며 그 안에서 보여 줄 JSX를 반환해야 한다.

3) 함수형 컴포넌트

- hooks를 사용해 생성자 함수를 통해 state를 초기화하지 않아도 사용이 가능함
- 선언이 클래스형에 비해 좀 더 편하고 메모리를 덜 사용함
- 프로젝트 완성 후 배포 할 때도 함수형 사용하는 것이 파일의 용량이 더 작음

4) 둘 중 어느 것 사용?

- 리액트 훅은 상대적으로 최신에 도입된것으로 이미 기존 많은 프로젝트들이 클래스형 컴포넌트를 가지고있을것임
따라서 기존것 이해하는것도 중요하고 최신꺼도 이해하는게 중요, 그래서 둘 다 알아둬야함
- 다만 내 컴포넌트가 스테이트가 있고 그 상태에 따라 주기적으로 업데이트 되야한다면 클래스쓰고,
내 컴포넌트의 상태가없고 항상 정적으로 데이터 표기된다면 함수컴포넌트 사용 권장

4. State, Props?

1) state

- ui를 위한 데이터를 보관하는 오브젝트로, 이 state 데이터에 업데이트가 발생하면 리엑트가 render를 호출해서
rerender를 진행한다.
- rerender를 진행해도 내부의 데이터가 일정하게 유지된다.
- 이 state를 직접 변경하는것은 금지되며 반드시 setState를 이용해서 변경해야줘야한다.

2) psops

- 부모 컴포넌트에서 자식 컴포넌트로 데이터 넘겨주기 위해서 props 생성하는데 이는 태그 내부에
<Contatiner hello={hi} /> 이런식으로 넘겨줄 수 있다, {hi}는 현재 컴포넌트 state에서 만들어 줄 수 있다.
- props는 전달받은 자식컴포넌트에서는 수정이 불가능하다.