react.js란, react란, react 시작하기, react 설치, react 기초, react 특징

react.js(react)란

리액트(React.js 또는 ReactJS 또는 React라고도 함)는 UI 컴포넌트를 기반으로
사용자 인터페이스를 구축하기 위한 무료 오픈 소스 프론트 엔드 자바스크립트 라이브러리입니다.
2013년 5월 29일에 0.3.0 으로 처음 출시(릴리즈) 되었습니다.
메타(구 페이스북) 중심으로 react 개발자 커뮤니티에 의해 유지보수되고 있으며,아파치 라이센스 2.0 을따르고 있습니다.
React는 Single Page Application 또는 모바일 애플리케이션 개발로 활용될 수 있습니다.
그러나 React는 상태 관리 및 그 상태를 DOM에 렌더링하는 것에만 관심이 있으므로
React를 기반으로 한 프로그램을 개발하려면 일반적으로 라우팅을 위한 추가 라이브러리나 특정 클라이언트측 기능들을 추가하여 사용해야 합니다.

react 특징

1. 선언적
react는 인터랙티브한 UI를 만드는것을 쉽게 해줍니다.
프로그램에서 각 상태에 대한 간단한 뷰를 설계하면 데이터가 변경될 때
리액트가 적절한 구성요소를 효율적으로 업데이트하고 렌더링합니다.
선언적 뷰는 코드를 더 예측 가능하고 디버깅하기 쉽게 만듭니다.

2. 컴포넌트 기반
자신의 상태를 관리하는 캡슐화된 컴포넌트를 구축한 후 이를 구성하여 복잡한 UI를 만듭니다.
컴포넌트 로직은 템플릿 대신 자바스크립트로 작성되기 때문에
데이터를 쉽게 전달할 수 있고 DOM에서 상태를 차단할 수 있습니다.

3. 다양한 사용처
리액트는 노드를 사용하여 서버에서 렌더링할 수 있고,
리액트 네이티브를 사용하여 모바일 앱을 개발할 수도 있습니다.

4. Virtual DOM(가상돔, 버추얼돔)
React는 인 메모리 자료구조 캐시를 생성하고,
그에 따른 차이를 계산한 후, 브라우저가 표시한 DOM을 효율적으로 업데이트합니다.
이를 통해 프로그래머는 각 변경에 전체 페이지가 렌더링된 것처럼 코드를 작성할 수 있는 반면,
리액트 라이브러리는 실제로 변경되는 하위 구성요소만 렌더링하여 사용자에게 더 빠른 속도를 체감할 수 있게 합니다.
또한, 전체 페이지에 대한 CSS 스타일, 페이지 레이아웃 및 렌더링을 재계산하는 시간을 단축시켜줍니다.

5. 라이프사이클 훅 메서드
라이프사이클 메서드는 컴포넌트의 라이프사이클 동안 설정된 지점에서 코드를 실행할 수 있는 후킹 형태를 제공합니다.
주요 라이프사이클 훅 메소드는 다음과 같습니다.
shouldComponentUpdate (렌더링이 필요하지 않은경우 사용가능함)
componentDidMount (컴포넌트가 mount 되면 호출됨)
componentWillUnmount (컴포넌트가 unmount 되기직전 호출됨)
render (컴포넌트 상태가 업데이트될 때마다 호출됨)

6. JSX
JSX 또는 Javascript XML은 자바스크립트 언어 구문의 확장언어입니다.
HTML과 외관상 유사하게, JSX는 많은 개발자들에게 익숙한 구문을 사용하여 컴포넌트 렌더링을
구조화하는 방법을 제공합니다.
컴포넌트는 일반적으로 JSX를 사용하여 작성되며, 순수 자바스크립트로도 작성될 수 있습니다.
JSX는 메타(구 페이스북)이 XHP라는 PHP를 위해 만든 또 다른 확장 구문과 유사합니다.

react 시작하기, react 설치

react를 시작하기위한 react 가장 쉬운 설치법은 아래 명령어를 사용하는 것입니다.
(npx / npm 사용, node.js 가 우선 설치되어 있어야 합니다.)

npx create-react-app my-app
cd my-app
npm start

create-react-app을 사용하면 쉽게 바로 사용할수 있는 react 프로젝트가 생성됩니다.

 

성공적으로 실행되었다면 아래와 같은 구조로 파일이 생성되었을 것입니다.

 

 

 cd my-app 을 쳐서 my-app 폴더로 이동하고,

npm start 명령어를 아래와 같이 입력하면 react 프로젝트를 시작할 수 있습니다.

 

 

 

위와 같은 메시지들이 뜨면서 브라우저에 아래와 같은 화면이 뜨게 됩니다.

 

총평

react는 SPA 라이브러리/ 프레임워크의 새 지평을 열었다고 하여도 과언이 아닐겁니다.
처음 Angular가 나왔을때 꽤나 혁신적으로 보였으나 너무나도 구조가 복잡하고 사용법도 어렵고,
node나 npm,yarn,webpack 기타 등등 수많은 웹 프론트엔드 기술이 많이 등장하여 정신이 없었던게 기억납니다.
react가 나왔을때는 angular보다는 쉬웠지만 그래도 익숙해지기는 힘들었었고, 0.x버전이라 안정성이 떨어져보였습니다.
그런데 언젠가 부터 react가 대새가 되고, react-native로 안드로이드/아이폰 네이티브 앱도 만들수있는것을 보며 이렇게 까지 성장할수 있구나를 눈으로 지켜보았습니다.
지금은 거의 프론트엔드 개발의 defacto standard인것으로 보이는데, 제가 보기엔 여전히 이론적으로 공부해야할것도 많고 사용법도 어려운점이 많아 보입니다.
하지만 이것이 기초가 되어 나중에는 더 좋은 프레임워크가 나올것이고, 현재는 react중심으로 새로운 도구/이론들이 계속해서 나오니 react를 계속해서 사용할 수 밖에 없는것은 숙명인거 같네요.
현재는 vue.js 라는 프레임워크가 있긴한데, 더 쉽고 빠르게 개발하고 쉽게 사용할수 있는 프레임워크가 등장했으면 좋겠습니다.



react.js란, react란, react.js예제, react 시작하기, react 예제코드, react 설치, react 기초, react 특징
react.js시작하기,react.js설치,react.js특징,


#react,#reactjs,#react.js,#시작,#리액트,#리엑트,#설치,#특징,#react에제,#react설치,#recat시작

 

https://devscb.com/post/83

What is react.js, What is React, Getting started with React, Installing React, React basics, React features