1. React 정의
1) 리액트(React)란?
"A JavaScript library for building user interfaces."
리액트는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.
SPA을 전제로 하고 있으며, Virtual DOM을 활용하여 업데이트 해야하는 DOM요소를 찾아서 해당 부분만 업데이트 하여, 빠른 동작이 가능합니다.
➕ 리액트의 장점
- 빠른 업데이트와 렌더링 속도
- 컴포넌트 기반 구조
- 재사용성
- 모바일 앱 개발 가능
- 활발한 지식 공유 & 커뮤니티
➖ 리액트의 단점
- 방대한 학습량
- 높은 상태 관리 복잡도
2. React 기초
1) 컴포넌트(Component)
리액트 애플리케이션은 여러 개의 컴포넌트로 구성됩니다.
컴포넌트는 UI를 구성하는 블록으로 재사용이 가능하고, 독립적으로 동작이 가능합니다.
각 컴포넌트는 자체적인 상태(state)와 렌더링(logic)을 가집니다.
2) JSX(JavaScript XML)
JavaScript 확장 문법, XML과 유사한 구문을 사용하여 UI 컴포넌트 작성이 가능합니다.
가독성이 높고, 컴포넌트의 구조를 직관적으로 파악이 가능합니다.
3) 렌더링(Rendering)
리액트는 가상 DOM을 사용하여 빠르고 효율적인 렌더링을 지원합니다.
변화가 있는 부분만 업데이트하여 실제 DOM에 적용하고, 성능을 최적화합니다.
4) 상태(state)와 속성(props)
상태(state) : 컴포넌트의 내부 데이터를 나타내며, 상태가 변경되면 리액트는 자동으로 UI를 업데이트합니다.
속성(props) : 부모 컴포넌트로부터 전달된 데이터를 나타내며, 속성을 읽기 전용으로 컴포넌트 내부에서 변경이 불가능합니다.
5) 생명주기(Lifecycle)
리액트 컴포넌트는 여러가지 생명주기 메서드를 가집니다. 이를 통해 컴포넌트의 생성, 업데이트, 소명 등 단계에서 작업 수행이 가능합니다.
3. 리액트 환경
1) create-react-app
리액트 애플리케이션을 개발할 때, 'create-react-app'과 같은 도구를 사용합니다.
이 도구는 프로젝트 템플릿을 설정하고, 개발 서버를 실행하며, 코드 파일 및 번들링을 처리합니다.
'create-react-app'은 Node.js와 npm을 필요로 합니다.
npm은 Node.js와 함께 제공되는 패키지 관리자이며, 'create-react-app'과 같은 도구를 설치하고 실행하는데 사용합니다.
2) Node.js
node.js 공식문서
"Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임" 입니다.
웹이 동작하는 브라우저에는 JavaScript 해석 엔진이 있습니다.
기존에는 JavaScript를 인터넷 브라우저 위에서만 사용이 가능했지만, 2008년 구글이 V8 엔진을 사용하여 Chrome을 출시하였습니다.
V8 엔진에 기능을 더해 Node.js가 등장하여 브라우저 내에서 말고 다른 환경에서 JavaScript를 사용할 수 있게 되었습니다.
Node.js는 JavaScript 실행 환경(런타임)입니다.
Node.js를 설치하면 브라우저를 키지 않아도 JavaScript를 컴퓨터에서 수행할 수 있게 됩니다.
Node.js는 웹 서버, API 서버, 실시간 애플리케이션뿐만 아니라 스크립팅, 자동화, 데스크탑 애플리케이션 개발 등 여러 분야에서 활용될 수 있습니다.
📌 Node.js로 서버를 만든 이유
모든 처리를 한번에 합니다. 순서와 상관없이 처리 속도가 빠른 것 부터 결과를 가져오고, 처리 속도가 빠른 것 부터 처리하기 때문에 다른 요청이 끝날 때까지 기다리지 않아도됩니다.
이는 Node.js의 Non-blocking I/O의 특징입니다.
✔ Node.js의 강점
실시간에 사용하기 좋아 SNS나 채팅 서비스에 많이 사용됩니다.
안정성과 보안성 문제가 검증되어 있습니다.
✔ Node.js의 단점
모두 스레드 하나에서 처리가 되기 때문에 코드가 CPU 연산을 많이 요구하면 스레드 하나가 감당하기 어려워 이미지나 비디오 처리, 대규모 데이터 처리 등 CPU를 많이 사용하는 작업을 위한 서버로는 권장하지 않습니다.
