day14. 리액트 컴포넌트

아는벌·2023년 2월 13일

web (1)

목록 보기

14/16

MPA와 SPA

MPA(Multi-Page Application)

클라이언트의 요청에 따라 페이지 생성 반환
클라이언트가 요청하는 모든 페이지가 서버에 존재
서버가 모든 페이지 생성 및 응답
페이지 작은 변화에도 항상 redict

SPA(Single-Page Application)

하나의 페이지에서 구동
필요한 데이터는 Ajax 등의 기술로 서버에서 JSON 형식으로 제공받음
클라이언트는 필요한 부분의 데이터만 요청 받음
트래픽이 적음

자바스크립트 기반 SPA 프레임워크

1) jQuery

크로스브라우징 미슈 및 레거시 Web API의 부족한 기능 보완

2) Angular

데이터 바인딩 및 컴포넌트 단위 개발 패턴 정립

3) React

양방향 바인딩에 의한 성능 저하 문제 해결
짧고 간결한 함수형 컴포넌트 지원

리액트(React)

SPA 기반 WEB UI(User Interface) 구성을 위한 자바스크립트 라이브어이
재사용 가능한 UI 컴포넌트(리액트 애플리케이션 구성 기본 단위) 생성
HTML UI 컴포넌트 = HTML + CSS + Javascript를 하나로~

동작방식

기존 웹 - 클라이언트의 요청이 있으면 서버에서 UI(화면구성+데이터)생성
리액트
- 클라이언트 : 필요한 데이터를 서버에 요청 -> 응답 받은 데이터를 클라이언트에서 가공하여 UI 생성
- 서버 : 요청이 들어오면 요청 파라미터를 받아 처리 결과를 JSON 형식으로 클라이언트에 전달
- Client Side Rendering(CSR)

React Element

타입과 props를 가지는 리액트 객체
브라우저 DOM 엘리먼트에 대한 정보를 담고 있는 객체
React DOM 객체 리터럴
실제 DOM은 아님! JSX형식을 표현한 단순 객체
ReactElement는 포함하는 값을 변경할 수 없음

// 예제
import React from 'react';
import ReactDOM from 'react-dom/client';

const myFirstElement = <h1>Hello React!</h1>

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);

JSX

JSX(Javascript XML) - 문법적 편의를 위해 개발된 자바스크립트 확장

Transcompiler - JSX를 자바스크립트로 변환
XML 형식
JSX 코드 중 자바스크립트 사용 시 중괄호{} 블럭으로 묶음
className - 자바스크립트의 class 키워드롸 구분하기 위해 엘리먼트의 class속성은 className으로 사용

// JSX
ReactDOM.render(
	<h1 className='heading'>Hello World</h1>,
  	document.getElementById('content');
)

// js
ReactDOM.render(
	React.createElement(
    	'h1',
      	{className:'heading'},
      	'Hello World'
    )
)

컴포넌트

컴포넌트는 리액트 어플리케이션의 구성 기본 단위로 element와 기능을 부품화하여 재사용 가능하게 한다.

1) 클래스형 컴포넌트

class Greeting extends React.Component{
 	render() {
    	return <h1>Hello, {this.props.name}</h1>;
    }
}

2) 함수형 컴포넌트

function Greeting(props){
 	render() {
    	return <h1>Hello, {props.name}</h1>;
    }
}

props

props - 리액트 elements에 전달되는 인수, HTML 속성을 통해 컴포넌트로 전달

// 상위 컴포넌트 
<Car brand="HYUNDAI" name="SONATA"></Car>

// Car.js 
function Car(props){
  return <h1>I am a {props.brand} {props.name}</h1>;
}

Car 요소에 brand, name 속성 추가하고 컴포넌트 파라미터로 props를 받는다. props 안의 brand, name을 props.brand, props.name으로 접근 가능하다.

// Car.js 
function Car({brand, name}){
  return <h1>I am a {brand} {name}</h1>;
}

구조분해 할당을 활용하면 객체나 리스트의 요소를 바로 사용 가능하다. props안의 name을 name으로 바로 사용할 수 있다.

// 상위 컴포넌트 
// state 선언
const [brand, setBrand] = useState("KIA");
const [carName, setCarName] = useState("K7");
return (
	<Car brand={brand} name={carName}></Car>
);

const로 변수를 만들고 변수 이름을 중괄호 안에 넣어서 데이터를 컴포넌트에서 다른 컴포넌트로 전달할 수 있다.

// 상위 컴포넌트 
const [user, setUser] = useState("길동");
function onChangeName(newName) {
	setUser(newName);
}
return (
  	<Hello name={user} address="DAEGU" onChangeName={onChangeName} ></Hello>
);

// Hello.js
// 하위 컴포넌트 
function Hello({name, address, onChangeName}) {
  return (
      <div>
        <h1>Hello {address}에 사는 {name}</h1>
        <button onClick= {function () {
          {onChangeName("동길")}
        }}>이름 바꾸기</button>
      </div>
  );
}

이벤트 핸들러를 다른 컴포넌트에서 전달받고 전달할 수 있다.

React.js 이벤트

Spread 연산자

문법: ...
기존 배열 객체의 값을 복사해오는 연산자이다.

// 예제
  function testSpread(){
    console.log('testSpread()');
    const array = [{name:'kim'},{name:'lee'},{name:'park'}];
    const newArray =[...array, {name:'an'}];
    console.log(array);
    console.log(newArray);
  }

실행결과

[...array, {name:'an'}]는 array 배열을 모두 복사하고 array의 마지막 값 뒤에 {name: 'an'}를 추가 하겠다는 의미이다! [array..., {name:'an'}]실행 시 배열의 맨 앞에 {name:'an'}이 추가된다. 여기서 이 새로운 배열을 newArray로 할당하는것이지 array에 추가되는게 아니다. array의 값은 변함이 없다.

React 베이스캠프

컴포넌트의 state가 변하면 변경된 state를 참조하는 컴포넌트가 다시 그려짐
props는 읽기 전용
state는 setState를 이용하여 수정 가능
- 상위 컴포넌트가 하위 컴포넌트 수정 시 props 수정
- 하위 컴포넌트가 상위 컴포넌트 수정 시 event 이용
리덕스 - 컴포넌트 state를 하나의 저장소인 Store에서 다룸