실제 학습한 내용의 첫 포스팅이다. 아마 React가 어떤 라이브러리이며 어떤 철학을 가지고 있는지, 선언형 UI는 무엇인지 이런 것부터 포스팅 해야할 것 같은 느낌이지만 최대한 Practical하게 가려고 한다.

Component

Component는 SwiftUI에서 말하는 Component와 동일한 개념이다. 하나의 단위를 이루는 ui를 의미한다.

예전에는 class 문법을 활용하는 방식도 있었지만 현재는 아래와 같은 함수 방식으로 더 많이 활용한다고 한다.

import React from "react";

function CustomButton() {
    return <button onClick={() => {console.log(
"버튼 클릭")}}>커스텀 버튼</button>;
}

export default CustomButton;

Prop

당연히 위와 같은 형태의 버튼은 재사용성이 떨어진다. 재사용성을 높이기 위해서는 이 버튼의 text와 onClick을 외부에서 정의할 수 있어야 한다.

이를 prop이라고 하는데 함수의 인자로 전달하는 방식을 취한다.

import React from "react";

function CustomButton({ text, onClick }) {
    return <button onClick={onClick}>{text}</button>;
}

export default CustomButton;

이 Component를 활용할 때 Prop을 전달하는 방식은 아래와 같다.

<CustomButton text={"커스텀 버튼"} onClick={console.log(
"버튼 클릭")} />