[React] 리액트(React)란? 리액트의 특징, 장점과 단점
- Front-End/[React]
- 2023. 10. 20.
리액트(React)란?
리액트(React)는 사용자 인터페이스(User Interface)를 만들기 위한 자바스크립트 라이브러리이다.
리액트는 페이스북에서 처음 개발하고 2013년 오픈 소스 라이브러리로 바뀌어 현재 많은 개발자들이 유지보수하고 있다.
리액트를 이용해 웹 애플리케이션 혹은 모바일 애플리케이션을 개발할 수 있다.
페이스북, 넷플릭스, 에어비앤비, 레딧(Reddit) 등 유명한 서비스들이 모두 리액트를 사용했다. 그만큼 유명하고 많이 사용되는 프론트엔드 라이브러리이다.
리액트 특징
1. 단방향 데이터 흐름
리액트는 데이터가 단방향으로 흐르기 때문에 데이터 흐름을 추적하기 쉽다.
어플리케이션의 규모가 커질수록 데이터의 흐름을 추적하기 힘든데 단방향 데이터 흐름을 통해
데이터의 흐름을 파악하기 쉬워진다.
2. 컴포넌트(Component) 기반
리액트는 독립적인 단위의 소프트웨어 모듈인 컴포넌트(Component)를 기반으로 페이지를 조립한다.
리액트의 컴포넌트들은 자바스크립트 function 혹은 class로 이루어져 있다.
최근 모던 리액트에서는 클래스 기반보다는 함수(function) 기반의 컴포넌트를 선호하는 추세이다.
각 컴포넌트는 독립적으로 동작하며 분리되어 있기 때문에 재사용이 가능하고 유지 보수하기 용이하다.
3. 가상 돔(Virtual DOM)
virtual DOM은 실제 브라우저에 보이는 DOM이 아닌 메모리에 가상으로 존재하는 DOM이다.
실제 DOM과 동기화되는 virtual DOM은 변경된 부분만 추적하여 업데이트하기 때문에 불필요한 리렌더링(re-rendering)을 방지한다.
따라서 virtual DOM을 통해 성능을 최적화 할 수 있다.
4. JSX(Javascript XML)
JSX는 리액트에서 사용하는 문법으로 Javascript와 XML을 결합한 확장 문법이다.
리액트에서 필수적으로 사용할 필요는 없지만 가독성을 높일 수 있어 대부분 JSX를 사용한다.
return <div>hello world!</div>;위와 같이 HTML 처럼 보이는 코드가 사실은 자바스크립트이다.
리액트 컴포넌트 파일에서 위와 같은 코드를 작성하면 JSX를 자바스크립트로 변환해 준다.
리액트의 장단점
장점
- virtual DOM을 통한 성능 향상
- 많은 JS 라이브러리와 호환
- 페이스북 개발자들 및 많은 개발자들(오픈소스)의 꾸준한 업데이트
- 클래스 없이 함수 만으로 컴포넌트 작성 가능
- 컴포넌트의 재사용
- 활발한 개발자 커뮤니티 및 생태계
단점
- 다소 높은 러닝 커브
- JSX 구문의 어려움
참고
1.https://ko.legacy.reactjs.org/
2. https://react.dev/blog/2023/03/16/introducing-react-dev
3. https://appmaster.io/ko/blog/ingi-issneun-peuronteuendeu-peureimweokeu
4. https://www.w3schools.com/whatis/whatis_react.asp