Component(컴포넌트)와 Props

이전 React 글에 이어 오늘은 Component와 Props에 대해서 복습을 해볼까 한다.

리액트 공식문서를 좀 참고했다 !

import React from "react";
import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  );
}

export default App

이것은 함수형으로 작성된 컴포넌트이다. 

이렇게 함수형으로 작성된 컴포넌트는 클래스형 컴포넌트로 바꿀 수 있는데 React.Component를 상속받아서 만들면 된다.

import React from "react";
import "./styles.css";

class App extends React.Component {
 render(){
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  );
 }
}

export default App

이러한 컴포넌트들은 자식 컴포넌트들에게 데이터들 넘겨줄 수 있는데 이를 props 객체라고 하고 이는 단일 객체로 전달된다.
또한 이 props 객체는 자식 컴포넌트에서 수정이 안되며 읽기 전용으로 사용해야 한다.

다음은 자식 컴포넌트로 App 컴포넌트에서 데이터를 넘겨주는 예제이다.

import React from "react";
import "./styles.css";

class App extends React.Component {
 render(){
  return (
    <div className="App">
      <Greeting name="Mike" />
    </div>
  );
 }
}

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

export default App

실행 화면

이렇게 원하는 데이터가 렌더링 된 것을 볼 수 있다. 

컴포넌트는 여러 개 사용 가능하며 넘겨줄 데이터는 객체이기 때문에 키 값을 여러 개 지정하는 것도 가능하다.

import React from "react";
import "./styles.css";

class App extends React.Component {
 render(){
  return (
    <div className="App">
      <Greeting name="Mike" say="I like React" />
      <Greeting name="Nick" say="Me too.."/>
    </div>
  );
 }
}

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

export default App

실행 화면

(실습은 codesandbox에서 실행했다.)

리액트에서는 구조 분해 할당이 자주 쓰이는데 props로 데이터를 받을 때도 구조 분해 할당을 이용하면 좀 더 간편하게 사용이 가능하다.

import React from "react";
import "./styles.css";

class App extends React.Component {
 render(){
  return (
    <div className="App">
      <Greeting name="Mike" say="I like React" />
      <Greeting name="Nick" say="Me too.."/>
    </div>
  );
 }
}

function Greeting({name, say}) {
  return (
    <> 
    <h1>Hello, {name}</h1>
    <h2>{say}</h2>
    </>
  );
}

export default App

넘겨받을 props 객체의 키 값을 일치시켜 주어 변수로 받을 수 있게 되었다.

이렇게 간단하게 Components와 Props에 대해서 알아보았다.