[React] 컴포넌트 개념과 역할

컴포넌트는 리액트의 핵심 개념으로, UI를 재사용 가능한 작은 단위로 나누어 관리하는 요소입니다. 리액트 애플리케이션에서 컴포넌트는 사용자 인터페이스의 구성 요소를 정의하고, 여러 컴포넌트를 조합해 복잡한 UI를 구성할 수 있습니다.

 

컴포넌트의 기본 개념

 

컴포넌트는 각각 독립적이며, 리액트에서는 크게 두 가지 유형의 컴포넌트를 사용할 수 있습니다:

 

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

• 리액트의 함수형 컴포넌트는 자바스크립트 함수를 통해 정의됩니다.

• 컴포넌트는 props라는 매개변수를 받아 UI를 렌더링합니다.

• 리액트 훅(Hooks)을 사용하여 상태(state)와 생명주기 관련 기능을 구현할 수 있습니다.

예시 (함수형 컴포넌트):

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

이 컴포넌트는 props를 받아서 Hello, VULIN!과 같은 인사를 렌더링합니다.

 

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

• ES6의 클래스를 사용하여 정의되며, 리액트 라이프사이클 메서드와 state를 사용할 수 있습니다.

• 함수형 컴포넌트가 리액트 훅이 도입되면서 더 자주 사용되기 때문에, 클래스형 컴포넌트는 주로 이전 버전에서 사용되었고, 현재는 잘 사용되지 않습니다.

예시 (클래스형 컴포넌트):

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

 

 

2. 상태 관리:

• 컴포넌트는 리액트의 state를 사용해 자신의 상태를 관리할 수 있습니다. 컴포넌트의 상태는 시간이 지남에 따라 변경될 수 있으며, 상태가 변경되면 리렌더링되어 화면이 업데이트됩니다.

• 함수형 컴포넌트에서 useState 훅을 사용하여 상태를 관리합니다.

function Counter() {
  const [count, setCount] = React.useState(0);

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

 

3. 재사용성:

• 컴포넌트는 특정 UI와 로직을 독립적으로 캡슐화하므로, 여러 곳에서 재사용할 수 있습니다. 이를 통해 코드의 중복을 줄이고 유지 보수성을 높일 수 있습니다.

• 예를 들어, 같은 버튼이나 폼을 다른 화면에서 사용할 때도 동일한 컴포넌트를 재사용할 수 있습니다.

 

4. 데이터 전달 및 표시 (props 사용):

• 컴포넌트는 부모 컴포넌트로부터 props라는 매개변수를 받아 데이터를 전달받고, 이를 통해 UI를 렌더링합니다. props는 읽기 전용으로, 컴포넌트는 전달받은 데이터를 변경할 수 없습니다.

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

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

 

5. 데이터 흐름 및 구조화:

• 리액트는 단방향 데이터 흐름을 따르기 때문에, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달합니다. 컴포넌트를 사용해 애플리케이션의 데이터를 구조화하고, 각 컴포넌트는 해당 데이터에 맞는 역할을 수행합니다.

function ParentComponent() {
  const message = "This is a message from the parent!";
  return <ChildComponent message={message} />;
}

function ChildComponent(props) {
  return <p>{props.message}</p>;
}

 

단방향 데이터 흐름의 개념

 

1. 부모 컴포넌트는 자식 컴포넌트에게 데이터를 전달할 수 있지만, 자식 컴포넌트는 그 데이터를 수정할 수 없습니다. 이 데이터는 props라는 개념을 통해 전달됩니다.

2. 자식 컴포넌트는 전달받은 props를 읽기 전용으로 사용하며, 직접 수정할 수 없습니다. 만약 자식 컴포넌트에서 데이터가 변경되어야 한다면, 자식 컴포넌트는 콜백 함수를 호출해 부모 컴포넌트에게 데이터를 전달합니다. 부모 컴포넌트가 그 데이터를 수정한 후, 다시 자식에게 변경된 데이터를 전달하는 방식입니다.

 

6. 라이프사이클 관리:

• 클래스형 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 라이프사이클 메서드를 사용해 컴포넌트가 생성, 업데이트, 소멸될 때 특정 작업을 수행할 수 있습니다. 함수형 컴포넌트에서는 useEffect 훅을 사용하여 이러한 동작을 처리할 수 있습니다.

React.useEffect(() => {
  console.log("Component mounted or updated");

  return () => {
    console.log("Component will unmount");
  };
}, []);

 

컴포넌트의 장점

 

• 유지 보수성: 각각의 컴포넌트는 독립적으로 관리되므로, 애플리케이션이 커져도 특정 컴포넌트만 수정하면 되며 유지 보수가 용이합니다.

• 재사용성: 컴포넌트는 특정 로직과 UI를 캡슐화하므로 여러 곳에서 쉽게 재사용할 수 있습니다.

• 가독성: 큰 애플리케이션을 작은 컴포넌트로 나누면 전체 코드를 더 쉽게 읽고 이해할 수 있습니다.

• 테스트 용이성: 독립적인 컴포넌트 단위로 테스트할 수 있어, 애플리케이션의 품질을 높일 수 있습니다.

 

결론

 

리액트의 컴포넌트는 애플리케이션의 UI를 구축하는 기본 단위로, 각각의 컴포넌트는 독립적이며 재사용 가능한 구조를 가집니다. 이들은 UI를 단순화하고, 코드의 재사용성을 높이며, 상태 관리와 데이터 흐름을 명확하게 해 줍니다. 각 컴포넌트는 애플리케이션의 특정 부분을 담당하며, 부모-자식 관계를 통해 데이터를 전달하고, 상태를 변경하면서 동적으로 화면을 업데이트합니다.