리액트가 뭘까? 리액트 알고 설치하기

 

인트로

앞 글에도 말했듯이, 자바스크립트를 더 효율적으로 쓰기 위한 여러 프레임워크가 존재한다. 그 중에 가장 인기있는 리액트에 대해 글을 써보려고 한다. (물론 나도 리액트로 간단한 작업을 몇 번 해봤다.)

리액트는 UI를 구축하기 위한 자바스크립트 라이브러리이다. 페이스북이 개발하였고, 현재 웹 애플리케이션 개발에서 가장 인기있는 프레임워크이다. 리액트는 개발자들이 재사용 가능한 UI 구성 요소를 구축할 수 있게 하여, 해당 구성 요소의 상태를 일관되고 효율적인 방식으로 관리할 수 있게 해준다.

 

리액트의 특징: Component and State

리액트의 핵심 개념은 UI 구축하기 위한 “컴포넌트Component"의 사용이다. 컴포넌트는 버튼이나 인풋박스 등 인터페이스의 특정 요소를 나타내는 코드 조각이라고 볼 수 있다. 즉 컴포넌트를 미리 만들어 놓으면, 뒤에서는 그 컴포넌트를 불러오기만 하면 된다. 이러한 컴포넌트는 코드의 계층 구조를 만들며 다른 컴포넌트에 중첩할 수 있다. 컴포넌트 안에 컴포넌트를 사용할 수 있다는 말. 또한 리액트는 가상 DOM(Document Object Model)을 사용하여 컴포넌트의 변경 사항을 추적하고 가능한 한 효율적으로 실제 DOM을 업데이트한다. 이를 통해 UI를 더 빠르고 효율적으로 업데이트할 수 있게된다.

 

리액트는 또한 컴포넌트 내에서 표시되고 상호 작용하는 데이터를 관리하기 위해 "스테이트State"라는 개념을 사용한다. 스테이트는 구성 요소를 렌더링하는 데 사용되며 사용자의 작업 또는 기타 이벤트에 응답하여 업데이트할 수 있는 데이터를 나타냅니다. 컴포넌트의 스테이트가 변경되면 리액트는 자동으로 컴포넌트를 다시 렌더링하고 UI를 업데이트합니다. 예를 들어, ‘버튼을 클릭한다’ 라는 이벤트가 발생하면 ‘화면의 숫자에 1을 더한다.’와 같이 동적으로 반응하는 UI를 만들 수가 있게된다.

 

그리고 리액트는 사전 구축된 컴포넌트의 라이브러리, 다양한 개발자 도구 세트, 다른 도구 및 프레임워크와의 통합 지원을 포함하여 웹 애플리케이션을 구축하기 위한 강력한 kit를 제공한다. 대표적으로 지금 회사 프로젝트에도 쓰인 AntDesign Component나 MUI Component가 있다.

https://ant.design/components/overview/

Components Overview - Ant Design

https://mui.com/material-ui/

React Components - Material UI

 

그래서?

요약하자면, 리액트는 UI를 구축하기 위한 강력한 자바스크립트 프레임워크다. 개발자는 재사용 가능한 컴포넌트를 구축함으로서 코드를 효율적인 방법으로 관리할 수 있게 되며, 가상 DOM과 강력한 Kit들을 사용하여 복잡한 웹 애플리케이션을 구축할 수 있다.

 

리액트 설치하기

리액트를 설치하기 위해서는 아래 스텝대로 움직여보자.

 

1. 리액트를 설치하기 전에 Node.js와 npm(Node Package Manager)를 먼저 설치해야한다. Node.js는 공식 사이트에서 다운로드할 수 있다. ☞ https://www.npmjs.com/

npm

 

2. 터미널(파워쉘) 혹은 CMD를 열고 리액트 프로젝트를 만들 폴더를 지정한다.

 

3. 리액트 프로젝트를 만들기 위해 아래 커맨드를 터미널에 입력한다.

npx create-react-app my-app

그러면 "my-app" 이라는 이름으로 프로제트가 새로 생성될 것이다.

프로젝트를 생성하게 되면 기본적인 npm kit들을 함께 다운로드 받게 된다. (이거 때문에 용량이 꽤 큼.. 실제 쓰이는 것은 적은데)

 

4. 리액트 프로젝트가 설치되면 터미널(혹은 CMD)에서 아래 커맨드를 입력해 해당 프로젝트의 폴더로 이동한다.

cd my-app

 

5. 아래 커맨드를 입력하여 개발 서버와 프로젝트를 실행한다.

npm start

그러면 짜잔! 리액트를 동작할 수 있는 서버가 열렸다.

더 자세한 설명은 아래 갓대희님의 친절한 설명을 참고하자.

 

참고

Top 5 Front-end JavaScript Framework In 2022

Top 5 Front-end JavaScript Framework In 2022

[React] 1. React 시작하기(1) - 환경 설정

[React] 1. React 시작하기(1) - 환경 설정