[React] 리액트는 컴포넌트로 이루어져 있다

 

리액트를 구성하는 모든것들은 컴포넌트(Component)이다.

 

1. 컴포넌트를 만드는 2가지 방법

첫 번째: 자바스크립트 함수 이용

이 방법으로 'stateless functional component' 라는 컴포넌트를 생성한다.

데이터를 받고, 렌더 할 수 있지만 데이터를 관리할 수 없다.

 

만드는 방법

자바스크립트 함수를 만드는 방법과 같고,

JSX 나 null 을 리턴(return) 해주면 된다.

주의할점은 컴포넌트 이름의 첫 글자는 대문자로 만들어주어야 한다.

 

const MyComponent = function() {
  return (
    <div>
      Hello React!
    </div>
  )
}

return 뒤에 괄호는 옵션*

 

 

 

두 번째: ES6 class 이용

React.Component 를 extends 해서 사용한다.

이로인해 React의 유용한 기능을 사용할 수 있다(local state, lifestyle hooks 등)

 

만드는 방법을 우선 알아보자

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Hello React!</h1>
      </div>
      )
    }
};

ES6 class를 사용하는 방법이니,

MyComponent 컴포넌트 앞에 class를 붙이고 React.Component를 extends 해준다.

constructor와 super도 넣어준다. constructor 와 super를 넣는 이유

끝으로 렌더를 해줄 JSX를 넣어준다.

(렌더는 ReactDom.render()를 불러줘야한다.)

 

2. 여러 컴포넌트를 합치자

앱을 만들고 상상해보자, 앱에는 메뉴(Navbar), 대시보드(Dashborad), 푸터(Footer) 등 여러 컴포넌트가 있다.

이렇게 합쳐 주면된다.

return (
 <App>
  <Navbar />
  <Dashboard />
  <Footer />
 </App>
)

 

return은 항상 1개만 해줘야 하니, <App>컴포넌트에 넣어준다.

컴포넌트를 넣어줄때는 <APP></App> 이렇게 클로징태그를 이용하거나,

<App /> 셀프 클로징태그를 이용해도 된다.

 

 

 

3. 컴포넌트 렌더(render) 하기

JSX 렌더할 때와 비슷하다

class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        {/* Fruits, Vegetables 컴포넌트를 넣어줬다 */}
        <Fruits />
        <Vegetables />
      </div>
    );
  }
};

ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'));

 

합칠때처럼 컴포넌트를 <TypesOfFood /> 이렇게 넣어주고,

넣고싶은 HTML DOM에 넣어주면 된다.

 

 

FreeCodeCamp 리액트 섹션을 하면 배우것