리액트 학습 : 컴포넌트와 Props 개념

오늘은 리액트 학습에서 가장 중요한 기초라고 할 수 있는 컴포넌트와 Props 개념을 살펴보도록 하겠습니다.

---

프론트엔드 개발자로 성장하는데 리액트 이해 특히 컴포넌트와 Props 개념 이해는 상당히 중요합니다. 그런데 리액트의 기초 개념을 제대로 이해하지 못한 상태로 그저 코드만 따라치면서 외우기만 하는 경우가 있습니다.

Components와 Props

그렇게 하는 경우 리액트 학습을 하는데 너무나 오랜 시간이 걸립니다. 그러다보면 리액트 학습 초반에 많이 포기합니다.

그 과정을 이겨내고 리액트를 자유롭게 사용하는 프론트엔드 실무 개발자로 성장할 수도 있지만, 역시 개념 이해는 기본이자 필수라고 할 수 있습니다.

그렇기에 오늘은 리액트 학습에서 가장 중요하다고 할 수 있는 기초인 컴포넌트와 Props의 개념에 대해서 ChatGPT를 활용하여 학습하도록 하겠습니다.

리액트는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위해 사용됩니다. 리액트에서 컴포넌트와 Props는 중요한 개념 중 하나입니다. 이번 글에서는 리액트의 컴포넌트와 Props에 대해 자세히 살펴보겠습니다.

컴포넌트란?

---

함수 컴포넌트와 클래스 컴포넌트

컴포넌트의 개념

컴포넌트는 리액트에서 UI를 구성하는 기본적인 빌딩 블록입니다. 컴포넌트는 작은 단위로 분할될 수 있으며, 이를 조합하여 복잡한 UI를 만들 수 있습니다.

컴포넌트의 유형

리액트에서 컴포넌트는 크게 두 가지 유형으로 나눌 수 있습니다. 함수형 컴포넌트와 클래스형 컴포넌트입니다.

함수형 컴포넌트

함수형 컴포넌트는 함수로 정의됩니다. 이 컴포넌트는 props를 입력값으로 받아들이고, JSX를 반환합니다. 함수형 컴포넌트는 상태(state)를 갖지 않으며, 라이프 사이클(lifecycle) 메서드를 사용할 수 없습니다.

클래스형 컴포넌트

클래스형 컴포넌트는 클래스로 정의됩니다. 이 컴포넌트는 render() 메서드를 사용하여 JSX를 반환합니다. 클래스형 컴포넌트는 상태(state)를 가질 수 있으며, 라이프 사이클(lifecycle) 메서드를 사용할 수 있습니다.

 

부모 컴포넌트와 자식 컴포넌트

---

React에서 컴포넌트는 UI의 부분을 나타내는 JavaScript 함수 또는 클래스입니다. 컴포넌트는 재사용 가능하고 독립적이며, 다른 컴포넌트에서 중첩하여 사용할 수 있습니다.

컴포넌트 렌더링

React에서는 부모-자식 관계를 가지는 컴포넌트가 많이 있습니다. 부모 컴포넌트는 자식 컴포넌트를 렌더링할 수 있고, 자식 컴포넌트는 부모 컴포넌트에서 전달된 Props를 받아서 사용할 수 있습니다.

예를 들어, 다음과 같은 컴포넌트를 생각해보겠습니다.

import React from 'react';

function Parent() {
  return (
    <div>
      <h1>This is the parent component</h1>
      <Child name="Alice" />
      <Child name="Bob" />
    </div>
  );
}

function Child(props) {
  return (
    <div>
      <p>This is the child component, and my name is {props.name}.</p>
    </div>
  );
}

위의 코드에서 Parent 컴포넌트는 Child 컴포넌트를 렌더링하고, name Props를 전달합니다. Child 컴포넌트는 props.name을 사용하여 Props 값을 표시합니다.

따라서, Parent 컴포넌트는 부모 컴포넌트이며, Child 컴포넌트는 자식 컴포넌트입니다. 이러한 부모-자식 관계를 가지는 컴포넌트는 React에서 매우 일반적이며, 컴포넌트 간의 데이터 및 이벤트를 전달하기 위해 Props 및 콜백 함수 등을 사용합니다.

Props란?

---

컴포넌트 합성

Props의 개념

Props는 리액트에서 컴포넌트 간 데이터를 전달하기 위한 매커니즘입니다. 컴포넌트를 사용할 때, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용합니다.

Props의 특징

Props는 읽기 전용입니다. 부모 컴포넌트에서 전달한 데이터를 자식 컴포넌트에서 변경할 수 없습니다. 또한, 컴포넌트 내부에서 this.props를 사용하여 전달된 데이터를 참조할 수 있습니다.

 

