React의 Component React Components

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: "React",
};

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: "React",
    };
  
    // 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={"Wooli"} number={10}>
    Hello Hello Hello
</TestClassComponent>

Actual Code

import React, { Component } from "react";

export default class TestClassComponent extends Component {
    render() {
        const { name, number, children } = this.props;
        return (
            <div>
                My name is {name} <br />
                My number is {number} <br />
                The children value is {children}
            </div>
        );
    }
}