React의 Component React Components

가장 기본적인 예제이기도 하면서, 많은사람들이 사용하는 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>
        );
    }
}

I’m going to organize the basics while building a Todo App, which is both the most basic example and something many people use.

Functional Components / Class Components

• Functional Component

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

• Class Component

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

Class components can utilize state and lifecycle features, and we can define custom methods to use.

Splitting Components

• Exporting a Module

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

export default MyComponent makes the MyComponent written above available for use externally.

• Importing a Module

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

We’re displaying the exported MyComponent on the screen.

Props

Props are elements used to set component attributes. When importing and using a component, you can also pass props along with it.

Displaying on Screen Using 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;

Using the props attribute, we can now display “my Component React” on the screen.

If props are not set, it may not display as desired, so we set “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;

Even though we didn’t input props, the defaultProps setting allows “React” to be displayed.

Various Ways to Extract Data from Props

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

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

Various Ways to Define Data in Props

• You can specify default content with defaultProps

• You can set variable types and required values with propTypes

    // Setting default values
    MyComponent.defaultProps = {
        test: "리액트",
    };
  
    // Setting default types and required variables
    MyComponent.propTypes = {
     test: PropTypes.string,
     name: PropTypes.string.isRequired
    }
  
  

Using Props in Class Components

Where It’s Used

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

Actual Code

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>
        );
    }
}