[React] Component, Props, State

Component

화면을 구성하는 기본 단위

안드로이드로 따지면, @Composable 과 유사하다고 보여짐

 

import React from "react";

function Greeting() {
  return <h1>안녕하세요!</h1>;
}

export default Greeting;

위와 같이 Greeting 이라는 component 를 만들었다면, 다른곳에서 재사용 할 수 있음.

 

import Greeting from "./Greeting";

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

export default App;

 

이 부분은 android 와 매우 흡사하다.

(아마도 안드로이드가 웹을 모방한 것 같다)

 

---

Props 

부모 > 자식 방향으로 어떤 데이터를 전달해야 할 때 사용되는 properties.

immutable 한 데이터 객체로 보여진다.

 

function UserInfo(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

 

function App() {
  return <UserInfo name="이영우" />;
}

 

 

여러개 parameter 를 던질 수 있다.

 

function Profile(props) {
  return (
    <div>
      <h2>이름: {props.name}</h2>
      <p>나이: {props.age}</p>
    </div>
  );
}

function App() {
  return <Profile name="이영우" age={40} />;
}

 

 

---

State

뷰를 그릴 상태. 

useState 를 사용해서 선언함. 

(안드로이드의 remember + stateOf, mutableStateOf 와 비슷해 보임)

 

import React, { useState } from "react";

function Counter() {
  // count 상태 (초기값: 0)
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>현재 카운트: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+1 증가</button>
    </div>
  );
}

export default Counter;

 

 

---

Component + Props + State 사용 예

 

import React, { useState } from "react";

// LikeButton 컴포넌트 (props 활용)
function LikeButton({ name }) {
  const [likes, setLikes] = useState(0);

  return (
    <div>
      <h2>{name}님의 게시글</h2>
      <p>좋아요: {likes}개</p>
      <button onClick={() => setLikes(likes + 1)}>좋아요 ❤️</button>
    </div>
  );
}

// App 컴포넌트
function App() {
  return <LikeButton name="김철수" />;
}

export default App;