React
웹이 점점 복잡해져서 UI를 만들기 위한 Javascript 라이브러리
리액트는 가상돔(virtual dom)을 통해 ui 를 빠르게 업데이트
이전 UI 상태를 메모리에 유지해서 변경될 UI의 최소집합을 계산하는 기술
—> 불필요한 업데이트를 줄일 수 있음.
실제돔을 간략하게 만들어서 저장해있다가 변화가 생기면 해당부분만 변경
State change —> compute Diff —> re-render
상상해서 갈아보고 마지막에 필요한 부분만 갈아끼워 넣음
Compute diff 까지는 가상돔에서만 움직임
CRA create-react-app
- 개발환경을 쉽게 하기 위한 툴체인
- 하나의 명령어로 리액트 개발환경을 구축
Node.js
- 자바스크립트는 브라우저 위에서 동작하는 언어였는데 브라우저 밖에서도 사용할 수 있게 하는 환경 -> 탈웹
NPM
- node 패키지 매니저 (node 패키지들을 업데이트, 삭제, 추가하기 위해 관리해 주는 도구)
Node-modules
- 프로젝트에서 사용하는 패키지들의 코드소스들이 모여있는 폴더
Packages.json
- 패키지들에 대한 정보들이 저장되어 있는 파일.
- dependencies 는 노드패키지들의 리스트를 나타내고 있다.
.git ignore
- git으로 관리하지 않는 파일/폴더들이 나열되어 있는 파일
- node-modules는 용량이 많아서 무거워서 올릴 필요 없다.
프로젝트에 필요한 패키지들은 package.json에서 나열되기 때문.
index.html
- 화면에 구현될 파일
index.js
- App.js 파일을 index.htm에 구현되도록 지정하는 파일
ReactDOM.render(<첫번째인자>, 두번째인자)
ReactDOM.render(<Routes />, document.getElementById("root"));- <컴포넌트 />, (컴포넌트를 html에 위치할 곳).
- 해당 컴포넌트를 두번째인자에 지정한 곳으로 화면구현(렌더링)할 것이다.App.js
- 화면에 구현될 코드들이 있는 파일
JSX
-
리액트에서 쓰는 자바스크립트 확정 문법
- 마크업을 가져와서 기능을 붙이고 했으나 JS에서 마크업과 로직구현을 한번에 처리할 수 있게 나온 것이 JSX. -
HTML 파일을 따로 안만들어도 됌.
-
HTML태그를 그대로 사용할 수 있음
- 직관적으로 코딩을 할 수가 있음. 눈에 익숙하고 효율적으로 코드를 할 수 있음 -
DOM + Event를 한번에 처리할 수 있음
-
하나의 부모 태그로 묶여져 있어야 바벨이 인식.
—>js return ( <div> 여기에 코드를 </div> )안에 넣거나
return ( <> 여기에 코드를 </> ) —> fragment 넣어야 함 —> 실제 돔에는 표시 안됌. 단순 묶기위한 거.
-
Self closing
—> input,div, img… 등 모든 태그에 셀프클로징 할 수 있다.
안에 내용이 없을 경우에… -
카멜케이스
—> 클래스 부여할 때나 속성 부여할 때.
카멜케이스로 온전히 표현 class => className,
on click => onClick. -
Javascript 동작가능 —>
{ }
—> 중괄호는 자바스크립트로 인식. 중괄호가 없으면 태그 안의 문자열 그대로 나옴.onClick = { this.alertMessage } ===> 클릭했을 때, 경고창 뜨게 하는 거.
Component
- 재사용 가능한 UI 단위. 각각의 독립된 모듈
- 함수형 / 클래스형 종류가 있음
- 클래스형에는 state, lifecycle 을 사용할 수 있으나, 함수형은 안됌.
- 그러나
hooks를 통해 함수형도 가능하게 됌. - 클래스는 좀 더 직관적이라서 처음에 배움.
- 가독성 좋아지고, 재사용가능해짐. 유지보수 좋음. 그리고 확장성 있게 해줌
- 컴포넌트는 또다른 컴포넌트를 포함
(부모 컴포넌트 -> 자식 컴포넌트)
-
Class 형 컴포넌트
- render 함수가 꼭 있어야 한다.
- 훨씬 더 직관적이고 배우기 쉬움.
( lifecycle, state, props 같은 주요개념들 )
-
함수형 컴포넌트
- 실무에서 많이 사용함.
- 만들기 간편하고, 로직 / 기능 등 분리하기 편함
State
데이터는 변수나 state에 넣어 관리
변수 대신 쓰는 데이터 저장공간 하기 이용해서 만들어야 함
Import React, { useState } from ‘react’;
- import에 state 문법 쓰겠다고 해야 함.Let [글제목2, 글제목변경] = useState( [ ‘남자코트추천’ , ‘강남우동맛집’])
<h3> { 글제목 } </h3>
<h4> { 글제목[1] } </h4>장점
State가 변경되면 HTML이 자동으로 재랜더링
제목을 정렬하든가 제목을 수정하든가 등 새로고침없이 재랜더링
자주바뀌고, 중요한 데이터는 변수말고 state에 저장
변수와의 차이점은
변수는 변경되어도 재랜더링 안되고, 새로고침을 해야 함
