[React] 컴포넌트와 Props, State 완전 마스터하기! 🚀

컴포넌트란 무엇인가? 🤔

React에서 컴포넌트는 UI를 구성하는 독립적인 블록이에요. 각 컴포넌트는 자신만의 로직과 상태를 가질 수 있으며, 이를 통해 복잡한 UI를 작은 단위로 나누어 관리할 수 있어요. 이로 인해 코드가 더 깔끔하고 유지보수가 용이해져요! 🧑‍💻

컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어요. 그럼 두 가지를 간단히 비교해볼까요? 👇

---

반응형

1. 함수형 컴포넌트 vs 클래스형 컴포넌트 🔄

• 함수형 컴포넌트 (Functional Component)
  함수형 컴포넌트는 간단하고 가벼운 컴포넌트로, React Hooks가 도입된 이후 상태 관리와 생명주기 메서드까지 다룰 수 있게 되었어요! 함수형 컴포넌트는 코드가 더 직관적이고, 읽기 쉬워서 요즘 더 많이 사용되고 있어요. ✨
   
• 예시:

function MyComponent() {
  return <h1>Hello, React!</h1>;
}

• 클래스형 컴포넌트 (Class Component)
  클래스형 컴포넌트는 React의 초기 방식으로, 상태와 생명주기 메서드를 다룰 수 있었어요. 그러나 함수형 컴포넌트와 비교해서 문법이 다소 복잡하고, 코드가 길어지기 때문에 점점 덜 사용되고 있어요. 🏙️
   
• 예시:

class MyComponent extends React.Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

2. Props와 State의 차이점 🛠️

• Props (Properties)
  Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 읽기 전용 데이터에요. 자식 컴포넌트는 props를 수정할 수 없고, 부모 컴포넌트에서 전달받은 값만을 사용해요. 🏗️
   
  위 코드에서 Greeting 컴포넌트는 부모 컴포넌트인 App에서 전달한 name을 props로 받아서 사용하고 있어요. props는 컴포넌트 간에 데이터를 전달할 때 사용되는 중요한 도구예요! 🚚
• 예시:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="John" />;
}

• State
  State는 컴포넌트의 내부 상태를 관리할 때 사용돼요. State는 컴포넌트 내에서 변경될 수 있고, 변경될 때마다 UI가 리렌더링돼요. 즉, 동적인 데이터를 처리하는 데 사용됩니다! 🌀
  javascript

  코드 복사

  function Counter() { const [count, setCount] = useState(0); // useState 훅으로 상태 관리 return ( <div> <h1>{count}</h1> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }
  위 예제에서 count는 상태(state)로, 버튼을 클릭할 때마다 그 값이 변경되고, 변경된 값으로 UI가 자동으로 업데이트돼요! ✨
• 예시:

function Counter() {
  const [count, setCount] = useState(0); // useState 훅으로 상태 관리

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

---

계산기 앱 만들기 🧮

이제 Props와 State를 활용한 간단한 계산기 앱을 만들어볼게요! 이 앱에서는 두 숫자를 더하는 기능을 구현할 거예요.

1. 앱 구조 설계

계산기 앱은 두 가지 주요 컴포넌트로 나눠볼 수 있어요:

• App 컴포넌트: 전체 앱을 관리하는 컴포넌트로, 숫자와 연산자, 결과를 상태로 관리합니다.
• Button 컴포넌트: 각 버튼을 표현하는 컴포넌트로, 클릭 시 숫자나 연산자를 App 컴포넌트로 전달합니다.

2. 예제 코드 💻

import React, { useState } from 'react';

// Button 컴포넌트
function Button({ label, onClick }) {
  return <button onClick={() => onClick(label)}>{label}</button>;
}

// App 컴포넌트
function App() {
  const [input, setInput] = useState(''); // 계산 입력 값
  const [result, setResult] = useState(null); // 계산 결과

  const handleClick = (value) => {
    if (value === '=') {
      // 입력된 계산식 실행
      try {
        setResult(eval(input));
      } catch (error) {
        setResult('Error');
      }
      setInput('');
    } else if (value === 'C') {
      // 계산기 초기화
      setInput('');
      setResult(null);
    } else {
      // 계산식에 값 추가
      setInput(input + value);
    }
  };

  return (
    <div>
      <h1>Calculator</h1>
      <div>
        <input type="text" value={input} disabled />
        <p>Result: {result}</p>
      </div>
      <div>
        {['1', '2', '3', '+', '4', '5', '6', '-', '7', '8', '9', '*', '0', '=', 'C', '/'].map((label) => (
          <Button key={label} label={label} onClick={handleClick} />
        ))}
      </div>
    </div>
  );
}

export default App;

3. 동작 설명

• 상태 관리: input은 사용자가 입력한 숫자와 연산자를 관리하고, result는 계산된 결과를 저장해요.
• 버튼 클릭 처리: 각 버튼은 onClick 이벤트로 handleClick 함수를 호출해요. 이 함수는 계산식을 입력받고, = 버튼을 클릭하면 결과를 계산하고, C 버튼으로 초기화할 수 있어요.

---

마무리 🎯

이제 컴포넌트와 Props, State의 개념을 잘 이해했어요! 이 두 가지는 React 개발에서 매우 중요하고, 모든 React 앱에서 필수적으로 사용되는 핵심 개념들이에요. 컴포넌트는 UI를 구성하는 작은 단위이고, Props와 State는 데이터를 전달하고 관리하는 데 중요한 역할을 합니다. 🎉

이제 여러분도 간단한 계산기 앱을 만들어봤으니, 더 복잡한 앱도 자신 있게 도전할 수 있겠죠? 💪
React의 다른 개념들과 함께 점점 더 멋진 앱을 만들어보세요! 😄