본문 바로가기
Front-End/React

[React] React의 세가지 특성

by SeanK 2021. 12. 5.

 

 

React를 이용한 프론트엔드 웹 어플리케이션 제작 학습을 마치고, 

 

배포까지 살짝쿵 건드려본 지금 시점에서, 

 

서두르지 않고 다시 초심으로 React의 기초를 한번 다져보려고 한다. 

 

React의 세가지 특징

 

React는 세가지 특징이 있다. 

 

한국어로는 범용성 / 컴포넌트 기반 / 선언형 이렇게 세 가지로 구분을 하는데, 

 

관련 내용은 React 공식 문서 페이지의 랜딩 페이지에서 맨 처음 언급하고 있다. 

 

관련 내용을 번역해서 옮겨본다. 

 

출처: https://reactjs.org/

 

React – A JavaScript library for building user interfaces

A JavaScript library for building user interfaces

reactjs.org

 

Declarative

 

React makes it painless to create interactive UIs.
Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

리엑트는 상호작용 가능한 UI 생성을 고통 없이 만들 수 있다.

당신의 어플리케이션의 각 상태를 심플한 view로 디자인하세요, 그러면 React는 데이터 변경이 발생할 때 올바른 컴포넌트를 효과적으로 업데이트하고 렌더링 할 것입니다. 

 

선언형 view는 당신의 코드를 더욱 예측가능하고 디버깅이 쉽도록 할 것입니다. 

 

 

Component-Based

 

Build encapsulated components that manage their own state, then compose them to make complex UIs.

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

 

각자가 자신의 state를 관리할 수 있도록 캡슐화한 컴포넌트를 생성하세요, 그리고 복잡한 UI를 만들기 위해 컴포넌트들을 합치세요. 

컴포넌트 로직은 템플릿이 아닌 자바스크립트로 쓰여지기 때문에 쉽게 다량의 데이터를 당신의 어플리케이션에 넘겨주고 state를 DOM밖에 위치하도록 유지할 수 있습니다. 

 

 

Learn Once, Write Anywhere

 

We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

React can also render on the server using Node and power mobile apps using React Native.

 

우리는 당신의 나머지 기술 스택을 가정하지 않습니다. 따라서 당신은 새로운 기능들을 기존의 React코드를 수정하지 않고도 개발할 수 있습니다. 

 

React는 Node를 통해 서버를 렌더링하거나 React Native를 활용해 모바일 어플리케이션에 동력을 넣을 수도 있습니다. 

 

 

 

 

 

'Front-End > React' 카테고리의 다른 글

[React] State값을 직접변경하면 안되는 이유  (0) 2021.12.10
[React] React에서 this는 무엇인가?  (0) 2021.12.05
React Debounce개념  (0) 2021.11.21
React Throttle 개념  (0) 2021.11.21
React Array.prototype.map()  (0) 2021.11.03