[포스코X코딩온] React 특징과 사용법

포스팅 주제

• React 특징
• React 사용법

---

[ React JS ]

 

React 란 무엇인가?

• FaceBook에서 만든 자바스크립트 라이브러리
• 사용자와 상호 작용이 가능한 동적 UI 제작 가능 라이브러리

 

React의 특징들!

• Data Flow
  • 단방향 데이터 흐름
  • 부모에서 자식으로 데이터 전달
• Component 기반 구조
  • Component => 독립적인 단위의 소프트웨어 모듈로 소프트웨어를 독립적인 하나의 부품으로 만드는 방법
  • React는 UI(view)를 여러 Component를 쪼개서 만듬
  • 한 페이지 내에서 여러 부분을 Component로 만들고 조립해 화면 구성
• Virtual Dom
  • React는 DOM Tree 구조와 같은 구조를 Virtual DOM으로 가짐
  • 이벤트 발생 시 Virtual DOM을 만들고 다시 그릴 때 실제와 전후 상태를 계속 비교, 최소한의 변경사항만 실제 DOM에 반영

코딩온 교육자료

 

• Props and State
  • Props
    • 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터
    • 자식에서 props 변경 불가, porps를 전달한 최상위에서만 변경 가능
  • State
    • 컴포넌트 내부에서 선언되고 내부에서 값을 변경
    • 클래스형 컴포넌트에서만 사용 가능, 각각의 state는 독립적 ( ! 함수형에서는 아니다 )
• JSX
  • JSX = Javascript + XML
  • JS를 확장한 문법으로 React Element를 생성

 

[ 그렇다면 React 말고 다른 라이브러리나 프레임워크는 무엇이 있을까 ]

 

 

Angular.js

• 구글에서 만든 JS 기반 오픈 소스 프레임워크
• 양방향 데이터 바인딩으로 양방향 웹 애플리케이션에 적합

 

Angular JS 처럼 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름을 추적하기 힘들고 복잡해지는 경향이 있다.

 

 

Vue.js

• 2013년 출시된 JS 프레임워크
• Angular와 React의 장점을 수용한 프레임워크
• 중국어 기반으로 Reference가 적음

 

React 공식사이트

https://reactjs.org/

React

 

 

프로젝트 생성 방법

npx create-react-app 앱이름[프로젝트이름]

 

프로젝트 작동법

npm start