# React
React
The library for web and native user interfaces
react.dev
리액트는 페이스북에서 개발된 JavaScript 라이브러리
사용자 인터페이스(UI)를 구축하기 위해 활용
주요 목표 :
UI를 더 간단하고 효율적으로 구성하기 위함
컴포넌트 기반 아키텍처를 중심으로 동작
# 엘리먼트
컴포넌트의 구성요소!
React 앱의 가장 작은 단위
화면에 표시할 내용을 기술
일반 불변 객체, 쉽게 생성 가능
# 컴포넌트
UI의 작은 부분을 독립적으로 관리하는 단위
UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별로 살펴볼 수 있음
특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용되는 코드블록단위
재사용성 유지보수성과 모듈화를 용이하게 해줌
| 함수형 컴포넌트 | 클래스 컴포넌트 |
| 함수처럼 작동하여 속성을 입력받아 화면에 표시 | React.Component 클래스를 상속받아 더 복잡한 기능을 사용할 수 있음 |
>> 뒤에서 계속 나옴
# JSX
JavaScript XML
- 자바스크립트와 XML을 결합하여 동적인 UI 생성
- HTML과 굉장히 유사함
- 단순한 마크업 언어는 아니고, 동적표현이 가능함
- {중괄호} 안에 자바스크립트 표현식을 넣어서 변수나 함수 호출을 할 수 있음
- 컴포넌트를 대부분 JSX로 작성함
- 보통 브라우저는 JSX를 해석할 수 없음
>> Babel과 같은 도구를 사용해서 JS로 변환하여 전달함
- 항상 태그를 닫아야 하고 class 대신 className이라고 써야함
- /* 주석 */
/*예제1*/
const name = "Kim"
const element = <h1> hello {name} </h1>;
/* jsx js */
/*예제02*/
const isTrue = true;
const element = <h1> {isTrue ? 'Welcome' : 'Sign UP'} </h1>
/*예제03*/
function formatName(user) {
return user.firstName + " " + usre.lastName;
}
const user = {
firstName: "Kim",
lastName: "jjo"
}
const element = <h1> Hello, {formatName(user)} </h1>;
함수형 컴포넌트
function Welcome(props) {
return <h1> hello, {props.name} </h1>
}클래스형 컴포넌트
class Welcome extends React.Component {
render() {
return <h1> Hello, {this.props.name} </h1>;
}
}
<Welcome name="Kim"/>바벨
const element = React.creacteElement("h1", null, "Hello,World!");
# render
컴포넌트의 출력을 정의하는 역할
| 함수형 컴포넌트 | 클래스형 컴포넌트 |
| 함수 자체가 렌더링 로직을 담당 | 컴포넌트가 어떻게 보여질지 정의함 |
| JSX를 반환해야함 | |
render 메소드와 같은
컴포넌트 내부에서 반환되는 JSX 요소를
React 엘리먼트라고 함
>> 화면에 어떤 것이 보여질지 나타내며, 실제 DOM과는 연결되지 않음
함수형 컴포넌트:
리액트의 훅(Hooks) 기능이 도입되기 전에는 라이프사이클, 상태관리 등을 할 수 없었음
클래스형 컴포넌트 :
처음 도입될 때부터 있었으며,
render를 통해 JSX를 반환하고
this.state, this.setState 등을 통해 내부상태를 관리하고
라이프사이클 메서드를 통해 화면에 나타내거나 사라지는 시점에 특정작업을 수행할 수 있음
JSX과 가상 DOM을 사용하여 성능 최적화
가상 DOM :
DOM을 복제하여 실제 DOM과 비교하여 필요한 부분만 업데이트 함
장점 :
- 컴포넌트 기반 아키텍처
ㄴ 독립적인 단위인 컴포넌트로 분리하는 디자인 패턴
- 소프트웨어 엔지니어링 기본 원칙
ㄴ 관심사의 분리를 실현 가능하게 함 (Separation of Concerns)
- 단방향 데이터 흐름
ㄴ 상태(State), 속성(Props) 에 대한 관리가 명확, 데이터 흐름을 예측 가능함
# 단방향 데이터 흐름
- React에서 데이터 흐름은 "단방향" 또는 "하향식" 이라고 부름
- 부모 컴포넌트에서 자식 컴포넌트로만 속성(props) 을 통해 데이터가 전달됨
>> 자식 컴포넌트에서 직접 부모의 상태를 변경하는 것이 불가능함
일반적으로 콜백함수를 사용해서 자식에게 전달하여
자식이 함수를 호출하여
부모에게 정보를 전달할 수 있음
콜백함수 :
Callback function
다른 함수의 매개변수(파라미터)로 함수를 넘겨주는 실행가능한 코드
>> 다른함수의 매개변수로 존재하기 위한 함수
# DOM
Document Object Model
- 웹 페이지의 구조를 표현하는 인터페이스
- DOM은 비용이 많이드는 작업
→ 자주 발생하면 웹 어플리케이션의 성능을 저하시킴
- React는 이러한 문제를 해결하기 위해 가상 DOM 방식을 도입함
가상 DOM(Virtual DOM)은 실제 DOM의 복사본으로 메모리 내에 존재
>> 메모리를 잡아먹음
React 컴포넌트의 상태가 변경될 때 마다 새로운 가상 DOM 트리를 생성하고
이전 트리와 비교(diffing)하여 변경사항을 파악
이 과정을 재조정(Reconciliation) 또는 Diffing Algorithm 이라고 부름
변경사항만 파악하고
실제 DOM에 해당 변경사항만 반영하는 방식으로 작동
>> 당연히 모든 사항을 직접 반영하는 것 보다
훨씬 더 빠르게 업데이트처리 할 수 있음
장점 :
- 성능 최적화
- 코드 단순화
- 크로스 플랫폼 호환
단점 주의점 :
- 가상 DOM도 사용 방법에 따라 성능 문제가 발생할 수 있음
ㄴ 상태변화가 너무 자주 일어나거나 컴포넌트 구조가 복합하면
ㄴ 그래서 설계가 중요
# 잠깐 상식
NPM
Node Package Manager
JavaScript의 패키지 관리자
Create React App
프로젝트 생성을 간소화하는 공식 CLI 도구
CLI
Command Line Interface
# Props
속성
부모 컴포넌트로부터 자식 컴포넌트로 데이터가 전달될 때 사용
>> 부모가 자식에 데이터를 전달할 때 사용
속성은 읽기전용으로 한 번 전달받으면 그 값을 바꿀 수 없음
>> 컴포넌트간의 통신
function Child(props) {
return <div> {props.message} </div>;
}
function Parent() {
return <Child message="Hello from Parent" />;
}
# State
상태
Props를 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용했다면,
state는 하나의 컴포넌트 안에서 전역변수처럼 사용하는 것
상태는 컴포넌트 내부에서 선언되고
컴포넌트 동작에 필요한 데이터를 저장함
상태값이 변경되고
변경될 때 사용자와 상호작용이나 데이터 업데이트
상태가 변경되면 React는 상태를 감지하여 컴포넌트를 랜더링함
클래스형 :
this.state로 상태를 정의하고
this.setState로 상태를 업데이트 함
함수형 :
useState 라는 훅(Hook)을 사용하여 상태 관리
useState는 초기값을 받아서 현재상태와 해당상태를 업데이트하는 함수 두가지를 반환
# Hooks
React 함수형 컴포넌트에서 상태(state)와 생명주기를 사용할 수 있게 해주는 기능
원래는 클래스형 컴포넌트를 썼는데
불편해 → 더 편하게 하자 ! → 함수형 컴포넌트
import React, { useState, useEffect } from 'react';
>> react에서 기본으로 제공해주는 useState()와 useEffect () 함수를 사용하기 위해 임포트 해줌
1. useState Hook
상태를 함수형 컴포넌트에서 관리할 수 있게 해줌
일반적으로 배열 형태로 반환됨
>> 객체 배열 숫자 문자 다 저장할 수 있는 변수
>> 첫번째 값: 상태값 // 두번째 값 : 상태값을 업데이트 해주는 함수
ex)
const [num, setNum] = useState(1);
// 변수 함수 초기값
2. useEffect Hook
생명주기 메서드(마운트들)와 비슷한 역할을 함
특정작업, 상태변화를 진행함에 있어 부작용(side effect)을 처리하는데 사용
side effect :
데이터 가져오기, 수동적인 DOM 조작 등
다른 컴포넌트에 영향을 줄수 있는 작업들
useEffect( ( ) => { }, [ ] );
함수 배열
배열안의 요소들이 바뀌었을 때(수정됐을 때)만 함수를 실행 하겠다
예를 들면 문서의 타이틀을 계속 변화를 주면서 바꾸고 싶움
>> 외부에 작업을 할때 처리할 수 있음
cleanup function
반환하는 함수여서 return 써야함
컴포넌트 unmount시 dependency가 변경되기 전에
여기서 필요한 작업을 할 수 있음
>> 최종 변경 전에 정리해주는 함수
3. useContext Hook
Context API를 함수형 컴포넌트에서 사용할 수 있도록 도와줌
전역적인 상태를 관리하거나
깊은 중첩에 걸친 컴포넌트들에게 props를 전달하는 것을 피하기위해 사용
useContext Hook을 사용하면 context 객체를 인자로 받아 해당 context의 값을 반환함
이 값은 context Provider 컴포넌트에게 제공되며
Provider가 없다면 context 객체 생성시 전달된 기본값이 됨
- Provider
Context API에서 중요한 역할을 하는 컴포넌트
Provider는 context를 생성할 때 반환되는 컴포넌트로
그 자식 컴포넌트들에게 context 값을 제공함
4. useReducer Hook
복잡한 상태 로직을 다루기 위해 사용
useState 보다 더 강력한 방식으로 작동
액션(action)과 리듀서(reducer) 패턴을 사용
현재 상태와 함수(dispatch)를 쌍으로 제공
함수는 action을 인자로 받아 reducer 한테 전달하고
reducer는 현재 상태와 action을 기반으로 새로운 상태를 생성함
5. Performance Hook
node.js의 API
어플리케이션의 성능을 측정하고 분석하기 위한 도구
>> 다양한 이벤트, 작업에 세밀한 타이밍 정보 제공 등
- Preformance Timeline
특정 작업이 언제 시작했고 언제 끝났는지
그리고 그 사이에 무슨일이 발생했는지 볼 수 있음
- User Timing
개발자가 직접 특정 코드의 실행시간을 측정할 수 있게 함
- High Resolution Time
마이크로초 단위로 시간을 측정해줌
- Performance Observer
Preformance Timeline에서 일어나는 변화를 비동기적으로 관찰함
6. Ref Hook
리퍼런스
.current 속성으로 변경 가능한 ref 객체를 반환함
이를 통해서
- DOM 접근 : DOM요소에 직접접근할 때, useRef를 사용하여 해당요소의 참조를 저장할 수있음
- 변수 저장 : 컴포넌트 라이프사이클 동안 값이 유지되어야하지만, 리랜더링이 되지 않는 변수를 저장하는데 사용
을 해줄 수 있다
7. Custom Hook
함수형 컴포넌트 내에서 로직을 재사용하기 위한 기능
use로 시작하는 함수를 작성해서 다른 컴포넌트에서 쓸 수 있게 해줌
- 함수 이름 :
Custom Hook 함수는 use로 시작해야함
- React Hook 사용 :
Custom Hook 내부에 다른 React Hook을 자유롭게 사용할 수 있음
- 로직 추상화:
특정 로직 또는 기능을 추상화 하여 제공해야 함
# 컴포넌트의 구조화와 계층구조, 컴포지션 (Composition)
컴포지션 :
더 큰 단위의 컴포넌트를 작은 단위의 컴포넌트로 분해하는 방법
function App() {
return (
<div>
<Header />
<Body>
<Article />
<Sidebar />
</Body>
<Footer />
</div>
)
}
/*각각이 다 컴포넌트(대문자)*/
- 데이터 전달
부모가 자식한테 데이터를 전달하기 위해 속성(props) 사용
- 데이터 접근
자식은 전달받은 props를 통해 데이터에 접근할 수 있음
key값을 통해 원하는 데이터에 접근할 수 있음(쩜어쩌구)
- 읽기전용
React의 중요한 원칙 'props are read-only.'
>> 수정 불가능!
- 다양한 타입의 데이터 전달 가능
'FrontEnd > React' 카테고리의 다른 글
| [React] 헷깔리는 것 정리 (0) | 2023.09.13 |
|---|---|
| [React] 간단실습.01 (로그인, 할일목록, 로또, 바꾸기) (0) | 2023.09.11 |
| [React] 03 (0) | 2023.09.11 |
| [React] 02 (0) | 2023.09.11 |
| [React] React 시작하기 (0) | 2023.09.08 |
