함수형 컴포넌트
예시
const MyComponent = (props) => {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p>This is a functional component.</p>
</div>
);
};단순한 JavaScript 함수로서 상태나 라이프사이클 매서드를 직접적으로 사용하지 않고,React Hook을 사용하여 상태 관리나 부수 효과를 처리를 할 수 있다.
함수형 컴포넌트의 특징
-
간단한 문법
함수로 정의하며, 더 직관적 -
React Hook 사용
useState,useEffect 같은 Hook을 사용해 상태 관리나 라이프사이클 매서드를 사용 가능 -
성능 우수
간단한 문법으로 가볍기 때문에 더 나은 성능을 제공 할 수 있음.
클래스형 컴포넌트
ES6 클래스 문법을 사용하여 정의함. 이 컴포넌트는 render() 매서드를 통해 JSX를 반환하며, 상태 관리와 라이프 사이클 매서드를 직접 사용할 수 있음
예시
import React, { Component } from 'react';
class MyComponent extends Component {
render() {
return (
<div>
<h1>Hello, {this.props.name}!</h1>
<p>This is a class component.</p>
</div>
);
}}
예시: 상태를 가진 클래스형 컴포넌트
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}클래스형 컴포넌트의 특징
-
상태(state)와 라이프사이클 메서드를 클래스 내에서 직접적으로 관리할 수 있다.
예를 들어, componentDidMount(), componentDidUpdate(), componentWillUnmount()와 같은 메서드를 통해 컴포넌트의 생명주기를 관리할 수 있습니다. -
this 키워드를 사용하여 상태와 props에 접근한다.
함수형 컴포넌트 vs 클래스형 컴포넌트
함수형 컴포넌트
- 감결하고 직관적인 문법
- React Hook 사용 가능
- 최신 React에서 주로 사용
- 성능 최적화가 더 잘 되어 있음
클래스형 컴포넌트
- 복잡한 문법(this. 필요)
- 상태 및 라이프사이클 관리 기능
- 예전 방식이지만 여전히 사용 가능
- 상대적으로 성능이 무거움
Element
영어로 요소 성분이라는 뜻으로 리액트에서는 앱을 구성하는 요소로 쓰인다.(리액트 앱을 구성하는 가장 작은 블록이라고 생각하자)
DOM Element
실제 브라우저의 DOM에 존재하는 엘리먼트
React Element
React의 virtual DOM에 존재하는 Element
간단히 생각하자면 React Elementsms DOM Element의 가상 표현이라고 생각하면 된다.
Element의 특징
마음대로 변경할 수 없는 불변성을 띔
따라서 Element 생성 후에는 children이나 attribute를 바꿀 수 없다.
-> 화면에 변경된 Element를 보여주는 것은 기존의 Element에서 새로운 Element로 변경된것이다
(Component는 틀이고 Element는 랜더링 후 불변성을 띄는 요소라고 생각하면 편함)
Element 예시
jsx 사용
const MyComponent = () => {
return (
<div>
<h1>Hello, React!</h1>
<p>This is a React component.</p>
</div>
);
};
React.createElement 사용
const MyComponent = () => {
return React.createElement(
'div',
null,
React.createElement('h1', null, 'Hello, React!'),
React.createElement('p', null, 'This is a React component.')
);
};위 둘의 코드에서 Element는 return 문에 적혀있는 즉 실제로 렌더링 되는 부분이라고 생각하면 된다.
두 방식으로 element를 선언할 수 있다.
JSX없이 React.createElement만으로 함수형 컴포넌트를 만들 수 있지만, JSX가 더 직관적이고 코드 가속성이 높기 때문에 대부분의 경우 JSX를 사용하여 Element를 선언한다
Props
React에서 컴포넌트 속성이라는 뜻으로 주로 쓰인다.
쉽게 생각해서 사람이라는 형태를 컴포넌트라고 생각하면 그 안에 흐르는 DNA에 따라 사람의 성별, 머리카락 등등이 다를 것이다 이때 사람마다 흐르는 DNA를 Props라고 생각하면 편하다
다음 사진과 같이 우리가 컴포넌트의 어떤 데이터를 전달하고 전달된 데이터에 따라 다른 모습의 엘리먼트를 화면에 렌더링 하고 싶을 때 해당 데이터를 Props에 넣어서 전달한다.
Props 특징
Read Only (즉, 읽을 수만 있고 값을 변경 할 수 없다)
-> 다른 Props 값으로 엘리먼트를 생성하려면 새로운 값을 컴포넌트에 전달하여 새로운 엘리먼트를 생성한다
즉, React 컴포넌트의 Props는 바꿀 수 없고 같은 Props가 들어오면 항상 같은 엘리먼트를 리턴한다.
Componemt 작성시 유의점
예시1
예시2
Component 이름 선언 시
<ShowMyPage/>이름은 예시1 처럼 import문을 통해 컴포넌트를 불러오고 항상 대문자로 시작해야한다.
예시 2처럼 소문자로 선안하면 아래 div 태그처럼 DOM요소로 인식하게 된다
<div>State
React Component의 상태를 의미한다.
즉, React Component의 변경 가능한 데이터를 말한다
(React를 사용하는 개발자가 직접 상태를 정의함)
State 사용시 주의점
State 선언시 렌더링이나 데이터 흐름에 사용되는 것만 포함시켜야한다.
-> state가 변경 될 때 마다 렌더링 되는데 불필요한 요소가 포함되면 렌더링 수가 많아져서 성능이 저하 될 수 있기 때문이다.
클래스형 컴포넌트, 함수형 컴포넌트의 State
클래스형 컴포넌트
함수형 컴포넌트
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>현재 카운트: {count}</p>
<button onClick={increment}>카운트 증가</button>
</div>
);
}
export default Counter;클래스형 컴포넌트의 경우 State는 생성자에서 정의하고 함수형 컴포넌트는 useState라는 Hook을 통해 State를 정의한다
Life Cycle
해석 그대로 생명주기 즉 컴포넌트가 태어나고 죽음(생성되고 사라지는 시점)을 이야기한다.
위와 같은 생명주기 매서드는 클래스형 컴포넌트에서 쓰이고
함수형 컴포넌트에서는 React Hook을 통해 생명주기와 유사한 기능을 구현한다
생명주기에서 기억할 점은 컴포넌트가 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트 되다가 사라진다 라는 점을 기억하면 된다.
