컴포넌트와 Props

ho_vi·2023년 9월 19일
PropsReactcomponent

React

목록 보기
3/19
post-thumbnail

리액트에서 컴포넌트(Component)란 UI를 구성하는 독립적인 모듈입니다. 컴포넌트는 재사용이 가능하며, 각 컴포넌트는 자체적인 UI와 상태(state)를 가집니다.

컴포넌트는 함수형 컴포넌트(Functional Component)와 클래스 컴포넌트(Class Component)로 나눌 수 있습니다. 함수형 컴포넌트는 간단한 UI를 구성할 때 사용하며, 클래스 컴포넌트는 상태나 생명주기(lifecycle) 관련 로직을 포함한 UI를 구성할 때 사용합니다.

컴포넌트는 props와 state를 가집니다. props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 의미하며, state는 컴포넌트 자체에서 관리하는 데이터를 의미합니다. state가 변경되면 컴포넌트는 다시 렌더링됩니다.

리액트(React) 함수형 컴포넌트는 함수를 사용하여 UI를 구성하는 컴포넌트입니다. 클래스형 컴포넌트보다 간단하게 작성할 수 있으며, 최근에는 함수형 컴포넌트를 사용하는 것이 추세입니다.

함수형 컴포넌트

함수형 컴포넌트?

함수형 컴포넌트는 state와 라이프사이클 메서드를 사용할 수 없으며, 단순히 props를 받아와 UI를 렌더링하는 역할을 수행합니다. 이러한 함수형 컴포넌트의 단순성은 코드의 가독성과 유지보수성을 높여주며, 테스트하기 쉽게 만들어 줍니다.

함수형 컴포넌트는 함수를 반환하므로, 컴포넌트의 구조를 보다 명확하게 파악할 수 있습니다. 또한, 클래스형 컴포넌트와 달리 this가 필요하지 않으므로, 코드를 작성하는데 있어서도 보다 쉽고 간결해집니다.

함수형 컴포넌트는 React Hooks를 사용하여 state와 라이프사이클 메서드의 기능을 대체할 수 있습니다. Hooks를 사용하면, 함수형 컴포넌트에서도 state와 라이프사이클 메서드를 사용할 수 있게 되며, 클래스형 컴포넌트와 유사한 기능을 구현할 수 있습니다.

컴포넌트를 정의하는 가장 간단한 방법은 JavaScript함수를 작성하는 것 입니다.

import './App.css';

function App() {
  const name = "리액트";
  return <div className="title-name">{name}</div>;
}

export default App;

함수 컴포넌트와 props

아래의 함수는 데이터를 가진 하나의 “props”(props는 속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트 입니다.

👉 **props ?** **부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 의미**합니다. props는 컴포넌트가 생성될 때 정적으로 할당되어, 컴포넌트 내에서 변경할 수 없습니다.

props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이므로, 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전달할 때 사용됩니다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트에게 이름, 나이, 이메일 등의 데이터를 전달할 수 있습니다.

props를 사용하여 전달된 데이터는 자식 컴포넌트에서 this.props를 통해 접근할 수 있습니다. 이를 통해 자식 컴포넌트는 전달받은 데이터를 이용하여 UI를 구성하거나, 로직을 처리할 수 있습니다.

props는 불변성을 가지므로, props를 변경할 수 없습니다. 하지만, 컴포넌트 내에서 상태를 관리하거나, 이벤트를 처리하여 부모 컴포넌트로 데이터를 전달할 수 있습니다.

props는 리액트에서 컴포넌트간 데이터 전달을 위한 중요한 개념 중 하나입니다. 이를 통해 컴포넌트를 재사용하고, 코드의 유지보수성을 높이는 등의 장점을 가질 수 있습니다.

props의 간단 예제

**WelcomeProp** 컴포넌트는 props라는 객체를 인자로 받아서, name속성을 출력합니다.

App컴포넌트에서는 name속성에 React값을 전달하여, **WelcomeProp**컴포넌트를 호출합니다.

import './App.css';

function WelcomeProp(props) {
  return <h1>Hello, {props.name}</h1>
}

function App() {;
  const element = <WelcomeProp name="곰돌이사육사" />;
  return <div>{element}</div>;
}

export default App;
👉 **컴포넌트의 이름은 항상 대문자로 시작합니다.** React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리 합니다.

컴포넌트의 재사용

import './App.css';

function WelcomeProp(props) {
  return <h1>Hello, {props.name}</h1>
}

function App() {
  return (
      <div>
        <WelcomeProp name="안유진" />
        <WelcomeProp name="유나" />
        <WelcomeProp name="미미" />
      </div>
  );
}

export default App;

컴포넌트 합성

리액트 컴포넌트 합성(Composition)은, 여러 개의 컴포넌트를 조합하여 하나의 컴포넌트를 만드는 것을 말합니다. 이를 통해 컴포넌트의 재사용성과 추상화를 높일 수 있습니다. React 앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 컴포넌트로 표현됩니다.

function App() {
  return (
    <>
      <Section title="Section 1" content="This is the content for Section 1." />
      <Section title="Section 2" content="This is the content for Section 2." />
    </>
  );
}
import React from 'react';

function Heading(props) {
  return <h1>{props.text}</h1>;
}

function Paragraph(props) {
  return <p>{props.text}</p>;
}

function Section(props) {
  return (
    <div>
      <Heading text={props.title} />
      <Paragraph text={props.content} />
    </div>
  );
}

export default Section;

클래스 컴포넌트

클래스 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 합니다.

함수 컴포넌트는 클래스 컴포넌트 보다 선언하기 쉽고, 메모리 자원도 클래스형 컴포넌트 보다 덜 사용 합니다.

이전 함수 컴포넌트의 주요 단점은 state와 라이프사이클 API의 사용이 불가능하다는 단점이 있었는데 이 단점은 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었습니다. 

import { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    const name = "리액트";
    return <div>{name}</div>
  }
}

