React - Components (컴포넌트) ★

1. Components (컴포넌트) 정의
2. Class Components (클래스 컴포넌트) 생성법
3. Function Components (함수 컴포넌트) 생성법
4. Component Constructor (컴포넌트 생성자)
5. Props
6. 컴포넌트 안에 다른 컴포넌트 가져오기
7. 다른 파일 안의 컴포넌트 가져오기

Components (컴포넌트) 정의

 

컴포넌트 : HTML 요소를 반환하는 함수. 

 

---

 

1.

컴포넌트는 독립적이고 재사용 가능한 코드 파편 비슷. 

2.

컴포넌트는 JS 함수와 동일한 용도지만,

격리된 상태로 작동하며 render() 메서드 통해 HTML 반환.

3.

컴포넌트는 클래스 컴포넌트와 함수 컴포넌트의 두 유형인데,

이 수업에선 클래스 컴포넌트에 중점을 두고 설명.

 

Class Components (클래스 컴포넌트) 생성법

 

1.

컴포넌트 이름은 대문자로 시작함.

2,

컴포넌트는 extends React.Component 문을 포함.

※ 컴포넌트가 React.Component 를 상속해, 컴포넌트가 React.Component 함수에 접근 가능케 함.

3.

컴포넌트도 render() 메서드 필요.

※ HTML을 반환하는 역할함. 

 

---

[예제] C:\User\사용자명\hz\src\index.js

import React from 'react';

import ReactDOM from 'react-dom';

class Hz extends React.Component {

  render() {

    return <h2>Hz은 Homzzang 의미.</h2>;

  }

}

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

 

Function Components (함수 컴포넌트) 생성법

 

1.

Function 컴포넌트는 Class 컴포넌트와 유사하나, 

이 수업에선 Class 컴포넌트에 중점을 두고 설명함.

 

2.

Function 컴포넌트 경우도, 대문자로 시작해야 함.

 

---

[예제] C:\User\사용자명\hz\src\index.js

 

import React from 'react';

import ReactDOM from 'react-dom';

function Hz() {

  return <h2>Hz은 Homzzang 의미.</h2>;

}

 

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

 

Component Constructor (컴포넌트 생성자)

 

1. 

컴포넌트에 constructor() 함수 있으면, 컴포넌트 시작 시 자동 호출됨.

 

2.

constructor() 함수는 컴포넌트의 속성들을 시작함.

 

3.

React에서 컴포넌트 속성은 state 객체에 보관됨.

 

4.

constructor() 함수는 부모 컴포넌트의 constructor() 함수를 실행하는 super() 문을 포함하여 부모 구성 요소의 상속을 존중하고 컴포넌트가 부모 컴포넌트( = React.Component)의 모든 함수에 접근할 수있는 곳이기도 함. 

 

---

[예제] C:\User\사용자명\hz\src\index.js

 

import React from 'react';

import ReactDOM from 'react-dom';

class Hz extends React.Component {

  constructor() {

    super();

    this.state = {name: "홈짱"};

  }

  render() {

    return <h2>Hz은 Homzzang ({this.state.name}) 의미.</h2>;

  }

}

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

 

Props

 

Props는 컴포넌트의 속성을 처리하는 또 다른 방법 중의 하나로.

함수의 인수 (= 독립변수)와 같으며, 속성을 컴포넌트로 전달함.

 

---

[예제] C:\User\사용자명\hz\src\index.js

 

import React from 'react';

import ReactDOM from 'react-dom';

class Hz extends React.Component {

  render() {

    return <h2>Hz은 Homzzang({this.props.name}) 의미.</h2>;

  }

}

ReactDOM.render(<Hz name="홈짱"/>, document.getElementById('root'));

 

컴포넌트 안에 다른 컴포넌트 가져오기

 

컴포넌트 안에서 다른 컴포넌트를 참조 가능.

 

---

[예제] C:\User\사용자명\hz\src\index.js

 

import React from 'react';

import ReactDOM from 'react-dom';

class Hz extends React.Component {

  render() {

    return <h2>Hz은 Homzzang 의미함.</h2>;

  }

}

class Qna extends React.Component {

  render() {

    return (

      <div>

      <h1>Hz은 무슨 뜻 ?</h1>

      <Hz />

      </div>

    );

  }

}

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

 

다른 파일 안의 컴포넌트 가져오기

 

1.

React는 코드 재사용에 관한 거라, 일부 컴포넌트를 별도 파일로 분리 가능.

즉,  .js 파일 확장자 가진 새 파일 생성해 그 안에 컴포넌트 생성 코드 삽입.

2.

파일 시작 : React 가져오기 문으로 시작해야 함.

파일 종료:  export default Hz; 문으로 끝나야 함.

 

[예제] App.js 파일에 정의 후, index.js 파일에서 호출해서 출력.

---

1. C:\User\사용자명\hz\src\App.js

 

import React from 'react';

import ReactDOM from 'react-dom';

class Hz extends React.Component {

  render() {

    return <h2>Hz은 Homzzang 의미.</h2>;

  }

}

export default Hz; 

 

---

2. C:\User\사용자명\hz\src\index.js

 

import React from 'react';

import ReactDOM from 'react-dom';

import Hz from './App.js';

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