React의 Component와 Props

  리액트(React)에서 컴포넌트(Component)는 자바스크립트 함수와 흡사하다고 보시면 됩니다. 또한 이러한 컴포넌트는 프롭스(Props)를 입력으로 받아서 리액트 요소(React Element)를 반환하는 형태로 동작합니다. 이러한 구조를 따르면 사용자가 보는 웹 페이지의 화면을 효과적으로 구성할 수 있습니다. 프롭스(Props)는 속성(Property)의 약자입니다. 흔히 자바(Java), 파이썬(Python) 등의 객체 지향 프로그래밍에서 사용하는 그 '속성'의 의미와 동일하다고 보시면 이해하기 쉽습니다.

  간단한 예제를 통해서 Component와 Props에 대해서 알아보도록 합시다. 또한 일단 함수형 컴포넌트를 이용할 것입니다.

※ HTML 소스코드 ※

<div id="root"></div>

※ JavaScript 소스코드 ※

function Show(props) {

  return (

    <h3>

      Name is {props.name}

    </h3>

  );

}

const element = <Show name="나동빈"/>;

ReactDOM.render(element, document.getElementById('root'));

  보시면 아까 언급했듯이 컴포넌트 형태로 사용되는 Show가 자바스크립트 함수처럼 props를 입력으로 받아서 리액트 요소를 반환하는 것을 알 수 있습니다. ReactDOM.render() 함수는 첫 번째 매개변수로 특정한 컴포넌트(Component)를 받습니다. 그래서 자신이 원하는 컴포넌트를 넣어주기만 하면 되는 것입니다. 그렇기 때문에 다음과 같은 형태로도 사용할 수 있습니다. 

ReactDOM.render(<Show name="나동빈"/>, document.getElementById('root'));

  또한 특정한 컴포넌트(Component)의 props는 디폴트(Default) 값을 설정할 수 있습니다.

※ JavaScript 소스코드 ※

function Show(props) {

  return (

    <h3>

      Name is {props.name}

    </h3>

  );

}

Show.defaultProps = {

  name: '홍길동'

};

ReactDOM.render(<Show/>, document.getElementById('root'));

  또한 기본적으로 특정한 컴포넌트가 다른 컴포넌트의 결과를 반환하도록 할 수도 있으며, 매우 다양하게 활용할 수 있습니다. 아래 예제를 보시면 실제로 컴포넌트를 두 번 거치면서 많은 내용들이 추가되는 것을 알 수 있습니다. 다시 말해서 이와 같이 리액트를 활용하면 뷰(View)를 표현할 때 보다 효과적으로 코딩할 수 있는 것입니다.

※ JavaScript 소스코드 ※

function Show(props) {

  return (

    <h3>

      Name is {props.name}

    </h3>

  );

}

function App() {

  return (

    <main>

      <Show name="나동빈"/>

      <Show name="홍길동"/>

      <Show name="이순신"/>

    </main>

  );

}

ReactDOM.render(<App/>, document.getElementById('root'));

  여기까지 이해하셨다면 이제 실제로 리액트(React)를 이용해서 뷰(View)를 그럴싸하게 만들어보는 예제를 다루어 봅시다.

※ JavaScript 소스코드 ※

function User(props) {

  return (

    <div>

      <img src={props.user.imageUrl}/>

      &nbsp;<strong>{props.user.name}</strong>

    </div>

  );

}

function Board(props) {

  return (

    <section>

      <User user={props.user}/>

      {props.title}

      <hr/>

      {props.content}

    </section>

  );

}

const board = {

  title: '게시글 제목입니다.',

  content: '게시글 내용입니다. 반갑습니다.',

  user: {

    name: '나동빈',

    imageUrl: 'https://placeimg.com/32/32/any'

  }

}

      

ReactDOM.render(

  <Board

    title={board.title}

    content={board.content}

    user={board.user}

  />,

  document.getElementById('root')

);