[React.js] 컴포넌트, props, state

컴포넌트(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;

---