React(리액트)

[TIL] 리액트 ( intro )

프린벼르 2022. 2. 14. 23:26

react 도입부 표지

이번 글에서는 리액트는 어떤 문제를 해결하고자 나왔는지, 리액트의 철학과 추구하는 방향, 그리고 많은 개발자분들이 느끼고 있는 리액트의 공통적인 장점과 특징을 간접적으로 정리해보고자 한다.

0. 라이브러리 등장 배경

프론트앤드 라이브러리가 등장하게 된 이유는 동적인 웹 페이지를 보다 효율적으로 유지 보수하고 관리할 수 있도록 하기 위함이다. 여기서 정적, 동적인 웹 페이지가 무엇일까 ?
정적인 페이지는 웹 서버에 이미 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지다.
기업을 소개하는 페이지라면, 단순히 기업 정보를 전달하기 위한 목적이기 때문에 유저의 인터랙션은 중요하지 않은 요소로 볼 수 있다. 이런 경우엔 단순히 HTML과 CSS의 구성만으로도 충분히 멋진 웹 페이지를 만들 수 있다.
반면, 동적인 페이지는 유저의 행동 흐름에 따라 웹페이지의 구성을 달리해주어야 하는 페이지를 말한다.
즉, 유저의 요청 정보를 처리한 후 제작된 HTML 문서를 클라이언트가 전달받게 된다.
동적인 페이지가 주를 이루는 요즘, 웹 페이지라기 보다, 웹 애플리케이션이라는 용어가 더 어울릴 정도로 유저 인터랙션을 처리하기 위한 상태 변화가 상당히 많아졌다.
∴ 이를 자연스러운 유저 인터페이스로 만들어주기 위해서 프론트앤드 라이브러리 / 프레임워크가 등장하게 됬다.

1. 리액트란 ?

“지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것”을 목표로 2013년 Facebook에서 개발한 Library. 
MVC(Model-View-Controller) Architecture (ex. Angular, Vue)와는 다르게 리액트는 오직 View만 신경쓰는 라이브러리. 
라이브러리 특성상 내장되어 있는 기능이 부족해 third-party 라이브러리 (ex. React-router, Redux)를 함께 사용한다.
페이스북의 지속적인 관리와 함께 생태계가 활성화되어 있으며 다양한 자료, 그리고 React Native의 사용으로 인해 사용자가 꾸준히 증가한다.

2. 리액트의 특징 - 선언적 / 컴포넌트 / JSX / Virtual Dom

▶ 선언적 ( 원하는 최종 결과물의 모습을 선언 ) - 최종결과물이 어떻게 생겼는지에 대해서만 신경씀
 💁🏻‍♀️  state라는 개념이 있는데, 일단 ui를 컴포넌트를 통해서 그려준 다음, 어떠한 상태( 예를 들어 댓글의 상태, 누가 썼는지 언제썼는지, 좋아요가 눌렸는지, 댓글내용 등 이런 것들을 담은 배열이라던가 댓글이 추가되면 그 데이터만 담기는!! ) 이런식으로 고정적으로 ui를 선언해놓는 방식을 일컬음

▶ 컴포넌트
 💁🏻‍♀️  ui의 조각(레고) 같은 느낌. 다른 여러 곳에 활용가능함. 컴포넌트단위로 ui를 구성함.  굉장히 중요한 리액트의 핵심이되는 내용. ( 레고블록같이 여기저기 붙여서 쓸 수 있기때문!! ) 재사용이 가능한 ui의 단위라고 생각하면 됨.( 만드는 기준이 애매할 수 있는데 굳이 재사용가능하지 않더라도 컴포넌트 안에 다른 컴포넌트가 들어가는 느낌으로, 전체피드들을 감싸고있는 컴포넌트가 있을수 있고 이런식으로 컴포넌트를 계속 작게 쪼개게 될 것 !! 단순하게 재사용가능한 ui말고도)

▶ JSX ( JS로 바꿔주는 문법 )
 💁🏻‍♀️  자바스크립트 확장 문법. 컴포넌트를 사용할때 html파일을 더이상 만들지 않음. ( 나머지를 모두 자바스크립트로 만들것이기 때문 ) 태그들을 사용해서 만들게 될건데, 자바스크립트 안에서 쓸 수 있게 만드는 문법이 Jsx다. (자바스크립트와 html 짬뽕문법) html태그 안에서도 자바스크립트 코드를 쓸 수 있는데, 조건문을 사용해서 그 태그들 모두 다 나오게 할 수 있고, 반대로 안할 수도있음. ( 반복문으로 할 수도 있고, 내가 원하는 만큼 반복해서 ui를 보여지게..!! )

▶ Virtual Dom ( 가상돔 )

 💁🏻‍♀️  변하게 되는 부분들 또는 바뀌어야하는 부분들을 감지해서 해주는게 가상돔의 역할

3. 리액트 컴포넌트 구성방식 

  • 클래스 컴포넌트 (statefull 컴포넌트) 
    • state 기능 및 라이프 사이클 기능을 사용할 수 있음
    • 임의 메서드를 정의할 수 있음
    • 클래스 생성의 어려움때문에 휴먼 에러 자주 발생
    • render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야함
    • 여러 라이브러리에서 클래스 컴포넌트가 쓰는 부분을 더이상 지원하지 않음
  • 함수 컴포넌트 (stateless 컴포넌트)
    • 클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점
    • 과거에는 함수형 컴포넌트에서 state와 라이프사이클 API를 사용할 수 없다는 단점이 있었는데, 이러한 단점은 앞서 언급한 것처럼 리액트 훅이 도입되면서 해결됨
리액트 훅이 등장하면서 함수형 컴포넌트를 더 많이 사용하는 추세가 되었지만 오래된 리액트 코드의 경우 클래스형 컴포넌트로 이루어진 경우가 더 많으므로 두 가지 모두 다 잘 알고 있어야 리액트로 개발을 할 때 어려움을 겪지 않을 것이라고 생각한다.

4. 왜 리액트를 쓰는가 ?

왜 사용하게 됐는지에 대한 질문을 받는다면 '매우 인기 있는 라이브러리', '많은 기업에서 요구하는 스펙'이라는 것이 솔직한 답변일 것 같다. 즉, 3세대 웹(리액트 등)이 나타나게 된 이유는 웹이 엄청 복잡해졌기 때문이다. 웹의 구조라던가 그런것들이 복잡해짐으로인해 우리가 빠르게 구축하기 위해서 프레임워크가 나오게 됬다.

5. 리액트를 위한 노드 J.S 의 실행 환경

💁🏻‍♀️ Node.JS
( node  :   웹상에서 쓰이는 언어가 자바스크립트인데 웹밖에서도 쓸 수 있게 만들어주는 환경이 노드임 )
  • Node.js : 브라우저 이외의 환경에서 자바스크립트를 사용가능하게 할 수 있으며, V8 엔진으로 빌드된 자바스크립트
                     런타임 환경이다.
  • npm : Node package manager의 약자로, Node.js에서 사용할 수 있는 모듈들을 패키징하여 모아둔 저장소다.
               또한 패키지 설치와 관리를 위한 CLI(Command Line Interface)를 제공한다.

6. 결론

즉, 리액트는 html을 번역해준다고 생각하면 된다. 리액트가 ui를 그리는 라이브러리(뷰를 담당하는 라이브러리) 역할을 담당하기때문에 다른 말로는 이러한 것을 "생태계활성화베이스"라고 부른다.

저작자표시 (새창열림)