React.js

? UI 라이브러리 (공통 기능의 모듈화가 이루어진 프로그램의 집합)

SPA

? single page application
허나의 html로 이루어진 어플로, *MPA가 가지는 불편함(깜빡임, 랜더링 속도 등) 때문에 등장

*MPA (Multi page application)의 경우 요청에 의해 서버가 응답한 페이지가 존재하여 여러 페이지로 이루어진 어플

Routing

hashed routing : 해쉬 값을 기준으로 페이지를 이동
해시드 라우팅에서 URL에 해시값을 포함하는 방식에는 두 가지
#/abc123: 해시 기호(#) 뒤에 해시값이 붙는 형식
/#abc123: 해시 기호(#)와 해시값 사이에 슬래시(/)가 들어가는 형식

/about 브라우저 라우팅
(*실제로 해쉬보다는 브라우저 라우팅을 많이 씀 : 사용자에게 더 깔끔해 보인다.)

url의 구성

origin의 구성

origin? 웹서버가 있는 위치

protocal : http://
host or domain : localhost
port : :3000

그 외 구성

path : /user
로컬 위치

query string : ?sort=desc&page=1
?키=밸류
여러개 들어갈 수 있어 &사인으로 묶을 때가 있음

fragment : #hash

NPM, YARN

JS 런타임(구동되는 환경 1.브라우저 2.노드) 아래 활동하는 노드 패키지 매니저
호스팅하는 레지스트리 역할

CRA, Vite

실제로 비교해보니 CRA보다 Vite가 월등하게 빠르다. 그리고 설치된 파일이 어마어마하게 많다.... 👀...

컴포넌트 Components

? 리액트의 핵심 빌딩 블록
? UI를 통해 재사용이 가능한 여러 조각으로 나눔
? 자바스크립트 함수와 유사
? props 라는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 react 엘리먼트를 반환

함수형 컴포넌트

props라는 입력을 받음
react 엘리먼트를 반환

function welcome (props) {
	return <h1> Hello, { props.name} </h1>
}

fucntion App() {
	return <div>hello</div>
}

클래스형 컴포넌트

class Welcome extends React.Componenet {
	render() {
    	retrun <h1> Hello, {this.props.name}</h1>;
    }
}

두 가지 다 기능상으로 동일하나, 함수형 컴포넌트 사용 권장

=> 컴포넌트(블럭)란? 함수와 동일하다고 생각하면 된다.
폴더는 소문자로 시작하는 카멜 케이스, 컴포넌트는 대문자로 시작하는 카멜 케이스

명령형 프로그래밍 vs 선언형 프로그래밍

명령형 프로그래밍

직접 DOM 객체 조작

선언형 프로그래밍

UI 선언 + render 함수 호출

리액트 실습

펑션 앱 안에는 자바스크립트 영역 / 리턴 밑에는 html 영역

onClick = {함수명}
리액트에서 중괄호({})는 자바스크립트 표현식을 사용하는 문법
온클릭이 아니라 div 에도 쓸 수 있음

부모-자식 컴포넌트

<함수 />로 계층을 나눌 수 있음
앱 펑션 내부에서 <함수1 /> 함수1 내부에서 <함수2 /> ...

return

리턴 아래에는 하나의 디브만 있어야 한다. div가 필요 없을 경우에는 그냥 <></>로 여닫기만 한다.

id, class

id
className
왜 클래스가 안 될까? js에 클래스 문법이 존재하기 떄문

style

자바스크립트 객체 형태로 들어가기 때문에 style = {{키:밸류}} 두 번 감싸지는 형태가 됨
1. 자바스크립트 표현식을 사용하는 구나
2. 객체로 들어가서 {} 한 번 더 쓰는 구나
로 이해하기

=> 태그에 바로 스타일 값을 주지 않고 위에 객체 변수로 지정한 다음에 스타일로 넣으면 style = {변수명} 으로 한 번만 써도 된다. 스타일이라고 다 중괄호 두 번 아니라는 소리

props

? 부모 -> 자식으로 데이터를 전달하기 위해 쓴다 (컴포넌트끼리 정보 교환)

e.g.

function Mother() {
	const lastName = "최";
    return <Child lastName= {lastName} />;
}

function Child(props) {
	const name = "미믹"ㅣ
    return (
    	<div>
        	<p> {`내 이름은 ${props.lastName}{name}이다!`}
        </div>
    );
}
출력값 : 내 이름은 최미믹이다!

props의 특성

1. 단방향성 : 위 -> 아래 동기적으로만 흐른다.
2. 불변성 유지 : 읽기 전용으로 취급되며 변경하지 않는다.

children

컴포넌트를 < 함수 /> 로 쓰는 것과 <함수> 먀먁 </함수> 두 가지 방법이 있는데, props로 명시해주지 않더라도 먀먁이 들어갈 수 있다.

children 용도

1. 레이아웃 컴포넌트를 만들 때 주로 사용

State

변수와 변수를 변경할 수 있는 함수
const [변수명, 변수를변경하는함수] = useState("초기값");

e.g.
변수를변경하는함수("변경할것");

onClick

onClick = {함수명}

onChange

변수를변경하는함수(event.target.value);

state의 특성

불변성

메모리에 있는 값을 변경할 수 없는 것
=> 원시 데이터를 변경하지 않고, 새로운 저장 공간에 복사하여 불변성 유지하는 방식을 유지...

리액트에서 불변성이 가지는 의의

state의 변화를 확인하여 랜더링을 할 지, 하지 않을지 결정
-> 변화 전 후 메모리 주소를 비교

변화를 확인하는 방법

useState 함수를 사용해야 한다.

DOM과 가상 DOM

DOM

? document Object Model
문서의 페이지를 이루는 컴포넌트를 엘리먼트라고 함
dom은 이 일리먼트를 tree 형태로 표현한 것 (=dom tree)

e.g.
document.getElementsByClassName('.')

가상 DOM

리액트는 2가지 버전의 가상 DOM을 가지고 있다.
1. 화면 갱신되기 전 가상 DOM
(state의 변경)
2. 화면 갱신 후 가상 DOM

리액트 강의 듣고 개인 과제 하기!