[React] Components와 Props

 

목차

✅ Components와 Props의 정의

🍀 Components

리액트는 컴포넌트 기반의 구조이다. 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다.

컴포넌트는 독립적이고 재사용 가능한 코드 조각으로, 각각이 특정한 부분의 UI를 담당함.

ex) 레고 블록 조립하듯 컴포넌트들을 조립하여 개발

React Component는 개념적으로 JavaScript의 함수와 비슷하다.

=> React Component를 하나의 함수라고 생각하면 좀 더 쉽게 개념을 이해할 수 있음

 

하지만 React component에서의 입력과 출력은 자바스크립트의 함수와는 조금 다르다.

위 사진과 같이 리액트 컴포넌트에서의 입력은 Porps, 출력은 React element가 된다.

React component가 해주는 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 react element를 생성하여 리턴해 주는 것이다. => 해당 속성에 맞춰 화면에 나타날 element를 만들어준다

 

Component와 element를 붕어빵에 비교하면 Component는 붕어빵 틀이 되고 Element는 완성된 붕어빵 🥐

 

🍀 Props

Prop은 Property의 줄임말. 속성이라는 뜻임

react component의 속성을 나타냄

= 리액트 컴포넌트에 전달되는 데이터나 함수를 나타낸다.

props는 컴포넌트 외부에서 설정되어 컴포넌트에 주입되며, 컴포넌트는 props를 읽어서 화면에 렌더링 한다.

 

위에서 component와 element를 붕어빵에 비유했는데 prop는 붕어빵의 속재료로 생각 할 수 있다.

 

 

✅ Props의 특징 및 사용법

🍀 Props의 특징

1. 읽기 전용(Read-only)

props는 변경할 수 없음.

컴포넌트는 props를 받아 화면을 렌더링하지만, 직접 수정을 불가능!

const MyComponent = (props) => {
    // props.value = 10; // 오류 발생, props는 읽기 전용
    return <div>{props.value}</div>;
};

 

2. 객체 형태

props는 객체 형태로 전달된다.

따라서 여러 개의 props를 전달할 수 있음!

const MyComponent = (props) => {
    return (
        <div>
            <p>{props.name}</p>
            <p>{props.age}</p>
        </div>
    );
};

const App = () => {
    return <MyComponent name="John" age={30} />;
};

 

3. 구조 분해 할당 사용 가능

props를 받을 때 구조 분해 할당을 사용하여 코드의 가독성을 높일 수 있음

const MyComponent = ({name, age}) => {
    return (
        <div>
            <p>{name}</p>
            <p>{age}</p>
        </div>
    );
};

 

4. 함수 전달 가능

props는 함수도 전달할 수 있음

이를 통해 자식 컴포넌트에서 부모 컴포넌트의 상태를 변경할 수 있음

import React, { useState } from 'react';

// 자식 컴포넌트 정의
// onButtonClick prop을 받아서 버튼 클릭 시 이 prop으로 전달된 함수를 호출
const ChildComponent = ({ onButtonClick }) => {
    return <button onClick={onButtonClick}>Click me</button>;
};

// 부모 컴포넌트 정의
const ParentComponent = () => {
    // count 상태 선언 및 초기값 설정 (0)
    const [count, setCount] = useState(0);

    // 버튼 클릭 시 호출될 함수 정의
    // 현재 count 값을 1 증가시킴
    const handleClick = () => {
        setCount(count + 1);
    };

    return (
        <div>
            <!-- 현재 count 값을 화면에 표시 -->
            <p>Count: {count}</p>
            <!-- ChildComponent를 렌더링하고 onButtonClick prop으로 handleClick 함수를 전달 -->
            <ChildComponent onButtonClick={handleClick} />
        </div>
    );
};

// ParentComponent를 기본 내보내기로 설정
export default ParentComponent;

 

🍀 Props의 사용법

function App(props){
    return (
        <Profile
            name="영서"
            introduction="안녕하세요, 영서입니다."
            viewCount={100}
        />
    );
}

props에 값을 넣을 때, 문자열 이외에 정수, 변수, 다른 컴포넌트 등이 들어갈 때에는 {}를 사용하여 감싸주어야 함.

물론 문자열도 {}로 감싸주어도 상관 없음

🔽 아래와 같이 props의 값에 컴포넌트도 넣을 수 있음

function App(props){
    return(
        <Layout
            width={2500}
            height={1440}
            header={
            	<Header title = "영서의 블로그입니다. " />
            }
            footer= {
            	<Footer />
            }
        />
    );
}

 

✅ Component  만들기

🍀 리액트 Component 종류

 

1. 함수형 컴포넌트 (Function Component)

• 함수형 컴포넌트는 단순히 자바스크립트 함수로 정의됨
• 상태(state)와 생명주기 메서드가 필요 없는 간단한 컴포넌트를 정의하는 데 주로 사용됨
• react 16.8부터 도입된 훅(Hook)을 사용하면 함수형 컴포넌트에서도 상태와 생명주기 메서드를 사용할 수 있음!

🔽 Function Component 예시

function Welcome(porps){
	return <h1> 안녕, {props.name} </h1>;
}

>> 코드가 간단한게 장점

 

2, 클래스형 컴포넌트 (Class Component)

• 클래스형 컴포넌트는 'React.Component'를 상속받아 정의됨.
• 더 복잡한 상태 관리와 생명주기 메서드가 필요한 컴포넌트를 만들 때 주로 사용

🔽 Class Component 예시

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

 

컴포넌트의 이름은 항상 대문자로 시작해야 한다!

=> 리액트는 소문자로 시작하는 컴포넌트는 DOM 태그로 인식하기 때문

// HTML div 태그로 인식
const element = <div />;

// Welcome 이라는 리액트 컴포넌트로 인식
const element = <Welcome name = "영서" />;

 

 

🍀 Component 렌더링

 

🔽 예시

function Welcome(props) {
	return <h1>안녕, {props.name} </h1>;
}

const element = <Welcome name="영서" />;

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

 

 

✅ Component 합성과 추출

 

Component 안에 또 다른 Component를 쓸 수 있다는 사실은 질리도록 들음,,

=> 복잡한 화면을 여러 개의 컴포넌트로 나눠서 구현 가능하다. (재사용성이 높아짐)

재사용이 가능한 컴포넌트를 많이 갖고 있을수록 개발 속도가 향상된다!

function Welcome(props) {
	return <h1>안녕, {props.name} </h1>;
}

function App(props) {
    return (
        <div>
            <Welcome name="영서" />
            <Welcome name="영동" />
            <Welcome name="영남" />
        </div>
    )
}