[1] React의 대한 소개 - 기본 CS 영역

1. React란?

- React는 Javascript WebPack 기반으로 만들어진 SPA 템플릿 중 하나로, 모듈화가 쉬운 강점을 지님

- 현재 Virtual Dom으로 이용하여 해당 컴포넌트 부분의 대해 렌더링만 할 수 있는 장점을 지님

- 코드의 간결성과 전체 컴포넌트를 각각 쪼개어 사용에 용의하기 때문에 프론트엔드 개발자끼리 협업을 할 때 용의함

- 현재, nodejs를 이용하여 React 서버를 띄우기에는 용의하다는 점이 장점을 지니고 있음

- React 적용 전 선수 지식 : Javascript에 필요한 문법 (Javascript의 80퍼 이상 문법을 사용하고 있음)

 

2. JQuery와 React 사용 방식

필자는 JQuery와 React 둘다 사용해 본 경험을 바탕으로 각 차이점을 정리하고자 한다.

 

(1) JQuery의 장단점

- HTML 렌더링 후, JQuery의 각각의 기능을 수행한다.

- Dom을 직접적으로 다룬다.

- NPM 패키지가 React의 비해 적다.

- 페이지 이동시 전체 페이지를 출력하는 형태로 지니고 있다.

- React 대비 라이브러리의 용량이 적기 때문에 단순한 프로젝트에 용의하다.

- 복잡한 프로젝트일 수록 코드양이 길어져 설계가 잘못될 경우 React 대비 유지보수에 어려울 수 있다.

 

(2) React의 장단점

- SPA 프레임 워크 중 하나로, 크고 복잡한 프로젝트에 용의함

- HTML을 모듈화 할 수 있고, 각 컴포넌트를 나누기에는 용의하다.

- React 템플릿 설치가 비교적 간편하다.

- NodeJS로 통해 서버 실행이 즉시 실행 가능하다 (npm run start, serve -s build 등)

- 리액트만의 템플릿으로 활용하여 각 종 라이브러리 사용이 용의하다.

- JQuery의 라이브러리의 비해 React가 더 많이 지니고 있다.

 

 

3. React에서 자주 쓰는 용어

• Function Component : 함수형 컴포넌트로 옛날에는 Class Component 형식으로 사용하였으며, React 에서는 함수형 컴포넌트 사용을 권합니다. Hook이라는 개념이 생겼을 때, Class 형을 대처 가능하고 설정이 가능합니다.
• state : 리액트만에 변수 저장 방식, 리액트 라이브러리에 useState() 를 이용하여 Hook을 이용해 state 값을 저장 할 수 있습니다. 여기서 더 나아가 Redux를 이용하여 storage를 저장하여 새로 고침시 state 값을 유지 시킬 수 있습니다.
• axios : JQuery의 $.ajax() 역할을 수행하며, 주로 외부 API를 연동할 때 쓰이는 기능을 역할합니다.
• router : 해당 경로의 따라 컴포넌트 출력 시켜주는 역할을 합니다.
• redux : 주로 state 값을 유지시키는 역할을 수행 하고 있으며, SessionStorage 및 LocalStorage로 구성하고 있어 새로고침시 state 값을 유지 시키는 행위 (행위는 action을 이용하여 state 값을 제어 가능)
• 불가변성 : 데이터 변화가 없을시 데이터를 변경 시키기 않고, 특정 데이터만 변경 시킬 경우 객체를 복사하고 특정 데이터만 적용을 수행 시킨다.
• hook : 리액트 16.8 에 추가한 기술로, 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리
• useEffect : JQuery의 $.(document).ready() 역할을 해주는 것으로, html 렌더링 이후, 추가적으로 데이터 or API 랜더링 실행을 해주는 기능
• callback :다른 코드의 인수로서 넘겨주는 실행 가능한 코드, useCallback 사용 시 해당 컴포넌트가 렌더링 되더라도 그 함수가 의존하는 값(deps)들이 바뀌지 않는 한 기존 함수를 재사용 가능