안경잡이개발자

리액트 Component +1
728x90
반응형

  리액트(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')

);


728x90
반응형

'리액트(React)' 카테고리의 다른 글

React의 LifeCycle과 API 호출  (2) 2019.01.04
React의 State  (0) 2018.12.25
React의 Component와 Props  (0) 2018.12.25
React에서 JSX란?  (0) 2018.12.25
코드펜(Codepen)을 이용한 React 개발환경 구축하기  (0) 2018.12.25
React JS의 개요와 Hello World  (0) 2018.12.25

Comment +0