언젠가는 펼쳐 볼 아카이브

[ReactJS] ReactJS 이론 공부 기초 - 1 본문

IT/ReactJS

[ReactJS] ReactJS 이론 공부 기초 - 1

개발자희망생고롸파덕 2023. 11. 13. 18:03

 

ReactJS란? 

  • 사용자 인터페이스를 만들기 위한 javascript 라이브러리
  • 생산성/재사용성이 높음
    • Component와 Hook을 활용함
      • Hooks를 통해 컴포넌트 상태를 쉽게 관리할 수 있음
    • 작은단위의 독립적인 요소로 개발하여 개발자의 생산성과 코드의 재사용성을 높임
  • 풍부한자료/라이브러리
    • 전 세계적으로 가장 활발하게 커뮤니티 활동이 이뤄지고 있어 방대한 자료와 편리한 오픈소스 라이브러리 등이 공유되고 있음
    • Redux, Mox : 애플리케이션에서 전역적으로 쓰이는 상태 값을 관리하는 대표적인라이브러리
    • Fluent UI, Ant Design, 머튜리얼디자인? 대표적인 디자인 프레임 워크
  • 다양한 사용처
    • React-Native에 적용하여 안드로이드 애플리케이션 및 IOS 애플리케이션 등을 개발할 수 있음
    • 대규모프로젝트에서 데이터를 효율적으로 관리하는데 유용하지만, 실행속도 면에서는 다소 불리함
  • ReactJS는 단방향 데이터 흐름임
    •  단방향 데이터 흐름이란?
      • 데이터 흐름은 항상 동일한 일정 장소에 있고, 그 장소에서만 변경이 가능한 것을 의미함
  • 리액트와 리액트 돔 모두 CDN(Contents Delivery Network)을 통해 사용할 수 있음
    • CDN이란?
      • 지리적, 물리적으로 떨어져 있는 사용자에게 컨텐츠 제공자의 컨텐츠를 더 빠르게 제공할 수 있는 기술
      • 리액트에서 CDN을 활용하기 위해서는 index.html > <head> 태그 내에 crossorigin 속성을 이용하면 됨.
        • crossorigin ?
          • 실행 중인 리액트 앱이 해당 출처의 리소스에 접근할 수 있는 권한을 부여할 수 있도록 알려주는 속성
          • 프론트 단에서 처리할 수 있지만, 백엔드 단에서도 처리 가능함
<script crossorigin src="..."></script>

Component

  • React에서 서비스를 개발하는 데 있어 독립적인 단위로 쪼개어 구현, 즉 페이지를 구성하는 최소 단위
  • 하나의 "블록"을 만들어서 필요한 곳에 "조립"하는 것
  • 컴포넌트 이름은 대문자로 시작
  • Class Component
    • 초기 리액트의 컴포넌트는 모두 클래스였으나, v16부터 Function component와 Hooks 개념이 발표되었고, 현재는 function component를 주로 사용함
    • 클래스 개념이 많이 활용되는 자바 개발자에게 친숙한 형태
    • 리액트의 생명 주기를 파악하기 쉬움
    • HTML을 반환하는 render() 메소드가 구현되어 복잡한 UI 로직을 구현할때 사용되며, 상태형 컴포넌트라고 불림

Function Component

  • 단순히 HTML UI를 반환하는 간단한 자바스트립트 함수로 자주 사용됨
  • 데이터를 받고 랜더링을 하면 끝이기 때문에 비상태형 컴포넌트라고도 불림

Controlled Component

  • 각 input의 데이터를 state를 이용해 직접 관리하는 컴포넌트

Uncontrolld component

  • 데이터를 React로 관리하지 않고, 필요할때 element로 부터 값을 긁어옴
  • 컴포넌트에 attribute 에 해당하는 부분을 Props(properties) 라고 함
  • 컴포넌트 안에 작성된 하위 element를 children이라고 함
    • childern도 결국 props 중 하나!
  • 컴포넌트끼리 데이터를 주고 받을땐 Props
  • 컴포넌트 내에서 데이터를 관리할땐 State
  • 데이터는 부모->자식으로만 전달

 

Virtual DOM

  • 가상적인 표현을 메모리에 저장하고 ReactDom과 같은 라이브러리에 의해 실제 DOM과 동기화 하는 프로그래밍 개념

JSX 

  • Javascript 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경을 제공, HTML과 유사함

State

  • 컴포넌트 내에서 "state"를 이용하여 데이터를 유동적으로 관리함
  • state가 변경될때마다 컴포넌트가 다시 "랜더링" 됨

CRA(Create-React-App)

  • 리액트 프로젝트를 손쉽게 생성할 수 있도록 도와주는 "보일러플레이트(bolierplate)"
  • 수많은 리액트용 보일러플레이트가 있지만 페이스북에서 직접 만들어 관리하는 CRA이 가장 많이 쓰임
  • 프로젝트 생성에 필요한 다양한 기능을 커맨드로 제공함
  • node.js 환경 위에 구축됨
    • 기본적으로 Client-side-Rendering만 지원함
  • 개발자가 온전히 리액트 앱 개발에 집중할 수 있도록 함
    • 상대적으로 덜 중요한 코드는 노출 되지 않음
    • 강력한 커맨드 지원
  • 대부분의 브라우저에서 해석될 수 있도록 transcompile을 지원
    • 바벨(babel)
    • 배포 시 코드 번들링
    • Webpack

JSX

  • JSX에서 style은 object 로만 입력할 수 있음

ReactDOM과랜더링

  • 리액트는 가상 DOM과 실제로 표시되는 DOM을 유지함
  • 실제 돔을 추상화 하여 가상 DOM에 만들어 두고 데이터가 업데이트 되면, 한번에 랜더링 하기 때문에 계속해서 DOM을 랜더링 하는 것보다 속도가 빠름

엘리먼트

  • 리액트 앱의 가장 작은 단위이며, 컴포넌트의 구성요소
  • 엘리먼트는 한 번 생성 되면 수정이 불가능한 불변 객체이기 때문에 값을 변경하고 싶으면 새로운 엘리먼트를 만들어 업데이트 해야함

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript

저작자표시 비영리 변경금지

'IT > ReactJS' 카테고리의 다른 글

[ReactJS] React 이론 공부 기초 - 4  (0) 2023.11.21
[ReactJS] React 이론 공부 기초 - 3  (0) 2023.11.20
[ReactJS] React 이론 공부 기초 - 2  (1) 2023.11.16
[React JS] 이론 공부 : shortcut  (0) 2023.10.13
[ReactJS] ReactJS 동작 이해를 위한 VanillaJS 와의 간단 비교  (1) 2023.09.21
'IT/ReactJS' Related Articles more