리액트(React)

✅ 리액트란

 

 

리액트는 사용자 인터페이스(User Interface)를 만들기 위한 자바스크립트 라이브러리이다. 페이스북에서 처음 개발하고 2013년 오픈 소스 라이브러리로 바뀌어 현재 많은 개발자들이 사용하고 있다.

 

 

👉 현재 페이스북, 넷플릭스, 에어비앤비 등 유명한 플랫폼이나 서비스등에서 리액트를 사용하고 있고, 프론트엔드 라이브러리이다.

 

 

✅ 리액트 특징

 

 

단방향 데이터 흐름: 리액트는 데이터가 단방향으로 흐르기 때문에 데이터 흐름을 추적하기 쉽다. 규모가 커질 수록 데이터의 흐름을 추적하기 힘든데 단방향 데이터 흐름을 통해 파악하기 쉬워진다.

 

컴포넌트(Component) 기반: 리액트는 독립적인 단위의 소프트웨어 모듈인 컴포넌트(Component)를 기반으로 페이지를 구성한다. 리애그의 컴포넌트는 자바스크립트 함수형(function), 클래스(class)로 이루어져 있다.

 

(최근은 클래스 기반보다는 함수 기반의 컴포넌트를 많이 사용하는 추세인 것 같다.)

 

👉 독립적인 특성으로 분리되어 동작하기 때문에 재사용이 가능하고 유지 보수에도 뛰어나다.

 

 

✅ 가상 돔(Virtual DOM)

 - Virtual DOM은 실제 브라우저에 보이는 DOM이 아닌 메모리에 가상으로 존재하는 DOM이다. 실제 DOM과 동기화되는 Virtual DOM은 변경된 부분만 추적하고 불필요한 리렌더링(re-rendering)을 방지한다.

 

 

✅ JSX(Javascript XML)

- JSX는 리액트에서 사용하는 자바스크립트 확장 문법으로 리액트를 사용하여 가독성을 높이기 위해 대부분 사용한다.

(필수는 아님)

 

 

✅ 리액트의 장단점

 

 

📝 장점

•  많은 JS 라이브러리와 호환
• 클래스 없이 함수만으로 컴포넌트 작성 가능
• 재활용성
• 개발 생산성이 높다
• 사용하는 기업이 많다
• SPA(Single Page Application)
• 빠른 업데이트와 렌더링 속도
• React Native로 모바일 환경도 개발할 수 있다.

 

 

📝 단점

• Javascript 배경지식의 선행이 필요함
• 데이터 모델링, 라우팅, Ajax 등 기능 지원이 안됨
• 로딩시간이 길다
• JSX 구문의 어려움
• 방대한 학습량
• 높은 상태 관리 복잡도(📌참고)

📌 React에서는 State라는 개념이 존재하는데 이는 컴포넌트의 상태를 의미한다. Virtural DOM에서 바뀐 부분만을 찾아서 업데이트 한다. 즉, State가 바뀐 부분만을 찾는 다는 것이도 React에서 State라는 개념은 매우 중요하다. 그래서 보통 큰 규모의 프로젝트의 경우 상태관리를 위하여 Redux, Recoil, Mobx와 같은 라이브러리들을 사용한다.