리액트는 무엇인가

jjub0217·2021년 11월 21일
0

Studies - Dream coding

목록 보기
1/8
post-thumbnail

리액트는 무엇인가?

  1. 리액트를 한문장, 한단어로 설명할수 있기
    • 라이브러리. 웹 어플리케이션의 디자인 패턴이라는 MVC 라는 것에서 V. 즉 View 라는 레이어를 담당하고 있는 라이브러리이다. 또는, User Interface 를 만들수 있는 라이브러리이다.
  2. 리액트의 중요한 컨셉 두 문장 말하기
    • 컴포넌트 단위들로 이루어진 라이브러리이다.
    • 데이터가 업데이트 될 때마다 어플리케이션 전체를 Re-render 한다.
  3. 필수 사이트 두개를 북마크

ㄱ. 어떤 문제를 해결하기 위해서 나온 것일까?

  • 테스팅을 하기가 좋다.
  • 리액트 내부의 가상돔 덕분에 성능이 좋다.

ㄴ. 왜 리액트를 배워야 할까?

  • 복잡한 어플리케이션을 만들때 사용하는 언어들중에 JS 가 있는데, JS를 바닐라 JS 보다 쉽게 다룰수 있는 라이브러리를 사용하면 좋기 때문이다.

ㄷ. 기존의 프레임워크 ( 앵귤러, 뷰 ) 와 어떤점이 다른지.

  • 앵귤러와 뷰는 너무 어렵고, 프레임워크가 제공하는 기능들과 규칙에 의존하고 준수해야 하는 엄격성이 있지만, 리액트는 쉽고 필요한 기능에 따라서 기능들을 골라서 사용할수 있다.

'리액트' 가 뭐지?

▶ 페이스북에서 만든 자바스크립트 라이브러리

▶ UI 라이브러리

✋ 여기서 잠깐!

라이브러리

  • 프로그램을 제작할때 필요한 기능 ( 단순 사용이나 재사용이 가능한 도구들의 집합 )
  • 예시 : 자동차 바퀴, 자동차 헤드라이트, 자동차 에어백
  • " 자동차의 일부 부품들을 가지고 개발자가 새로운 자동차를 만드는 것"
  • " 우리가 원하는 재료들을 골라서 우리 입맛에 맞게 집을 지을수 있다. 그래서 조금조금의 만들어진 부품 하나하나들을 라이브러리라고 할수 있다."
    즉, UI 를 관리하는 라이브러리, routing 에 관련된 라이브러리, state 를 관리할수 있는 라이브러리 등 개발자들이 필요한 기능에 따라서
    라이브러리들을 골라서 사용할수 있다.
  • 대표적인 언어 : React

프레임워크

  • 프로그램의 기본 뼈대나 구조
  • 예시 : 자동차 프레임 / 집의 구조나 철제들이 완성된 상태의 완성품
  • 프레임워크 만으로는 실행되지 않기 때문에, 그 안에 기능들을 추가해야 하며,
    프레임워크에 의존하여 개발해야 하기 때문에, 프레임워크가 정의한 규칙을 준수해야 한다.
  • " 자동차 프레임 안에 개발자들이 자동차의 일부 부품(필요한 코드들)들을 넣어서 자동차가 돌아가게 하는 것 "
  • " 벽돌의 색깔을 바꿔서 벽돌을 붙이거나 집안의 가구를 재배치 하는 등의 일들을 할수 있다 "
  • 대표적인 언어 : Angular , View
  • Angular
    • UI 뿐만 아니라, routing 과 state 를 관리할수 있는 방식, 그리고 HTTP 등의 다양한 기능들이 한번에 묶어져서 제공된다.
    • Angular 로 웹 어플리케이션을 만들려면, Angular에서 제공하는 기능들을 사용해서 만들어야 한다.
  • View
    • Angular 만큼 제공하는 기능들이 많이 없다.
    • State 관리와 HTTP 기능이 없다.
    • 프레임워크랑 라이브러리의 중간


★ 개발세계에서, 조금 복잡한 웹 어플리케이션을 만들때 MVC[^1] 이라는 디자인 패턴을 많이 사용하는데, React 는 이중에서 V ( View ) 레이어를 담당하고 있다.

  • 뷰( View port : User Interfaces[^2] ) 를 만들수 있는 라이브러리
    • React 는 UI 라이브러리 이므로, Redux 같은 State 를 관리하는 라이브러리도 사용해야 한다고 하지만,
      React Hook ( useState , useReduver 등등의 기능들의 집합 )이라는 것으로 State 를 관리할수 있다.
  • React 의 커뮤니티가 형성이 잘 되어져 있기 때문에, 문서화가 잘되어있다.
  • React 로는 웹 어플리케이션을, React Native 로는 모바일 어플리케이션을, 일렉트론(React + Electron ) 으로는 데스트탑 어플리케이션을 만들수 있다.

