📌 React란?
- 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하기 위해 사용(페이스북 제공)
📌 특징
1. 컴포넌트 기반 구조
- 독립적이고, 재사용 가능한 코드 조각으로, 여러 컴포넌트를 조합하여 크고, 복잡한 사용자 인터페이스를 만들 수 있다.
2. 가상 DOM(Virtual DOM)
- 상태가 변경되면 실제 DOM에 변경을 적용하기 전에 가상 DOM에 먼저 변경을 적용하고, 이를 실제 DOM과 비교하여 필요한 부문만 업데이트 하는 방식 -> 성능이 향상됨
💡 요약) 값 변경 > 가상 DOM 변경 적용 + 실제 DOM 비교 > 필요 부문만 업데이트 > 성능향상
3. JSX(JavaScript Xml)
-
JSX는 자바스크립트와 HTML을 결합한 문법, UI를 정의할 때 직관적이고 읽기 쉽게 만들어줌
-
JSX는 브라우저가 이해할 수 있는 자바스크립트 코드로 변환
HTML
<h1>Hello, world!</h1> 이 모양을 만든다면?JS
JS
const h1 = document.createElement('h1');
h1.innerText = "Hello, world!";
body.append(h1);JSX
const element = <h1>Hello, world!</h1>;
return (
{element}
)📌React 사용해보기
✅ node.js 설치
✅ workspace에 react 파일 생성
💡 npm : Node Package Manager
💡 yarn : npm의 성능적 문제 보완
✅ Yarn 설치 및 React 앱 생성
$ node -v
노드 js 버전 확인
$ npm install -g yarn
npm에서 전역으로 얀 설치
$ yarn --version
얀 버전 확인
$ yarn create react-app (앱이름)
Happy hacking! 문구가 나오면 설치 끝
Ctrl + Shift + p
Git bash 선택
Ctrl + Shift + (백틱)
$ yarn start
React 기본 구동 개념
💡 기본 포트는 3000번
💡 리액트는 App.js 파일 안에 return 구문안에 작성되어 있는 코드가 화면에 렌더링 됨
index.js 기본 구성 개념
App.js에서 jsx 구문 수정해보기
💡 터미널 작동 관련
터미널 Ctrl + Shift + (백틱) 으로 열고
터미널에서 yarn start 서버 켜기
터미널에서 Ctrl + c 서버 끄기
🔥 예제 1번(클래스형 컴포넌트)
// Component 예제 1
import { Component } from "react";
/*
* Component :
- React 앱의 구성 요소로, 재사용 가능
- UI를 작은 조각으로 나누어 관리
- 컴포넌트명은 보통 대문자로 작성
1. 클래스형 컴포넌트 : React.Component 클래스를 상속받아 구현
2. 함수형 컴포넌트 : 함수 형태로 구현
* state와 props
React 컴포넌트는 두 종류의 데이터를 다룸
1. props(속성) : 부모 컴포넌트로부터 전달되는 읽기 전용 데이터
2. state(상태) : 컴포넌트의 내부에서 관리되며, 컴포넌트의 동작 및 UI 렌더링을 제어하는데 사용
(내부 상태를 관리하는데 사용되는 데이터)
*/
// 1. 클래스형 컴포넌트
class Exam1 extends Component { // 컴포넌트의 선언부
// 컴포넌트 정의
// 필드
// 생성자
constructor(prop) { // prop : 부모에게 받은 속성
super(prop);
this.state = { count : 0 }; // state : 컴포넌트 내부 상태 관리에 사용되는 데이터
// count는 Exam1이라는 컴포넌트의 내부 상태 중 하나의 데이터이며,
// 초기값이 0으로 설정됨.
}
/*
************************** 상태state)와 변수(variable) **************************
React에서 상태(state)와 변수(variable)는 둘 다 데이터 저장과 관련되어 있지만,
각기 다른 역할과 사용방식을 가진다.
- 상태(state)는 React 컴포넌트에서 데이터가 저장되는 곳으로,
[중요!] 상태값이 변경될 때 마다 컴포넌트가 다시 렌더링된다.
- 변수(variable)는 컴포넌트 내에서 상태가 아닌 다른 데이터를 저장하기 위해 사용되므로,
변수값이 변경되어도 컴포넌트는 다시 렌더링되지 않는다.
*/
// 메서드(함수)
handleClick = () => { // handleClick이라는 이름의 함수를 정의함
this.setState({ count : this.state.count + 1 });
// 이 컴포넌트의 상태(state)중 count를 현재 상태값에서 +1 한 값으로 상태를 다시 세팅(변경)
}
// render 함수(클래스형 컴포넌트에서 필수 구문)
render() {
// 클래스형 컴포넌트에서 render 함수 안에 return 구문을 필수로 작성해야 한다.
// return에는 무엇을 렌더링할지 작성하면 됨.
return (
<div>
<h1>Count : {this.state.count}</h1>
<button onClick={this.handleClick}>증가</button>
</div>
);
}
}
export default Exam1; // 컴포넌트 내보내기
// == 해당 Exam.js 파일에서 기본적으로 내보내는 컴포넌트의 이름은 Exam1이다.
🔥 예제 2번(함수형 컴포넌트)
⭐ 함수형 컴포넌트를 많이 사용하는 추세
🎯 클래스형 vs 함수형 요약
클래스형 컴포넌트 : React.Component 클래스를 상속받아 구현
✅ 장점
- 생명주기 메서드 제공 : componentDidMount, componentDidUpdate, componentWillUnmount...
-> 컴포넌트의 생명주기 동안 특정 동작을 쉽게 구현할 수 있음
✅단점
- 복잡성 : 문법이 복잡하고, this 키워드를 자주 사용해야 하므로 코드를 작성하고 이해하기 어려울 수 있음
- 함수형 컴포넌트에 비해서 코드 길이가 길다.
- Hooks 도입 이후 사용 추세 감소
2. 함수형 컴포넌트 : 함수 형태로 구현
✅ 장점
- 간결함 : 코드 길이 감소, this 키워드 사용할 필요가 없기 때문에 이해하기 쉽다.
- Hooks 사용 가능 : Hooks를 사용하여 함수형 컴포넌트에서도
상태 관리와 생명주기 메서드와 유사한 기능을 구현할 수 있음- 성능 최적화 : 클래스형 컴포넌트에 비해 메모리 사용이 더 적고, 성능이 더 좋음
✅ 단점
- Hooks를 사용한 생명주기 관리가 클래스형 컴포넌트의 메서드보다 직관적이지 않을 수 있음(러닝커브 있을 수 있음)
- 레거시 코드 호환이 떨어진다(기존 클래스형 컴포넌트와 호환이 어려울 수 있음)
