[React] React props, 컴포넌트(Component) 활용하기

안녕하세요.

이번에는 1개의 컴포넌트를 재사용하면서 활용하는 방법을 해보겠습니다.

그리고 재사용되는 컴포넌트의 내부 데이터 값이 다르게 설정하는 방법도 알아보겠습니다.

 

• 기존 HTML에서는 기존의 것과 동일한 코드가 있어도 모두 작성해야만 했습니다.
• EJS에서는 include로 불러와서 사용했지만, React에서는 컴포넌트로 활용할 수 있습니다.

 

1. 중복되는 부분 컴포넌트로 불러와서 사용하기

 

App.js

import './App.css';
import List from './components/List';

function App() {
  return (
    <div className="App">
      <List />
    </div>
  );
}

export default App;

 

components/List.jsx

import React from 'react'
import Modal from './Modal'

export default function List() {
  return (
    <div>
        <h1>오늘 해야할 일</h1>
        <hr />
        <Modal />
        <h2>리액트 공부하기</h2>
        <p>state 활용법 익히기</p>
        <hr />
        <h2>코테 문제 풀기</h2>
        <p>Lv 0 정복 가즈아</p>
        <hr />
        <Modal />
    </div>
  )
}

 

components/Modal.jsx

import React from 'react'

export default function Modal() {
  return (
    <div className='modal'>
        <h2>오늘 해야할 일 2개</h2>
        <h2>오늘 완료한 일 0개</h2>
    </div>
  )
}

 

실행결과

• Modal.jsx 부분을 List.jsx에서 2번 호출해서 사용해서 출력하는 방법입니다.

 

2. 재사용 컴포넌트의 내부 데이터 값 변경해서 사용하기

 

시작하기 전에 props를 알아야 합니다.

Props

• 부모 컴포넌트에서 자식 컴포넌트에 원하는 데이터를 보내는 방법이다.
• props라는 이름의 객체로 전달합니다.
• App.js 가 아니어도 부모 컴포넌트이면 자식에게 데이터를 전달할 수 있습니다.

 

2-1. 연습

• Props를 이용하여 text라는 객체로 MainHeader.jsx에게 전달합니다.

 

App.js

import './App.css';
import MainHeader from './components/MainHeader';

function App() {
  return (
    <div className="App">
      {/* Props에서 text라는 객체로 전달 */}
      <MainHeader text="Hello, props world!" />
    </div>
  );
}

export default App;

 

components/MainHeader.jsx

• App.js에서 보내는 text 데이터를 MainHeader.jsx에서 text 이름으로 받아줍니다.
• 보내고 받는 "text" 이름은 같아야 합니다.
• 해당 코드에서는 { text }로 받았지만 MainHeader(props) {} 방식으로 받을 수 도 있습니다.
• 대신 사용할 때 props.text로 사용해야 합니다.

import React from 'react'

// App.js에서 보내는 Props에서 text라는 객체를 받아서 사용한다.
// props = {
//     text: "Hello, props world!"
// }

export default function MainHeader({text}) {
  return (
    <>
        <h1>{text}</h1>
    </>
  )
}

 

실행결과

 

2-2. 연습2

• 같은 Component를 불러와도 props에 따라서 다른 메시지를 출력할 수 있습니다.

App.js

import './App.css';
import MainHeader from './components/MainHeader';

function App() {
  return (
    <div className="App">
      {/* 같은 Component를 불러와도 props를 다르게 전달하여 다른 메시지를 출력할 수 있게 한다. */}
      <MainHeader text="Bye Bye, props world!" />
      <MainHeader text="Well come back, props world!" />
    </div>
  );
}

export default App;

 

components/MainHeader.jsx

import React from 'react'

export default function MainHeader({text}) {
  return (
    <>
        <h1>{text}</h1>
    </>
  )
}

 

실행결과

 

2-3. 연습3

• props를 전달할 때 여러 데이터를 보낼 수 있습니다.

 

App.js

import './App.css';
import MainHeader from './components/MainHeader';

function App() {
  return (
    <div className="App">
      {/* props를 전달할 때 1개만 보내는 것이 아니라 여러 가지 데이터를 보낼 수 있다. */}
      <MainHeader text="Go naver" href="https://naver.com" userID="sesac" />
    </div>
  );
}

export default App;

 

components/MainHeader.jsx

• 여기는 props를 작성해서 사용하는 방식입니다.

import React from 'react'

// 통으로 받아서 그냥 사용하는 방법
export default function MainHeader(props) {
  return (
    <>
        <div>
            {/* 통으로 받아서 그냥 사용하는 방법 */}
            <h1>{props.userID} 님 반갑습니다.</h1>
            <a href={props.href}>{props.text}</a>
        </div>
    </>
  )
}

 

3-4. 연습 4

• 구조분해 할당으로 받는 방법 - 1
• App.js는 2-3. 연습 3과 동일합니다.

components/MainHeader.jsx

import React from 'react'

// 구조분해 할당으로 받는 방법 - 1
export default function MainHeader({text, href, userID}) {
  return (
    <>
        <div>
            {/* 구조분해 할당으로 받는 방법 - 1, 2 */}
            <h1>{userID} 님 반갑습니다.</h1>
            <a href={href}>{text}</a>
        </div>
    </>
  )
}

 

3-5. 연습 5

• 구조분해 할당으로 받는 방법 - 2
• App.js는 3-3. 연습 3과 동일합니다.

components/MainHeader.jsx

import React from 'react'
// 구조분해 할당으로 받는 방법 - 2
export default function MainHeader(props) {
    const { text, href, userID} = props;
  return (
    <>
        <div>
            {/* 구조분해 할당으로 받는 방법 - 1, 2 */}
            <h1>{userID} 님 반갑습니다.</h1>
            <a href={href}>{text}</a>
        </div>
    </>
  )
}

 

실행결과

 

 

4. 클래스형 컴포넌트의 props

• 함수형에서 props로 접근하던 것을 this.props로 접근하면 됩니다.
• 클래스이기 때문에 매개변수를 받지 않습니다.
• this.props를 쓰면 코드가 길어져서 보통 구조 분해 할당으로 변수를 만들어 사용합니다.

App.js

import './App.css';
import ClassProps from './components/ClassProps';

function App() {
  return (
    <div className="App">
      <ClassProps text="Go naver" href="https://naver.com" userID="sesac" />
    </div>
  );
}

export default App;

 

components/ClassProps.jsx

import React, { Component } from 'react'

export default class ClassProps extends Component {
  render() {
    // 클래스형 컴포넌트에서는 this.props에 저장이 된다.
    // this.props.text 와 같이 너무 길어지므로 구조분해 할당을 해준다.
    const { text, href, userID} = this.props;
    return (
      <div>
            <h1>{userID} 님 반갑습니다.</h1>
            <a href={href}>{text}</a>
        </div>
    )
  }
}

 

실행결과

 

 

이상으로 props, component (컴포넌트) 활용하는 방법에 대하여 알아보았습니다.

감사합니다.