20일차 TIL(React 기초반)

13일 react강의를 1회독 완료하고 개인 작업물을 진행 보았다.

 

그래도 공부해 봤다고 익숙한 로직도 있었고

역시나 생소하고 낯선 로직들도 많았다.

 

간단하게 중요하고 몰랐던 내용들을 정리해 보자면

 

컴포넌트 
함수형 / 클래스형으로 나뉘면 함수형을 위주로 쓰게 될 것이라고 한다.

함수형 :    input이 들어가면 return outPut 나오는 형태;

 

가상 DOM
리액트 DOM을 구성하는건 DOM 요소
돔을 구성하는건 DOM ;      virtual DOM 이라고 하는데 이 부분은 더 찾아보는 중이다.

 

불변성 : 메모리에 있는 값을 변경할 수 없는 것이며

원시테이타 : 숫자, 문자,, 불리언...  [불변성이 있다]

원시데이터 x : 배열, 객체, 함수..     [불변성이 없다]  라고 표현한다.

* js강의의 - 메모리 할당 js 3주차를 복습하면서 복기해 보면 좋을거 같다.

리액트는 화면의 렌더링할지를 state의 변화에 따라 결정한다.
[단순 변수는 무시한다 ]

 

 const [obj, setObj] = useState({
        name: "woor",
        age: "30",
    });

return (
        <div>
            <div>{obj.name}</div>
            <button
                onClick={() => {
               // 새로운 객체를 만들어줘야 해
                  주소값을 여전히 변경이 안된 상태로 동일하게 바라보고 있어서 그럼
                    const obj2 = { ...obj };
                    obj2.name = "martin";
                    setObj(obj2);
                }}
            >
                빈경!
            </button>
        </div>
    );

 

 

 

Component
핵심 빌딩 블록의 하나이며 조각으로 구성되어있음 UI구축작업을 수월하게 만들어줌
Render
컴포넌트가 현재 props와 state의 상태에 기초하여 ui를 어떻게 구성할지 컴포넌트에게 요청

1 렌더링을 일으키는것 triggering - UI를 주문 주방으로 전달
2 렌더링을 한다는 것은 (rendering) = 주방에서 컴포넌트가 UI를 만들고 준비하는 것
3 렌더링 결과는 실제 DOM에 커밋한다는 것은 (commit) - 리액트가 준비된 UI를 손님 테이블에 올려놓는 것

렌더링 트리거 란?
첫 리액트앱을 실행했을때
현재 리액트 내부에 어떤상태(state)에 변경이 발생했을 때
컴포넌트 내부 state가 변경되었을 때
컴포넌트에 새로운 porps가 들어올 때
 상위 부모 컴포넌트에서 위에 두 이유로 렌더링이 발생했을 때

앱이 실행되고 첫 렌더링이 일어나면 컴포넌트의 루트에서 시작하여 아래로 향하면서 훑는다
이때 컴포넌트가 반환한jsx 결과물을 DOM요소에 반영한다.
virtual DOM은 숙련 과정에서..

 

ext 파일 이동시{
package.json ;
프로젝트를 진행하다보면 node_modules 용량이 너무 커서 용량 문제가 발생 / github로 옮기는게 가장 좋다만
이럴 때에는 node_modules를 삭제하고 프로젝트를 압축하고 보냄 ->
받을 파일을 들어가서 npm install (npm i) 를 다시 설치해주면 깔끔하게 협업할 수 있다.
(이때 경로 지정을 다시 한 번 확인하고 " npm i " 를 입력해야한다.)
}

 

Ex)
arr.map(function( ){ }) 무조건 원래 함수의 개수 만큼 (3개)을 배출해 준다 (기존의 arr를 가공해서)
map 함수 : 원래 data를 가공하여 출력하는 방식;

arr.filter(function( ){ })  
조건에 맞는 거만 뽑아준다.

화살표 함수 사용시
( ) => addHandler(some.id) 라고 하면
앞 부분에 id 등 똑같이 입력을 해주어야 오류가 발생안함
addHandler( )  사용 하면 안돼;  ( ) : 즉각 실행 요청