import React from 'react';
import ReactDOM from 'react-dom';
// 인터페이스
interface AppProps {
title: string;
color: string;
}
// 타입 정의
// 상태 : 시간의 흐름에 따라서 변화하는 것
// 현재 상태는 불변
function App(props: AppProps){
return (
<h1>{props.title}</h1>
)
}
// 버추얼 돔의 랜더를 이용
// 두개의 인자
// render 최상위에서만 실행
// 단일 버추얼 돔
ReactDOM.render(
// 첫번째 인자 리액트 컴포넌트를 DOM으로 변경한 다음에 두번째 인자 HTML 컨테이너에 붙쳐넣는다.
// StrictMode => 경고해주는 안내해주는 개발툴에서 제공하는 툴
<React.StrictMode>
<App title="Tech Hello?" color="blue"/>
</React.StrictMode>,
// 돔으로 변경후 root 컴포넌트에 붙친다.
document.getElementById('root')
);
🎈 Babel에서의 JSX transpiler
Babel 안에 있는 JSX transpiler가 오른쪽처럼 변환해준다.
그렇기 때문에 안썻다고 생각해도 리액트 컴포넌트는 항상 리액트 패키지 import를 시켜야한다.
그 이유는 리액트 패키지는 변환된 다음에 쓰기 때문에 변환하기 전에 반드시 포함해준다.
JSX는 결국 CreateElement라고 하는 리액트가 제공한 함수를 좀 더 편하게 만들어놓은 (마치 HTML 태깅하듯이) 구조일 뿐이다.
// 첫 번째 인자는 HTML 태그처럼 생긴 태크명, 두번째인자는 Property, 세번째 인자는 Child
function App() {
return /*#__PURE__*/_react.default.createElement("h1", {
id: "header"
}, "hello ");
}
🎈 CRA의 장점과 문제점
장점: 간단하고, 왠만한 것들은 다 세팅되어있다.
단점
장점 그 외의 모든 것은 단점
CRA가 제공하지 않는 세팅을 할 때 굉장히 까다롭다.
CRA의 유연하지 못한 몇가지들을 이렇게 바꿨으면 좋겠다라고 말을해도 CRA 기여자분들은 보수적이라서 잘 받아주지 않는다.
가장 크리티컬한 문제는 다양한 환경에 대한 대응이 어렵다.(local, product 두가지만 지원)
eject를 사용해 설정 파일을 빼서 커스터마이징이 가능하지만, 매우 복잡하고 하지말라고 권고를 하고 있다.
🚀 상태관리
🎈 Flux
제일 먼저 나온 approach가 flux 아키텍처🎈
🎈 Redux
redux는 flux를 조금 더 정형화하고 더 쓰기 편하고 simple하게 제공되는 라이브러리
🎈 Mobx
Mobx는 redux의 대채품보다는 완전히 상태를 관리하는 페러다임을 바꿔버린 다른 방식이다.
상태도 다르고 상태를 바라보는 관점도다르다.
처음에 쓰면 굉장히 편하지만, 단순한 것은 단순한 형태를 취하는 이유가 있다.
단순한 형태를 가지면 그걸 만든 사람이 원하는 형태도 결과물을 가이드하기 쉽기 때문이다.
🚀 첫번째 시간 수강 후기
일단 강의하시는 김민태님께서 굉장히 친절하게 알려주셨고 그에 따라 배울점이 많다고 느꼈습니다.
중간에 쉬는 시간이 두번정도 있었지만 그 시간 마저도 질문에 답변을 해주는 QnA 시간을 가졌습니다.
react를 공부를 하면서 뭔가 잘 못 공부하고 있다는 생각이 들었고 그에 따라서 자극을 많이 받았던 기회였습니다.
교육생들 또한 정말 열정적이고 배우고자하는 의지?가 많아서 벌써 슬랙방도 파졌고 이번 기회에 네트워킹이 잘되서 스터디를 할 수 있는 기회가 생겼으면 좋겠습니다.
앞으로 남은 교육기간도 기대가 되고 집중해서 들을려고 노력해야겠습니다.. 😤
🚀 주니어들한테 해주고 싶은 말(김민태 님께서..)
주니어들이 시니어와 비교했을 때 압도적으로 유리한 부분은 시간
이 시간이 있다는 benefit을 충분히 활용해서 초조하게 여러가지 공부를 하는 거 보다는 시간이 충분히 있으니 여유를 가지고 했으면 좋겠다.
