React.js

한줄

What ?

React.js

💡 소프트웨어 개발을 돕기 위해 제공되는 재사용 가능한 구조나 틀을 제공하는 프로그램입니다.

💡 이를 통해 핵심 비즈니스 로직이나 창의적인 부분에 집중해 개발할 수 있습니다.

---

Why ?

React.js

1. 리액트는 컴포넌트 라는 단위로 화면의 부분을 독립적으로 관리

 대규모 웹 애플리케이션 개발 시 컴포넌트 별 관리는 역할과 기능에 따라 따로 관리하기 용이하다.

지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기 위해서

2. 가상 DOM으로 인한 충분히 빠른 속도

DOM 자체의 성능은 느리다고 할 수 없지만 매번 DOM 전체를 직접 접근하여 변화를 주면 HTML, CSS, JS파일 전체를 다시 리랜더링하기 때문에 느려질 수 밖에 없었다. 

가상 DOM를 이용해서 실제 DOM를 조작하는 횟수를 줄여서 성능을 빠르게 개선

데이터가 변경되면 리액트는 가상 DOM를 다시 변경한다. 그리고 이전의 가상 DOM과 비교해서 변경된 부분을 체크하고 변경된 부분만 실제 DOM에 적용

데이터 변경 -> 가상 DOM 리랜더링 -> 이전 가상 DOM과 비교 -> 변경된 부분 실제 DOM에 적용

출처: https://develop-enchantment.tistory.com/73 [해학:티스토리]

 

 

SPA에서 데이터 변화가 있는 부분만 빠르게 랜더링 되고 있는지가상 DOM이 아니라 DOM를 직접 제어하는 부분이 많은지데이터 변화와 라이프 사이클을 잘 이해해서 랜더링을 최적화하고 있지JSX에서 선언형 프로그래밍을 잘하고 있는지UI는 사용자의 상호작용에 바로 반응하고 있는지리액트에 같이 구성된 다른 라이브러리를 잘 조합하고 있는지

facebook 
이 만든
 JavaScript UI 라이브러리
 입니다.

react 는 HTML 1개 (싱글페이지) 로 클라이언트 렌더링 사용

 

 HTML : 요소  태그 (꺽쇠)

DOM --> 객체  TREE구조

console --> js 입력 하는 

html 내 요소 확인이 필요

--->document --> 현재의 돔을 나타냄

ex)document. body --> 돔의 바디부분만 출력

document.body.childNodes --> NodeList에는 요소 노드뿐만 아니라 주석 노드와 같은 비 요소 노드를 포함

document.body.children --> HTMLCollection을 반환합니다. 비 요소 노드는 모두 제외

document.getElementsbyTagName() --> ()안의 적힌 태그 가져오기

 

 

CSS

: id="" 준 후 # "" 후 css 적용

수도 클래스 

 

nvm 은 노드의 버전의 호환성을 높여준다.

npm은 노드의 많은 패키지를 관리해줌 

cf) yarm

 

리액트에는 html 파일이 한개

리액트에서는 jsx문법을 통해 요소를 만들고 그걸로 뷰를 그림

jsx문법은 HTML을 품은 자바스크립트로  뷰를 그리는 요소가 자바스크립트로 들어간다.

Input 태그는 열림과 동시에 닫기 

<Input type="text"/>

 

규칙!!!!!!!

1. 리액트의 경우 태그 의 닫음도 오류로 출력 !

2. return하나 당 요소 하나! 공백도 x 한개의 객체라도 넣어야 한다. null 이라도 넣어주어야 한다.

3. HTML에서 class는  className으로 사용   

4.태그에서 스타일은 객체로 넘겨줘야 한다. 

5, 변수의 내용은 {} 사용해서

 

 

######class 와 id 의 차이 --> css 적용 시 사용 

클래스는 불러올 때 클래스 명 앞에 마침표를 찍어준다.

아이디는 불러올 떄에 아이디 값 앞에 샵 표시를 해준다.

클래스는 중복 사용이 가능  페이지의 여러 곳에 사용 해도 무방

아이디는 중복 사용 x 페이지에서 한번만

<!-- 하나의 <p> 태그에 여러 클래스 사용, 클래스를 추가할 때는 띄어쓰기로 구분 -->
<p class="school name friend">김영희</p>

<!-- 하나의 <p> 태그에 하나의 아이디만 사용 가능 -->
<p id="attendance">김영희</p>

<!-- 여러개 아이디를 사용할 수 없음, 아이디의 잘못된 사용 (아래) -->
<p id="attendance education">김영희</p>    X

<!-- 한 요소가 여러개의 클래스, 한개의 아이디를 동시에 가지는 것은 가능 -->
<p class="school name" id="attendance">김영희</p>

여러가지 스타일링을 한꺼번에 적용해야 할 때는 클래스(class)를 사용
한가지만 적용하고 싶다면 아이디(id)를 사용

 

false가 남으면 HTML로 렌더링x  ( && 조건문)