react란

안녕하세요. react를 하고자 하는 개발자입니다. 제가 배운 것을 토대로 가르쳐 드리도록 하겠습니다.

react설치방법

 

react 공식문서에 더 욱 정확하게 적혀 있으니 함께 읽으시면 좋을 것 같습니다.

react 공식문서 바로가기

 

react 다운로드하기

 

react란?

- META 즉 페이스북에서 개발한 오픈소스입니다. 커다란 웹 서비스 *UI를 개발하기 위해 만들어진 기술입니다.

- react가 사용된 애플리케이션: 넷플릭스, 페이스북, 인스타, 노션 등

 

*UI : 사용자 인터페이스 즉, 브라우저에서 눈에 보이는 것들을 말합니다.

 

왜 react를 많이 사용할까?

1. 컴포넌트 기반으로 UI 사용가능
2. 화면 업데이트 구현이 용이하다.
3. 화면 업데이트가 빠르게 처리된다.

 

react 컴포넌트?

react의 컴포넌트

 

- 한 화면을 네모 박스로 구분하여 각 박스를 컴포넌트라고 합니다.

- 컴포넌트를 여러 페이지에 각각 넣는 것이 아닌 불러와서 작업이 가능하기 때문에 수정을 한 번만 해도 불러와진 모든 페이지가 수정이 됩니다

- 페이지 전체를 새 로고 침 하는 것이 아닌, 컴포넌트만 업데이트가 가능해서 속도가 빠릅니다.

 

== 이로 인해 중복코드를 제거할 수 있다, 유지보수가 편한다.

 

react는 화면 *업데이트 구현이 쉽다?

- react는 *선언형 프로그래밍이다.

- react 선언형 프로그래밍이 될 수 있는 원리는 컴포넌트 안에 있는 State라는 것을 같고 있습니다.

- State는 일종의 변수 값이라고 생각하시면 됩니다. 이때 변수의 값에 따라 *렌더링 되는 UI가 변경됩니다.

 

==react는 State의 값만 변경해 주면 자동으로 다양한 UI를 보여줄 수가 있습니다.

 

 

*업데이트: 클릭, 드래그 등 웹페이지가 스스로 모습을 바꿔 상호작용 하는 것

*선언형 프로그래밍: 목적만을 말한다.(ex] 식당에서 커피를 주문=> 커피만 받으면 행복.)

*명령형 프로그래밍: 처음부터 끝까지 다 말한다.(ex] 식당에서 커피를 주문=> 주문할 때 원두 20g, 물의 온도는 90~100도 사이... 등등 요구사항 모든 것을 말하고 주문하는 방식.)

*렌더링: 변수 값을 넣은 컴포넌트가 최초로 나타나는 것

*리렌더링: 처음에 나왔던 컴포넌트가 업데이트되는 것

 

 

화면 업데이트가 빠르게 처리된다.

기본 화면이 렌더링 되는 과정

html => DOM => Render Tree => Layout => Painting

 

일반 자바스크립트로 할 경우 하나의 스크립트가 실행될 때마다 Dom부터 Painting까지 실행된다.(각각)

react로 사용할 경우 실행될 스크립트를 모았다가 실행되기 때문에 더욱 빨리 처리가 가능하다.