리액트 기초 :: React basic

React 상식

React의 5가지특징

    1. Element : 컴포넌트 최소단위 (header, h1, p, span ...)
    2. JSX(javascript XML) : 자바스크립트 확장 문법 , 겉으로 보기앤 자바스크립트 + html
    3. Component : 첫글자 대문자
        a. function 형
            i. ReactElement 리턴. (훅과 연동)
        b. class 형
            i. State관리 (동적요소)
            ii. 훅이 클래스 컴포넌트를 대체가능 (클래스는 상대적으로 무거움)
    4. Props : 데이터 동기화를 위해 사용됨
        a. Read only (바꾸면 안되기 때문, 동기화니까)
        b. 위에서부터 데이터가 흐른다.
    5. State : 동적데이터
        a. 이벤트 우측에는 함수 선언문이 놓여야 한다.
            i. 함수 실행문이 놓이면 페이지 로딩후 바로 실행되 오류가난다.
            ii. 따라서 선언문으로 놓고 이벤트가 생길때 실행되도록 만든다. 
        b. 시간에 따라 변하는 데이터는 state에 보관한다.
            i. 클래스컴포넌트 안에 state는 변수처럼 사용된다
            예)
            state = {
            score : 10
            }
        c. state 규칙
            i.  state를 변경하는 방법은 setState 밖에 없다
            ii.  setState에 state를 수정하면 merge (오버라이팅) 된다.
            iii.  setState는 비동기로 처리되기 때문에 이전 상태에 따라 현재 상태를 업데이트할 시에는 이전 상태를 받아서 처리해야 한다. (prevState 이용하기)

 

 

React의 원리

DOM을 json객체(JavaScript Object Notation 자바스크립트 객체 표현법)형태의 자바스트립트 객체로 만들고 json에 변경사항이 있는지 확인, 적용 한다.

 

DOM
 - 내가작성한 html코드가 브라우저에 의해 파싱(parsing:분석)되면 DOM이된다.
 - 브라우저에서 지원하는 개발자툴에서 보이는것이 DOM이다.
 - javascript는 브라우저가 읽고 작업을 할 수 있는 언어. DOM은 작업이 이뤄지는 장소.
 - javasciprt로 하는것 = DOM API

React-DOM

1. React Element

DOM같이 보이는 자바스크립트 객체
ex) <h1 id="react-container">Baked Salmon</h1>
Creat Element.구성요소
 - 첫번째 파라메터 : type
 - 두번째 파라메터 : 속성
 - 세번째 파라메터 : child Element
2. React Component
재사용이 가능한 부분을 class로 만들고 class로부터 인스턴스(객체)를 생성하는 요소.