React 를 배우자 part 3

클래스형 컴포넌트 

 

앞써 보았던 App 컨포넌트는 함수형 컴포넌트이며 코드가 다음과 같이 이루어져 있습니다. 

 

function App() {
     const name = "React";
     return (
          <>
               <div>{name}</div>
               <input />
          </>
     );
}

export default App;

 

컴포넌트를 선언하는 방식은 두가지 입니다. 하나는 함수형 컴포넌트이고 또 다른 하나는 클래스형 컴포넌트입니다. 

 

App.js 컴포넌트를 다음과 같이 변형시켜 봅시다 

 

 

import React, { Component } from "react";

class App extends Component {
     render() {
          const name = "react";
          return <div className="react">{name}</div>;
     }
}

export default App;

 

클래스형 컴포넌트로 바꿔였지만 역활은 이전에 보았던 함수형 컨포넌트와 똑같습니다. 클래스형 컴포넌트와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 이후 나올 state 기능 및 라이프 사이클 기능을 사용할수 있다는 것과 임의 메서드를 정의할수가 있습니다. 

 

클래스형 컴포넌트에는 render 함수가 꼭 있어야 하고 그 안에서 보여주어야 할 JSX를 반환 해야 합니다. 

 

 

첫 컴포넌트 생성 

 

파일 만들기 -> 코드 작성하기 -> 모듈 내보내기 

 

src 디렉터리에 MyComponent.js  파일 생성 

 

import React from "react";

const MyComponent = () => {
     return <div>나의 새롭고 멋진 컴포넌트</div>;
};

export default MyComponent;

 

App.js 변형 

import MyComponent from "./MyComponebt";

const App = () => {
     return <MyComponent />;
};

export default App;

 

다음과 같이 출력이 됩니다.

 

 

 

props 

 

props 는 properties 를 줄인 표현으로 컴포넌트를 수정하여 해당 컴포넌트에서 name 이라는 props를 렌더링 하도록 해봅시다 props값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있습니다. props를 렌더링 할 때 Part2 에서 했던것 처럼 {} 가호로 감싸주면 됩니다. 

MyComponent.js

import React from "react";

const MyComponent = (props) => {
     return <div>안녕하세요, 제이름은 {props.name}입니다.</div>;
};

export default MyComponent;

App.js

import React, { Component } from "react";
import MyComponent from "./MyComponent";

const App = () => {
     return <MyComponent name="React" />;
};

export default App;

 

name 없을때 기본 값 설정하기 

 

import React from "react";

const MyComponent = (props) => {
     return <div>안녕하세요, 제이름은 {props.name}입니다.</div>;
};

MyComponent.defaultProps = {
     name: "기본이름",
};
export default MyComponent;