React의 Component

가장 기본적인 예제이기도 하면서, 많은사람들이 사용하는 Todo App을 만들면서 기본적인 내용들을 정리 해 보려고 한다

함수형 컴포넌트 / 클래스형 컴포넌트

• 함수형 컴포넌트

    import React from "react";
  
    function App() {
     const name = "Superman";
     return <div> {name} </div>;
    }
  
    export default App;
  
  

• 클래스형 컴포넌트

    import React, { Component } from "react";
  
    class App extends Component {
     render() {
      const name = "Superman";
      return <div> {name} </div>;
     }
    }
  
    export default App;
  
  

클래스형 컴포넌트는 state 기능과 라이프사이클 기능을 활용 할 수 있고, 우리가 사용할 임의의 메서드를 정의 할 수 있다

컴포넌트 나누기

• 모듈 내보내기

    import React from "react";
  
    const MyComponent = () => {
        return <div> my Component</div>;
    };
  
    export default MyComponent;
  
  

export default MyComponent 는 위에서 작성한 MyComponent를 외부에서 사용 할 수 있도록 설정한다

• 모듈 불러오기

    import React from "react";
    import MyComponent from "./MyComponent";
  
    const App = () => {
        return <MyComponent />;
    };
  
    export default App;
  
  

export 된 MyComponent를 사용해서 화면에 보여주고있다

Props

컴포넌트의 속성을 설정 할 때 사용하는 요소이다. 컴포넌트를 import 해서 사용 할 때 props도 같이 넘겨줄 수 있다

Props 사용해서 화면 나타내기

import React from "react";

const MyComponent = (props) => {
    return <div> my Component {props.test}</div>;
};

export default MyComponent;

import React from "react";
import MyComponent from "./MyComponent";

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

export default App;

props의 속성을 사용해서, 화면에 my Component React 를 나타 낼 수 있게 되었다

만약 props를 설정하지 않았을 경우에는 원하는 대로 보여주지 않을 수 있기 때문에 “default Props” 라는 걸 정해준다

Default Props

import React from "react";

const MyComponent = (props) => {
    return <div> my Component {props.test}</div>;
};

MyComponent.defaultProps = {
    test: "리액트",
};

export default MyComponent;

import React from "react";
import MyComponent from "./MyComponent";

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

export default App;

props를 입력하지 않았지만, defaultProps 설정을 통해 “리액트” 가 나올 수 있도록 했다

props에서 데이터를 꺼내는 여러가지 방법

// 방법 1
const MyComponent = (props) => {
 const {name, test} = props;
};

// 방법 2
const MyComponent = ({name, test}) => {
};

props에서 데이터를 정하는 여러가지 방법

• defaultProps로 기본 내용 지정 가능

• propTypes로 변수 타입 및 필수값 설정 가능

    // 기본값 설정
    MyComponent.defaultProps = {
        test: "리액트",
    };
  
    // 기본 타입 설정 및 필수변수 설정
    MyComponent.propTypes = {
     test: PropTypes.string,
     name: PropTypes.string.isRequired
    }
  
  

클래스형 컴포넌트에서 props 사용하기

사용 된 곳

<TestClassComponent name={"울이"} number={10}>
    헬로헬로헬로
</TestClassComponent>

실제 코드

import React, { Component } from "react";

export default class TestClassComponent extends Component {
    render() {
        const { name, number, children } = this.props;
        return (
            <div>
                제 이름은 {name} 이구요 <br />
                저의 숫자는 {number} 이구요 <br />
                children 값은 {children} 입니다
            </div>
        );
    }
}