[React] React란?

서론

React란 무엇이고 정의와 특징에 대해 설명하려 합니다. 또한 React에서 나오는 기술면접 질문에 답을 해보려고 합니다.

React란?

React 상징 심볼

리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.
출처: 위키백과

• React는 facebook에서 제공하는 프런트엔드 라이브러리입니다.
• 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있습니다.

React를 사용하는 이유?

React를 사용하지 않더라도 html, css, javascript를 활횽하여서 웹페이지를 제작할 수 있지만 React를 활용하면 JSX를 JavaScript에 넣음으로써 간결하고 가독성이 뛰어난 코드를 만듭니다. 특히 제작을 하면서 실행되는 페이지를 실시간으로 보여주는 Virtual DOM을 통해서 제작을 훨씬 용이하게 만들어줍니다.

k777agent-blog\k777agent.github.io>npm run start

React의 특징

• Data Flow
• Component 기반 구조
• Virtual Dom
• Props and State
• JSX

1. Data Flow (단방향 데이터 바인딩)

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다는 것으로 데이터가 부모에서 자식으로 가는 방향으로만 흐른다는 뜻입니다.

2. Component 기반 구조

Component란 독립적인 단위의 소프트웨어 모듈을 말합니다. React는 화면을 여러 Component를 쪼개서 만드는 특징이 있습니다. 이를 통해 코드를 반복해서 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있고 애플리케이션이 복잡해지더라고 코드의 유지보수, 관리가 용이하다는 장점이 있습니다.

3. Virtual Dom

DOM은 Document Object Model의 약자로 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리합니다.

React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있습니다.

이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다고 합니다.

4. Props and State

• Props
  Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말합니다.
  쉽게 읽기 전용 데이터라고 생각하면 될 것 같습니다! 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있습니다.
• State
  State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적입니다.

5. JSX

JSX는 리액트에서 사용하는 독특한 문법입니다.
자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트 변수들을 바로 사용할 수 있는 일종의 템플릿 언어입니다.

마치며

저는 JavaScript만 다룰줄 알았는데 이번에 프런트앤드 캠프에 참여하면서 React를 배우게 되었고 이러한 특징들을 느끼게 된것 같다는 생각이 들었습니다. 이번 내용은 여기서 마치고 바로 다음 글에 제가 배운 React에서 나오는 면접 질문들을 올리고 제가 생각한 답을 올리도록 하겠습니다.

 

긴글 읽어주셔서 감사합니다.