React 컴포넌트 재사용하기, props와 state - React, Node.js 프로젝트

React component의 구조와 재사용, props와 state

 

1. React component 

React는 컴포넌트 기반 아키텍처. 
컴포넌트는 UI의 독립적인 재사용이 가능한 조각으로 이를 조합해 복잡한 UI를 구성할 수 있다

 

1-1. Button 컴포넌트 만들기

> Button.js 생성

Button.js

import React from 'react';

function Button({ label, onClick, type }) {
  return (
    <button className={`btn btn-${type}`} onClick={onClick}>
      {label}
    </button>
  );
}

export default Button;

이 컴포넌트는 세 가지 props(label, onClick, type)을 받아서 버튼을 렌더링한다

(props에 대한 내용은 밑에서 다시 정리할 예정)

이렇게 생성한 버튼을 다른 컴포넌트에서 재사용할 수 있다

 

 

1-2. 컴포넌트 재사용

App.js

// App.js (React 프론트엔드)
import React from 'react';
import Button from './Button';

function App() {
  const handleClick = (message) => {
    alert(message);
  };

  return (
    <div className="container">
      <h1 className="text-center mt-4">Reusable Button Component</h1>
      <div className="text-center">
        <Button label="Primary Button" onClick={() => handleClick('Primary clicked')} type="primary" />
        <Button label="Secondary Button" onClick={() => handleClick('Secondary clicked')} type="secondary" />
        <Button label="Success Button" onClick={() => handleClick('Success clicked')} type="success" />
      </div>
    </div>
  );
}

export default App;

 

 

1-3. 실행

npm run start

실행화면

 

버튼 클릭 시 이벤트도 잘 발생한다

handleClick "Success"

 

1-4. 컴포넌트 재사용 설계 시 장점

1) 재사용성 : UI를 모듈화하고 유지보수가  쉬워진다

2) 유연성 : props를 통해 컴포넌트의 동작을 제어할 수 있으므로 다양한 방식으로 재사용할 수 있다

 

 

 

2. props와 state

2-1. props와 state의 개념

props : 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터.
자식 컴포넌트는 데이터를 받아 UI를 렌더링할 수 있다
부모 컴포넌트는 자식 컴포넌트의 동작, 내용을 변경할 수 있도록 props를 전달한다

state : 컴포넌트 안에서 관리되는 동적인 데이터.
state는 컴포넌트 내부에서 변경될 수 있으며 state가 변경될 때마다 해당 컴포넌트가 렌더링된다

 

 

2-2. 실습 - Counter 컴포넌트 만들어 사용해보기

1) state를 사용해  count 값을 저장

>Counter.js 생성

Counter.js

import React, { useState } from 'react';

function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div className="counter">
      <h2>Count: {count}</h2>
      <button className="btn btn-primary" onClick={increment}>Increment</button>
      <button className="btn btn-danger" onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

Counter 컴포넌트를 생성하였고 state를 사용해 count 값을 저장하였다

다음은 props를 사용해 부모 컴포넌트에서 초기 count 값을 자식 컴포넌트로 전달하면 된다

 

 

2) props 전달

전에 Button 내용은 주석 처리해주고 진행한다

 

여러 줄 주석 단축키는 

Alt + Shift + a

 

App.js

// App.js (React 프론트엔드)
import React from 'react';
import Counter from './Counter';

function App() {
  const handleClick = (message) => {
    alert(message);
  };

  return (
    <div className="container">
        <h1 className="text-center mt-4">Counter with Props and State</h1>
        <Counter initialCount={0} />    
    </div>
  );
}

export default App;

 

 

3) 실행

react는 바로 바로 컴파일이 되서 편하다

아까 button 실행한 페이지를 열어 확인해봐도 된다

혹시 꺼버렸다면 다시 실행

npm run start

 

Counter React App

 

Increment를 누르면 +, Decrement를 누르면 -

 

3. 다시 정리

props : 부모 컴포넌트 → 자식 컴포넌트(읽기 전용으로 받음)

state : 컴포넌트 내 관리, 해당 컴포넌트가 렌더링 될 때 변경