REACT

MPA / SPA

MPA(Multi-page-application)는 여러 페이지로 이루어진 어플리케이션을 말합니다 즉 mpa는 사용자가 다양한 페이지로이동하면서 애플리케이션을 사용하는 전통적인 방식입니다. 반면에 리액트는 SPA(single-page application)를 지향합니다 SPA는 한개의 페이지로 이루어진 어플리케이션으로 새로운 페이지를 로딩할 필요없이 화면이 동적으로 바뀌는 것을 특징으로 합니다. SPA는 사용자 경험과 속도 측면에서 우수한 성능을 보여주기때문에 최근에는 많은 웹 어플리케이션이 SPA로 구현됩니다.

 

컴포넌트

클래스형 컴포넌트

 

리액트에서 클래스형 컴포넌트는 ES6의 클래스 문법을 사용하여 정의되는 컴포넌트 입니다. 클래스형 컴포넌트는 React.Component클래스를 상속받아서 만들어지며 render()메소드를 포함하고 있습니다.

다음 코드는 React.Component클래스를 상속받아 MyComponent라는 클래스형 컴포넌트를 정의합니다.

import React from ‘react’;

class MyComponent extends React.Component {

render() {
return <h1>Hello, World</h1>;
}
}

클래스형 컴포넌트는 다음과 같은 특징이 있습니다.

this.props를 사용하여 부모컴포넌트로부터 전달된 속성값에 접근할 수 있습니다.

state객체를 사용하여 컴포넌트 내부 상태를 관리할 수 있습니다.

this.setState()메소드를 사용하여 state를 업데이트 할 수 있으며

state가 변경될때마다 render()메소드가 다시 호출됩니다.

 

함수형 컴포넌트

 

함수형 컴포넌트는 리액트에서 컴포넌트를 정의하는 또 다른 방법입니다. 함수형 컴포넌트는 단순한 자바스크립트 함수로 정의되며, 입력값을 받아들여 UI를 반환합니다.

예를들어,

import React from ‘react’;

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

이코드는 함수형 컴포넌트입니다.

props를 사용하여 부모 컴포넌트로부터 전달된 속성값에 접근할수있습니다.

useState()훅을 사용하여 컴포넌트의 내부 상태를 관리할 수 있습니다.

useEffect()훅을 사용하여 컴포넌트가 생성되거나 업데이트될때 필요한 작업을 수행할 수 있습니다.

함수형 컴포넌트는 클래스형 컴포넌트보다 더 간결하고 가독성이 높으며, 성능면에서도 우수합니다.

 

JSX 문법

 

javascript의 확장 문법으로 리액트에서 UI를 정의하는데 사용됩니다.

JSX는 javascript코드 내부에 XML형태로 작성되며, XML과 유사한 문법을 사용하여 UI를 표현합니다.

const element = <h1>Hello,world!</h1>;

이 코드는 jsx를 사용하여 h1요소를 렌더링합니다.

html과 비슷한 문법을 사용하여 리액트 어플리케이션을 작성할수 있습니다.

자바스크립트 식을 {}중괄호로 둘러싸서 jsx내부에 포함시킬수있습니다.(이를통해 동적인 ui생성가능)

jsx에서는 클래스 이름 대신 className속성을 사용합니다(jsx가 html이 아닌 자바스크립트이기 때문에)

 

Props / State

props:

props는 컴포넌트간에 데이터를 전달하는데 사용됩니다. 부모 컴포넌트가 자식 컴포넌트에게 속성값을 전달하면 자식 컴포넌트에서는 props를 통해 전달받은 값을 사용할 수 있습니다.

function MyComponent(props){

return <h1>hello {props.name}</h1>;

}

ReactDOM.render(<MyComponent name=”taeyoung” />, document.getElementById(’root’));

 

이 코드는 name이라는 props를 전달하고있습니다.

MyComponent 컴포넌트에서 props 객체를 받아서 {props.name}으로 전달된 name속성값을 출력하고 있습니다.

 

state:

state는 컴포넌트의 내부 상태를 관리하는데 사용됩니다. state를 사용하면 컴포넌트가 렌더링될때 동적인 ui를 생성할수있습니다.

state는 클래스형 컴포넌트에서 this.state를 통해 접근하고 this.setState()를 사용하여 업데이트 할 수 있습니다.

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleClick() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>You clicked {this.state.count} times.</p>
<button onClick={() => this.handleClick()}>Click me</button>
</div>
);
}
}
ReactDOM.render(<MyComponent />, document.getElementById('root'));

MyComponent클래스형 컴포넌트에서 state객체를 생성하고, count 값을 0으로 초기화합니다. handleClick()메서드를 사용하여 count값을 증가시키고, this.setState()를 호출하여 state객체를 업데이트합니다. render()메서드에서는 this.state.count값을 출력하고, 버튼 클릭시 handleClick()메서드를 호출합니다.

 

Virtual DOM

virtual DOM은 브라우저의 실제 DOM과 유사한 트리구조로 이루어진 객체입니다 리액트는 상태가 변경될때마다 가상의 DOM을 생성하고 이전 가상 DOM과 비교하여 변경된 부분만 실제 DOM에 반영합니다.

이것은 DOM조작이 일어날때마다 브라우저가 전체 페이지를 다시 그리는 것을 방지하여 성능을 향상시킵니다 또한 리액트는 가상 DOM의 변경사항을 최적화하여 실제 DOM조작을 최소화하도록 합니다.

 

Reconciliation

RECONCILIATION는 리액트에서 가상 DOM을 사용하여 업데이트를 최적화하는 과정입니다. 리액트는 상태가 변경될때마다 새로운 가상 DOM을 만들고 이전 가상 DOM과 비교하여 변경된 부분만 실제 DOM에 반영합니다 이 과정에서 RECONCILIATION이 발생합니다.

Reconciliation은 리액트에서 성능 최적화를 위한 중요한 과정 중 하나입니다. 이를 통해 불필요한 렌더링 작업을 방지하고, 빠르고 효율적인 UI 렌더링을 달성할 수 있습니다.

 

Event handling

이벤트 핸들링은 웹 어플리케이션에서 사용자와 상호작용할 수 있는 방법중 하나입니다. 이는 사용자의 입력에 대한 응답으로 코드를 실행하는것을 의미합니다.

버튼클릭, 마우스이동, 키보드입력등의 이벤트 처리를 할수있습니다.

리액트에서 이벤트 처리는 일반적으로 JSX문법을 사용하여 처리됩니다. JSX에서는 이벤트처리기를 props로 전달하여 구성요소에서 이벤트를 처리합니다.

import React from 'react';

function Button() {
function handleClick() {
console.log('Button clicked');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}

이런식으로 버튼을 클릭할대마다 함수를 실행시킬수있습니다.

onClick prop을 사용하여 클릭 이벤트에 대한 처리기 함수인 handleClick을 전달합니다. 이벤트 처리기는 함수로 전달되며, 이벤트가 발생할 때마다 호출됩니다.