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