컴포넌트 파일 분리하기, props

컴포넌트 파일 분리

컴포넌트를 만들어서 App.js 안에다 두면 복잡하고 유지보수하기 힘들다.

그래서 컴포넌트를 만들면 각각의 컴포넌트들을 파일로 따로 분리해둔다.

 

1. src / components 디렉토리를 새로 만든다.

이 안에다가 컴포넌트 파일을 모아둘 것이다.

 

2. components 파일 안에다 '컴포넌트명.js' 파일을 만든다.

그리고 안에다 코드를 작성한다.

import React, {Component} from 'react'; // react랑 Component 임포트

class FooterTab extends Component{
    render(){
        return (
            <div className="modal">
            <h1>제목</h1>
            <div></div>
            <div></div>
            </div>
        );
    }
    
}

export default FooterTab; // 다른 파일에서 FooterRab을 가져다 쓸 수 있게 만든다

 

 

3. App.js에 상단에 컴포넌트 import를 해준다.

import FooterTab from './components/FooterTab.js';

 

 

props

컴포넌트는 다 좋은데 컴포넌트 태그 하나만으로 안에 어떤 내용이 있는지 알 수 가 없다.

결국 컴포넌트 선언부로 가야만 그 내용을 알 수 있다.

props를 쓰면 컴포넌 태그 안에 속성을 선언해서 태그 안에 어떤 내용이 있는지 대략 알 수 있다.

그리고 선언한 속성을 컴포넌트 정의할 때도 사용할 수 있다.

 

 App.js의 App함수(App class) 안의 컴포넌트 선언부분

<FooterTab/>   
-->
<FooterTab title="제목" description="내용내용!"/>

 

FooterTab 컴포넌트

class FooterTab extends Component{
    render(){
        return (
            <div className="modal">
                <h1>{this.props.title}</h1>
                <div>{this.props.description}</div>
            </div>
        );
    }
    
}

this.props.속성명

이렇게 하면 컴포넌트 속성 값을 가져다 사용할 수 있다.

 

 

 

 

 

 

 

출처 : https://www.youtube.com/watch?v=pPCC2JWbPgk&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=13 변형 및 요약