[^1]: MVC : Model / View / Controller 의 줄임말로, 세개의 레이어로 나누어서 디자인하는, 디자인 패턴
[^2]: 사용자에게 보여지는 UI를 만들고 그 위에서 사용자의 행동(사용자의 이벤트)에 맞게 반응하도록 만들어진 라이브러리

리액트의 컨셉 ( 리액트의 구현사항 )

concept 1 : Component

▶ React 는 컴포넌트듣로 이루어진 UI 라이브러리이다.

✋ 여기서 잠깐!

컴포넌트

  • 한가지의 기능을 수행하는 UI 단위
  • 각각의 독립적인 컴포넌트 단위들을 서로 조립해서 만들은 것 리액트 어플리케이션이라고 할 수 있다.
  • 컴포넌트도 DOM Tree 처럼 하나의 Virtual DOM Tree 라는 Tree 형식으로 만들어져 있다.

  • React 에서의 컴포넌트는 모든 것이라고 할 수 있다.
    즉, A 라는 하나의 컴포넌트를 만들고 나면, A 컴포넌트가 여기에서도 동작하고, 저기에서도 동작하는 하나의 단위를 말한다.
    • 예시1 : 태그를 index.html 에서도 의 역할을 하고, index2.html 에서도 의 역할을 하는 것에서 볼수 있는 태그 같은 하나의 단위.
    • 예시2 :
      1. img 도 컴포넌트
      2. input 도 컴포넌트
      3. img 와 input 을 묶은 div 도 컴포넌트
      4. div들이 모여있는 하나의 page 도 컴포넌트


React 에서 제공하는 컴포넌트라는 Class 함수 컴포넌트를 상속(extends)해야 한다. : " class LikeButton extends Component{ } "
그리고, LikeButton 이라는 Class 함수 컴포넌트 안에는 state 부분과, rendering 하는 부분, 이렇게 두가지로 나눠 볼수가 있다.

state

▶ 이름을 가지고 있는 하나의 Class 함수 컴포넌트 안에 들어있는 데이터를 나타내는 객체(Object)

render ( ) 함수

▶ 사용자가 보는 View port 에, 어떻게 보여질지 html 과 비슷하게 생긴 JSX 라는 것을 사용하여 구현하는 함수

  • State 객체 안에 담겨있는 데이터들이 변경(업데이트) 이 되면 render 함수가 자동적으로 재호출된다.
  • 업데이트 된 state 값이 화면에 나타날수 있도록, render 함수가 계속 반복적으로 호출이 되서, 계속 업데이트 되는 내용을 사용자에게 보여주게 한다.

concept 2 : Re-render

▶ React 는 데이터가 업데이트가 될 때마다 어플리케이션 전체를 Re-render 하는데, 이렇게 어플리케이션 전체를 Re-render 하는 자체를
React 로 만든 어플리케이션은 쉽게 할수 있다.

Virtual DOM Tree ( 가상 돔 트리 )

★ 근데 state 가 변경이 될때마다 모든 render 함수가 재호출되는 건 성능에 안 좋지 않을까?

  • React 가 가지고 있는 DOM Tree 를 말한다.

    • Virtual DOM Tree 를 메모리에 보관하고 있기 때문에, 업데이트 이전의 가상 돔 트리 상태와, 업데이트 이후의 가상 돔 트리 상태를 비교해서
      업데이트 되는 내용이 있다면 그때 Real DOM Tree 를 업데이트 한다.
      • 가상 돔트리 안의 컴포넌트의 State가 변경되어, 자식 컴포넌트의 render함수가 재호출되면, Real DOM Tree(진짜 돔트리)에 반영되는 것이 아니라
        가상 돔트리 안의 컴포넌트의 State가 변경되어, 자식 컴포넌트의 render 함수가 재호출되면,
        업데이트 되기 이전인 가상 돔트리 안의 컴포넌트 상태와, 업데이트 된 이후의 가상 돔트리 안의 컴포넌의 상태를 비교해서
        바뀐 부분을 찾아내서, 바뀐 부분만 Real DOM Tree 에 반영하는 것이다.
  • 업데이트해야 되는 내용들을 모았다가 한번에 다 같이 업데이트 하기 때문에 성능이 좋다.



★ Create React App : 스크립트. 공통적으로 설정해서 쓰는 개발환경을 손쉽게 한번에 설치해서 쓸수 있도록 해주는 Tool.

profile
프론트엔드 개발자가 되기 위해 열심히 달리고 있는 꼬꼬마개발자

0개의 댓글