Props를 사용한 컴포넌트 기본 예시

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

function App() {
  return (
    <div>
      <Greeting name="React" />
      <Greeting name="World" />
    </div>
  );
}

위의 예시에서는 부모 컴포넌트인 App 컴포넌트에서 자식 컴포넌트인 Greeting 컴포넌트로 name이라는 props를 전달합니다. Greeting 컴포넌트에서는 전달된 props를 사용하여 "Hello, React!"와 "Hello, World!"를 출력합니다.

컴포넌트와 Props의 관계

---

props는 읽기 전용입니다.

Props의 전달

Props는 부모 컴포넌트에서 자식 컴포넌트로 전달됩니다. 이를 통해 자식 컴포넌트에서 전달된 데이터를 사용하여 렌더링할 수 있습니다.

컴포넌트의 재사용

컴포넌트와 Props를 사용하면 컴포넌트의 재사용이 용이해집니다. 동일한 기능을 하는 컴포넌트를 여러 번 사용하고, Props를 통해 각각의 컴포넌트에 다른 데이터를 전달할 수 있습니다.

마무리

---

이번 글에서는 리액트의 컴포넌트와 Props에 대해 알아보았습니다. 컴포넌트는 UI를 구성하는 빌딩 블록이며, 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다. Props는 컴포넌트 간 데이터를 전달하기 위한 매커니즘이며, 부모 컴포넌트에서 자식 컴포넌트로 전달됩니다. 컴포넌트와 Props를 사용하면 UI를 더욱 효율적으로 구성할 수 있습니다.

FAQ

---

Q1. 컴포넌트와 Props를 사용하는 이유는 무엇인가요?

컴포넌트와 Props를 사용하면 UI를 더욱 효율적으로 구성할 수 있습니다. 컴포넌트를 사용하면 재사용성이 높아지며, Props를 사용하여 컴포넌트 간 데이터를 전달할 수 있습니다.

Q2. 함수형 컴포넌트와 클래스형 컴포넌트의 차이점은 무엇인가요?

함수형 컴포넌트는 함수로 정의되며, 상태(state)를 가지지 않습니다. 이에 반해 클래스형 컴포넌트는 클래스로 정의됩니다. 

Q3. Props를 사용할 때 주의해야 할 점은 무엇인가요?

Props를 전달할 때에는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터의 타입과 값의 유효성을 검증해야 합니다.

Q4. 컴포넌트의 재사용이 어떤 상황에서 유용한가요?

컴포넌트의 재사용은 동일한 기능을 하는 UI 요소를 여러 번 사용해야 하는 경우에 유용합니다. 예를 들어, 여러 페이지에서 사용하는 헤더나 푸터 등이 그 예시입니다.

Q5. 컴포넌트를 작성할 때 가독성을 높이기 위해 주의해야 할 점은 무엇인가요?

컴포넌트를 작성할 때에는 가독성을 높이기 위해 코드의 들여쓰기와 주석을 활용하는 것이 좋습니다. 또한, 변수나 함수의 네이밍도 명확하고 이해하기 쉽도록 작성해야 합니다.

 

리액트에서 컴포넌트와 Props 예제 코드는 다음과 같습니다.

---

import React from 'react';

function ListItem(props) {
  return <li>{props.value}</li>;
}

function List(props) {
  const listItems = props.items.map((item) =>
    <ListItem key={item.toString()} value={item} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

function App() {
  const items = ['apple', 'banana', 'orange'];
  return (
    <div>
      <h1>My favorite fruits:</h1>
      <List items={items} />
    </div>
  );
}

export default App;

 

위의 코드에서는 ListItem 컴포넌트를 만들어 각 항목을 렌더링하고, List 컴포넌트에서 items Props를 전달하여 ListItem 컴포넌트를 여러 번 렌더링합니다. ListItem 컴포넌트는 props.value를 사용하여 Props 값을 표시합니다.

실행 결과는 다음과 같습니다.

My favorite fruits:

- apple
- banana
- orange

이 코드는 List 컴포넌트에서 map 함수를 사용하여 items 배열을 반복하고, 각 항목마다 ListItem 컴포넌트를 렌더링합니다. 각 ListItem 컴포넌트는 key Props를 사용하여 고유한 식별자를 지정합니다. 이는 React가 항목이 추가, 삭제 또는 수정될 때 더 효율적으로 렌더링할 수 있도록 도와줍니다.

 

이상으로 리액트 학습 : 컴포넌트와 Props 개념 포스팅을 마칩니다. 감사합니다.