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

While this is one of the most basic examples, I will organize the fundamental concepts while building a Todo App that 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;

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

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

컴포넌트 나누기

Splitting Components

• 모듈 내보내기

• Exporting Modules

import React from "react";

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

export default MyComponent;

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

export default MyComponent allows the MyComponent written above to be used externally.

• 모듈 불러오기

• Importing Modules

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

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

export default App;

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

We are displaying the exported MyComponent on the screen.

Props

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

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

Props 사용해서 화면 나타내기

Displaying Content 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;

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

By using props attributes, we can now display "my Component React" on the screen.

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

If props are not set, it may not display as desired, so we define something called "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 설정을 통해 "리액트" 가 나올 수 있도록 했다

Even though props were not provided, through the defaultProps setting, "React" can be displayed.

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

Various Ways to Extract Data from Props

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

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

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

Various Ways to Define Data in Props

• defaultProps로 기본 내용 지정 가능
• propTypes로 변수 타입 및 필수값 설정 가능

• You can specify default content with defaultProps
• You can set variable types and required values with propTypes

// 기본값 설정
MyComponent.defaultProps = {
    test: "리액트",
};

// 기본 타입 설정 및 필수변수 설정
MyComponent.propTypes = {
 test: PropTypes.string,
 name: PropTypes.string.isRequired
}

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

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