[패스트캠퍼스:6주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 1/4

01

React 맛보기

리액트는 라이브러리(도구)로 자유롭게 사용이 가능하다.

사용자가 많다.

 

JSX, FLUX, Functional Programing, CDN??

리액트 관련 라이브러리 swr, framer motion

 

*라이브러리 : 개발 편의를 위한 도구 (예. React)

*프레임워크 : 기반 구조까지 잡혀있음 (예. Angular)

---

 

02

DOM 다루기 Element 생성하기

DOM은 브라우저가 이해하는 Element의 원형 (논리 트리로 표현)

Element는 우리가 보는것

 

Vanilla JavaScript로 element 만들기

React로 동일한 동작 구현

 

createElement()

React.createElement(
    type,
    {props},
    {...children}
)

 

ReactDOM.createRoot(document.getElementById('root'));
root.rencer(element);

 

CDN

(Content Delivery Network)

웹에서 사용되는 다양한 컨텐츠를 저장, 제공하는 시스템

리액트를 동작하게 해주는 라이브러리(?) 정도로 생각하자.

CDN에서 React 기본 세팅을 위해 가져온 스크립트

 

---

03

JSX와 Babel

JSX방식을 사용하면 React 코드가 훨씬 간단해진다.

JSX는 HTML + JavaScript 합쳐진 형태이다.

React.createElement 표현식을 더 쉽게 쓸 수 있다.

(예) const element = <h1>Hello</h1>;

JSX와 Pure React 비교 - createElement()를 하지 않아도 된다.

 

JSX를 사용하기 위해서는 JSX를 JS로 해석하는 Babel이라는 컴파일러가 필요하다. 

babel 추가.

이렇게 변수도 넣을 수 있다.

 

---

 

04

멀티 Element 만들기

children으로 넣으면 부모가 필요하고 항상 무언가 children을 감싸고 있어야 한다.

<React.Fragment />는 부모 처럼 감싸주지만, 가상의 부모라서 구조에 나타나지 않는다.

<React.Fragment></React.Fragment>는 짧게 <></> 로 적을 수 있다.

 

 

---

05

Element 찍어내기

반복되는 동작을 처리하기(함수)

*js를 사용할 때는 {}로 감싼다.

 

<Paint />은 태그처럼 생긴 함수 (커스텀 엘레먼트)

HTML 태그와 혼동되니 함수 첫 글자를 대문자로 시작한다.

children은 개수 무제한

 

---

06

JS와 JSX 섞어쓰기

string.charAt(index) : index의 글자를 선택, 반환한다.

.toUpperCase() : string을 대문자로 변경해준다.

 

심지어 주석표기도 다르다.

const Text = ({ text }) => { //js지만 jsx 리턴
	if (text.charAt(0) === text.charAt(0).toUpperCase()) { // js
    	return (
            <h1> {/* jsx */}
            	{text} //js
            </h1> {/* jsx */}
    } else {
    	return <h3>{text}</h3>
    }
}

인터폴레이션(Interpolation) : 다양한 언어를 섞어쓰는 것.