반응형
컴포넌트(Component)
- 리액트로 만들어진 앱을 이루는 최소한의 단위
- UI를 기능에 따라 여러 컴포넌트로 나누어 개별적으로 작성
- 컴포넌트를 이용하여 코드의 재사용이 가능
- 컴포넌트는 props(데이터)를 받아 state에 따라 DOM 노드를 반환
- 컴포넌트의 이름은 항상 대문자로 시작
- 'export default 컴포넌트명' 코드를 통해 외부로 내보낼 수 있음
- 클래스형 컴포넌트와 함수형 컴포넌트로 구분
클래스형 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello</h1>;
}
}
클래스형 컴포넌트는 React.Component 클래스를 상속받는다. 컴포넌트는 JSX를 반환해야하는데, 클래스는 return 문을 사용할 수 없으므로, render() 함수를 사용하여 return한다. 컴포넌트 구성요소, 리액트 생명주기 등을 다루는 컴포넌트를 만들때 주로 사용된다.
함수형 컴포넌트
function Welcome(props) {
return <h1>Hello</h1>;
}
함수형 컴포넌트는 어떠한 데이터를 받고 JSX를 반환하는 형태를 갖춘다. 기본적으로는 클래스형 컴포넌트에 비해 지원되는 기능들이 적지만 useState, useRef, useEffect 등 다양한 React Hooks를 사용하여 클래스형 컴포넌트에서만 지원하는 기능들을 사용할 수 있다. 클래스형 컴포넌트에 비해 중복 코드를 줄일 수 있고 간결한 코드 작성이 가능하다는 장점을 가지고 있어 최근 클래스형 컴포넌트보다 함수형 컴포넌트의 사용이 더 선호되는 추세이다.
Props
- 컴포넌트는 데이터를 가진 하나의 props 객체를 인자를 받음
- props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 데이터
props 전달하기
// 기본적인 props 지정 방법
<Counter a={1}, b={2} /> // Counter 자식 컴포넌트에 props 객체 전달
// spread 연산자 이용한 props 지정 방법
const counterProps = {
a: 1,
b: 2,
c: 3,
initialValue: 5
};
<Counter {...counterProps} /> // Counter 자식 컴포넌트에 counterProps라는 props 객체 전달
props 사용하기
// 객체 인자를 통해 props 받아오기
function Dog(props) {
return {
<div>{props.name}</div>
<div>{props.age}</div>
}
}
// 비구조화 할당을 통해 props 받아오기
function Dog({ name, age }) {
return {
<div>{name}</div>
<div>{age}</div>
}
}
// 컴포넌트 props default 값 지정
Dog.defaultProps = {
name: "이름",
age: 0
}
State
- state는 컴포넌트 내부의 동적 데이터로 컴포넌트의 상태를 나타냄
- 함수형 컴포넌트에서 state를 사용하기 위해 useState라는 Hook을 사용해야 함
함수형 컴포넌트에서 State 사용
import React, { useState } from "react";
useState를 사용하기 위해 위와 같은 import 문을 추가해야한다.
const [count, setCount] = useState(0);
state는 주로 비구조화 할당을 통해 선언하며 위 예제에서 count는 state의 초기값, setCount는 state를 업데이트 하는 함수의 이름이 된다. useState의 인자로 0을 주었기 때문에 count의 값은 0으로 초기화된다.
State와 Props 사용한 Counter 컴포넌트 예제
import React, { useState } from "react";
const Counter = ({ initialValue }) => {
const [count, setCount] = useState(initialValue);
const onIncrease = () => {
setCount(count + 1);
};
const onDecrease = () => {
setCount(count - 1);
};
return (
<div>
<h2>{count}</h2>
<button onClick={onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
</div>
);
};
Counter.defaultProps = {
initialValue: 0,
};
export default Counter;
반응형
'Web-Frontend > React.js' 카테고리의 다른 글
[React.js] React 생명주기 제어하기 - useEffect (0) | 2023.01.13 |
---|---|
[React.js] React에서 배열 사용하기 (0) | 2023.01.12 |
[React.js] JSX (0) | 2023.01.08 |
[React.js] React.js란 (0) | 2023.01.08 |
[React.js] DOM과 Virtual DOM (0) | 2023.01.08 |