Home
Frontend
React의 Component
울이
울이
December 24, 2021
1 min

Table Of Contents

01
함수형 컴포넌트 / 클래스형 컴포넌트
02
컴포넌트 나누기
03
Props

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

Tags

#React#Javascript
Previous Article
React의 State
Next Article
React 시작하기
울이

울이

개발자 울이

경험하고 사용하고 개선하는 것, 그리고 소통하면서 성장하는 것을 좋아합니다.

Expertise

Backend
Frontend
Data Engineering

Social Media

githublinkedinwebsiteinstagram

Related Posts

React 시작하기
React 시작하기
December 24, 2021
1 min
© 2023, All Rights Reserved.

Quick Links

Home

Social Media