특징
1. 컴포넌트(레고) 기반 구조
- 독립적이고, 재사용 가능한 코드 조각으로, 여러 컴포넌트를 조합하고 크고, 복잡한 사용자
인터페이스를 만들 수 있다
2. 가상 DOM(Virtual DOM)
- 리액트는 페이지위에 가상 DOM 이 존재
- 페이지를 수정 하면 가상 DOM 이 먼저 읽어드리고
나중에 진짜 페이지에 덮어 씌어준다.
3. JSX(JavaScript Xml)
- JSX는 자바스크립트와 HTML을 결합한 문법으로, UI를 정의할 때 직관적이고 읽기 쉽게 만들어줌 JSX는 브라우저가 이해할 수 있는 자바스크립트 코드로 변환
<h1>Hellow, world!</h1> 이모양을 JS 로 만든다면?
const h1 = document.createElement("h1");
h1.innerText = "hello, world!"
body.append(h1);JSX 로 만들면
const element =
<h1>Hello,world</h1>return(
{element}
)
return 안에 있는 {element} 는 화면에 만든 element 를 띄어주겠다는 소리
Node.js 를 설치
Node.js 는 Runtime 환경을 제공해준다.
C://tools 에 받아주기
npm = node package manager 자바스크립트 언어를 관리하기 위한걸 npm 이라 한다.
node.js를 설치하면 자동적으로 npm 도 설치됨
npm 이 가끔 성능 적인 문제가 발생할때가 있기 때문에 yarn 이 등장함.
git bash 는 npm, yarn 을 설치하기 효율적임
c://workspace 에 React 폴더 생성
git bash 열어서 node -v 입력
다운 받은 버전 확인
npm 보다 yarn 이 빠르고 이용하기 쉬워서 yarn 을 설치할거임
입력후 설치
yarn 버전 정보 확인
yarn 으로 프로젝트 생성하기
여기 app 뒤엔 리액트 앱의 프로젝트 이름을 지정해주고 입력 띄어쓰기 한번하고 입력해야된다.
이렇게 뜨면 설치완료
이렇게 ls 를 입력하면 지금 내가 있는 곳에 있는 폴더들을 나타냄
이동해야되서
cd 를 이용해서 my-app 으로 이동함
이동하고
code . 를 이용해서 그 폴더에서 vscode 를 열어줌
ctrl + shift + ` 로 터미널 열음
입력
잘못입력하면 POWERSHELL 이나 이상한게 떠잇을거다.
터미널에서 yarn start 입력
React 는 return 구문안에 작성되어있는게 화면에 보여진다
이렇게 작성되어있는데
function app( 내용 ) <-- 이건 컴포넌트
export default App <-- 밖으로 내보낸다
index.js 파일로 이동
./App 에서 App이라는 함수를 불러온다.
이 코드를 보면
root 라는 id를 가진얘를 root 라는 이름을 주겠다
root 라는 id 를 가진얘는 어디있냐?
Public 폴더안에있는 index.html 에 있다
얘를 불러다가 root 로 삼겠다는 뜻이다.
이안에있는 내용을 렌더링 하겠다
어디서?
index.html 에다가 넣어주겠다
그래서 화면을 켯을때 보이는 화면이
index.html 화면이라는 뜻이다.
root 라는 id를 가진 DOM 요소를 찾아 그것을 루트로 사용하도록 설정함(public 폴더의 index.html 에 존재)
감싸져있는
<React.StricMode></React.StrictMode>이거는 개발 중에 일부 문제를 검사하고 경고를 표시하여 개발자에게 앱의 잠재적인 문제를 알려줌
react 의 js 주석은 중괄호 안에다가 작성해야됨 그리고 ctrl + /
터미널 여는 방법은
ctrl + shirt + `
터미널에서 yarn start 서버 켜기터미널 닫는 방법은
터미널에 마우스를 올리고
ctrl + c
리액트에서 js 파일을 만들땐 대문자로 시작함 < 컴포넌트
리액트는
-
클래스형 컴포넌트 : React.Component 클래스를 상속받아 구현
-
함수형 컴포넌트
클래스형 컴포넌트
React.Component를 상속받아 구현 해야되므로 import
state 와 prop 은 React 에서 중요한 개념
State , props
React 컴포넌트는 두 종류의 데이터를 다룸
- props(속성) : 부모 컴포넌트로부터 전달되는 읽기 전용 데이터
- state(상태) : 컴포넌트의 내부에서 관리되며 컴포넌트의 동작 및 UI 렌더링을 제어하는데 사용(내부 상태를 관리하는데 사용되는 데이터)
부모가 Exam1 생성자에 값을 전달할 수 도 잇는데
prop 이 그 부모한테 받은 속성임
super(prop) 으로 prop 을 전달하겠다 라는 뜻
state 는 컴포넌트 내부 상태를 관리하는데 사용되는 데이터
state : 컴포넌트의 내부 상태를 관리하는데 사용되는 데이터
Count 는 Exam1 이라는 컴포넌트의 내부 상태 중 하나의 데이터이며,
초기값이 0으로 설정됨,
React에서 상태(State)와 변수(variable)은 둘 다 데이터 저장과 관련되어 있지만, 각기 다른 역할과 사용방식을 가짐.
- 상태(state)는 React 컴포넌트에서 데이터가 저장되는 곳으로, 상태값이 변경될 때 마다 컴포넌트가 다시 렌더링된다.
- 변수는 컴포넌트 내에서 상태가 아닌 다른 데이터를 저장하기 위에 사용되므로 변수값이 변경되어도 컴포넌트는 다시 렌더링되지 않는다.
let num = 0;
num = 1;
으로 있는데 이렇게 변수 값을 바꿔주면
화면에 num 이 1로 바뀔까 ?
이렇게 작성하면
body 태그에 작성된 0이 화면에 렌더링 된다. doc.getID("num") = 10
이렇게 재설정해도 화면에는 고정으로 0으로 되어있다
근데
state 로 작성하면 바로 렌더링된다.
이 클래스에서 = this
this.setState 이 클래스의 상태
({}) 중괄호를 쓰는이유는 여러가지 값을 나열 하기 위해
count : this.state.count + 1 = count += 1 이라는 뜻
render(){} 메서드가 필수로 들어가야된다 클래스형 함수엔
js 에서 변수값을 부를땐 중괄호를 감싸주면된다
onClick 에서 c는 리액트에선 대문자
this.handleCheck 는 이 클래스에서 handleCheck라는걸 불러준다는 뜻이다.
마지막에 
내보내줘야된다.
해당 Exam1.js 파일에서 기본적으로 내보내는 컴포넌트의 이름은 Exam1 이라는 뜻
const [name, setName] = useState 는
name 의 변수를 선언 이거를 변경하려면 setName 을 이용해서 변경함
useState 는 hook 이라고 상태값을 손쉽게 만든 기능 이라고 보면된다.
함수형은 render 라는 메서드가 필요없음
바로 return 하면됨.
함수형은 this 를 안씀
클래스형은 button 에 메서드를 불러올때 this.handlerClick 을 사용
요즘은 함수형 컴포넌트를 자주 씀
예전엔 클래스형 컴포넌트를 사용했음
클래스형의 컴포넌트의
장점
- 생명주기 메서드 제공 :
ComponentDidMount , ComponentDidupdate, componentWillUnmount ... 등의 생명주기 메서드를 사용할 수 있어서 컴포넌트의 생명주기 동안 특정
동작을 쉽게 구현할 수 있음
단점
- 복잡성 : 문법이 복잡하고, this 키워드를 자주 사용해야 하므로 코드를 작성하고 이해하기 어려울 수 있음
- 함수형 컴포넌트에 비해서 코드의 길이 증가
- Hooks 도입 이후 감소된 사용
함수형 컴포넌트의
장점
- 간결함 : 코드 길이가 줄어들고, this 키워드 사용할 필요가 없어서 이해하기 쉽다
- Hooks 사용을 해 함수형 컴포넌트에서도 상태관리와 생며주기 메서드와 유사한 기능을 구현 할 수 있음
- 성능 최적화 : 메모리 사용이 더 적고, 성능이 더 좋음
단점
-
Hooks 를 사용한 생명주기 관리가 클래스형 컴포넌트의 메서드보다 직관적이지 않을 수 있음 .()
Hooks 를 어떻게 사용하냐에 따라서 러닝커브가 있을 수 있음 -
기존 클래스형 컴포넌트의 호환이 어려울 수 있음
