[React] 리액트 정의와 Hooks

React의 정의

리액트 공식 홈페이지에서 내린 React 정의

 출처  https://ko.reactjs.org/tutorial/tutorial.html

자습서: React 시작하기 – React

 

 

 

React , 쉽게 정리해본다면

리액트는 상태 변화 프로그램(데이터 관리 프로그램) 이다. 즉, 반복이 많거나 변경이 빈번한 환경에서 활용된다.

MVC 구조에서 view의 역할(화면 출력하는 역할)을 수행한다. 

 

 

React 특징

* 가상 돔을 사용하여 Application의 퍼포먼스를 최적화했다. 

* 싱글 페이지 Application에서 UI를 만드는 라이브러리이다보니 페이지 전환 기능 등을 제공하지 않는다. 이때는 react-router와 같은 추가적인 라이브러리를 사용해야 한다. 

* 단방향 데이터 바인딩 

 

자세한 설명이 궁금하다면  > https://dev-yakuza.posstree.com/ko/react/create-react-app/react/

 

 

React와 Vue의 차이점

* React는 자바스크립트 라이브러리이고 Vue는 프레임워크이다. 즉, 라이브러리인 리액트는 사용자가 필요에 따라 썻다 뺐다가 비교적 자유롭고 프레임워크인 Vue는 프레임 워크가 지원하는 문법에 따라서 작성해야 한다. 리액트는 사용하는 개발자에 따라 소스가 바뀔 수 있지만 Vue는 뷰에서 지정해준 문법 방식을 이용해야 한다는 의미이다. 

* 속도가 빠른건 Vue이다. 

* React는 오직 자바스크립트로만 이루어진다. 

* 문법 장벽이 낮은건 Vue이다. 

 

자세한 설명이 궁금하다면 > https://velog.io/@leehaeun0/React-vs-Vue-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%B9%84%EA%B5%90

 

(고수들의 설명) > https://erwinousy.medium.com/%EB%82%9C-react%EC%99%80-vue%EC%97%90%EC%84%9C-%EC%99%84%EC%A0%84%ED%9E%88-%EA%B0%99%EC%9D%80-%EC%95%B1%EC%9D%84-%EB%A7%8C%EB%93%A4%EC%97%88%EB%8B%A4-%EC%9D%B4%EA%B2%83%EC%9D%80-%EA%B7%B8-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%B4%EB%8B%A4-5cffcbfe287f

 

 

Hooks 

리액트의 Hooks 는 16.8버전에서 추가된 기능이다. 

리액트의 컴포넌트는 함수형과 클래스형으로 구분되는데 함수형 컴포넌트는 한 번 호출되면 데이터가 메모리에서 사라지기 때문에 재사용이 불가능했다. 따라서 클래스형 컴포넌트를 굳이 굳이 사용해야 하는 경우가 많았다고 한다. 

하지만 Hooks의 등장으로 함수형 컴포넌트에서도 생명주기 기능을 사용할 수 있게 되면서 컴포넌트간의 로직을 재사용할 수 있게 되었다. 

 

자세한 설명이 궁금하다면  > https://velog.io/@niboo/React-Hooks-%EB%9E%80

 

 

 

 

---

 

 

 

지금부터는

실습에 필요한 내용을 정리해보자.

 

 

 

1. 주석처리

{/*여기는 주석 처리돼요*/}

 

 

2. XML 문법을 사용함

jsx (JavaScript + XML) 문법을 사용한다. 

 

 

3. 루트 태그는 반드시 1개만 사용 

가장 부모가 되는 태그는 중복될 수 없다.