export default App;

첫 컴포넌트 생성

함수형 컴포넌트로 코드 작성

MyComponent.js

  • export default MyComponent로 선언하면 해당 컴포넌트를 다른 파일에서 import해 사용할 수 있습니다.
const MyComponent = () => {
    return <div>새로운 컴포넌트를 작성 합니다.</div>;
}
export default MyComponent;

App.js

  • import 구문을 사용
import './App.css';
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent />;
};

export default App;

JSX 내부에서 props 렌더링 (기본 문법)

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정 할 때 사용하는 요소 입니다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 할수 있습니다.

컴포넌트를 사용할 때 props값 지정하기

import './App.css';
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent name="곰돌이사육사"/>;
};

export default App;
const MyComponent = props => {
    return <div>안녕하세요. 제 이름은 {props.name} 입니다.</div>;
}

export default MyComponent;

props 기본값 설정 : defaultsProps

props값을 따로 지정하지 않는 경우 기본값을 보여줄 기본값을 설정하는 defaultProps 입니다.

const MyComponent = props => {
    return <div>안녕하세요. 제 이름은 {props.name} 입니다.</div>;
}

MyComponent.defaultProps = {
    name: "기본 이름"
};

export default MyComponent;
import './App.css';
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent />;
};

export default App;

태그 사이의 내용을 보여 주는 children

리액트 컴포넌트를 사용항 때 컴포넌트 태그 사이의 내용을 보여 주는 props가 children 입니다.

import './App.css';
import MyComponent from './MyComponent';

const App = () => {
  return (
  <div className='title-name'>
    <MyComponent>리액트</MyComponent>
  </div>
)};

export default App;
const MyComponet = props => {
	return(
		<div>
			안녕하세요. 제 이름은 {props.name}입니다. <br />
			childeren 값은 {props.children} 입니다.
		</div>
	);
}

비구조화 할당(구조 분해) 문법을 통해 props 내부 값 추출하기

👉 **비구조화할당이란 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식**입니다. 
const Mycomponent = props => {
	const { name, children } = props; 
import './App.css';
import MyComponent from './MyComponent';

const App = () => {
  return (
  <div className='title-name'>
    <MyComponent name={"곰돌이사육사"}>리액트</MyComponent>
  </div>
)};

export default App;
const MyComponent = ({name, children}) => {
    return (
        <div>
            안녕하세요. 제 이름은 {name} 입니다. <br />
            children 값은 {children} 입니다.
        </div>
    );
}

MyComponent.defaultProps = {
    name: "기본 이름"
};

export default MyComponent;

컴포넌트 추출

컴포넌트를 여러 개의 작은 컴포넌트로 나누기

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Comment from './Comment';

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
      name: 'Hello Kitty',
      avatarUrl: 'http://placekitten.com/g/64/64'
  }
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Comment
      date={comment.date}
      text={comment.text}
      author={comment.author} />
  </React.StrictMode>
);
function formatDate(date) {
    return date.toLocaleDateString();
}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
             src={props.author.avatarUrl}
             alt={props.author.name} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

export default Comment;
profile
ho_vi
FE 개발자🌱
이전 포스트

JSX란?

다음 포스트

State and Lifecyle

0개의 댓글