[우아한 테크러닝] 3회차 정리

🌟우아한 테크러닝 3회차

🎯리액트 컨셉

리액트의 컨셉은 굉장히 간단쓰 까다로운 놈을 감싸서 받아오는 부분도 덜 까다롭게 만듬

브라우저 동작방식 태그(문자열)을 dom tree을 통해 다루기 쉬운 구조로 만들고 브라우저에 띄움. 없었더라면 집에 못가고 연봉이 올랐겠죠..?

이 리액트는 자바스크립트를 돔이 다루기 쉽게끔 vdom을 중간에 끼워넣어주는 것.

어떻게 쉽게? 마크업하듯 편하게 코딩하도록 JSX 개발

🎯리액트 구축

JSX 는 html처럼 생긴 코드를 데이터로 변환해쥼(in babel) 그냥 함수호출임 -> 좀 더 쉽게 컴포넌트 기술 가능 바깥쪽에서도 함수처럼 컴포넌트 호출가능 컴포넌트 이름을 명확히 주는 습관을 들이자.

🎯vdom

까다로운 문자열을 객체로 바꾸면 처리가 수월!

const vd = {
    type:'ul',
    props: {},
    children:[
        type :'li',props:{classNmae:"item",children:'React'},
        type :'li',props:{classNmae:"item",children:'React'},
        type :'li',props:{classNmae:"item",children:'React'},
    ]
}

요딴식으로 생겼을텐데 이렇게 하고 props 매개변수로 studylist에 바벨이 변환해서 넘겨주는거ㅇㅇ == 강의코드 내 createElement(type,props={ },…children(가변인자))랑 똑같은 구조 == createElement()는 버추얼돔 만드는애라고 생각하면 됨

이 객체를 랜더가 리얼돔으로 컨버팅해서 root에 어팬드차일드.

강의코드 내 unction createElement -> vdom 만들기

🎯사용자컴포넌트와 빌트인 컴포넌트 구분하기

type 이 fucntion App으로 들어가는데 바벨은 타입이 소문자로 들어가면 문자열로 인자를 넣어줌 근데 대문자로 들어가면 처리방식이 달라짐 어떻게? -> App 함수 자체를 type으로 넣어줌. -> 긍게 꼭 사용자컴포넌트는 대문자로 빌트인컴포넌트는 소문자로

🎯createElement에 넘겨줄때 type이 function이면?

.apply() -> 로 props와 children을 넘겨줌

🎯render

최상위 루트 컴포넌트가 객체로 변환되었을때 그대로 이걸 리얼돔으로 컨버팅하는 함수 renderElement(vdom)으로 리얼돔 넘겨주면 리턴한건 리얼돔이고. 그 리얼돔을 컨테이너에 appendchild로 붙이는 방식

• renderElement real dom을 받고.. child의 깊은곳까지 가야하므로 재귀형태를 띔 createElement()를 통해 노드타입을 받아 돔 엘리먼트를 만들어주고 노드의 자식요소들을 map시켜주면 재귀로 최하위요소(string)까지 돌고 나오면서 최상위에 appendChild

  다 나오면 엘리먼트 리턴 -> appendChild로 넘겨주기 위해서

-> 리액트는 돔을 다루기 쉬운 object로 변환해서 사용하는 것.

🎯hook

함수형 컴포넌트에서 상태를 다루는 스펙 usestate -> 배열리턴, 첫번재 값은 인자,. 컴포넌트를 키로해서 생성순서대로 index 넣고 찾을때도 그 순서대로 찾는다