React 학습 Component

React Component

- 리액트로 만들어진 앱을 이루는 최소한의 단위

- 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재활용 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.

- 컴포넌트는 데이터(props)를 입력받아 상태(state)에 따라 DOM node를 출력하는 함수이다.

- 컴포넌트 이름은 항상 대문자로 시작한다. (리액트는 소문자로 시작하는 컴포넌트를 DOM태그로 취급하기 때문)

- UI를 재사용 가능한 개별적인 여러 조각으로 나누고 각 조각을 나누어 코딩한다.

- props를 입력 받은 후 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

- props와 state 등의 특징들은 따로 정리하도록 한다.

 

 

컴포넌트 종류

1. 클레스형 컴포넌트 (Class Component)

- 컴포넌트 구성요소, 리액트 생명주기를 모두 포함하고 있다.

- 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용한다.

- 이제는 잘 사용하지 않는 방식이지만 라이프 사이클이나 유지보수를 하게되는 경우가 있다.

 

[예제]

import React from 'react';

// class키워드 필요, component로 상속 받는다
class MyComponent extends React.Component {
	// props 초기값 설정 가능 (constructor안에서도 가능)
	defaultProps = {
    	name : '김철수'
    }
    
    // 클래스 초기화
	constructor(props){
    	super(props)
    }
    
    componentDidMount(){
    // 상속받은 생명주기 함수
    }
    
    // render()메소드가 반드시 있어야함
    render() {
    	// this.props로 값을 불러 올 수 있다.
    	return <div>hi { this.props.name }!</div>
    }
}

export default MyComponent; // 다른 js파일에서 불러올 수 있도록 내보내기

 

 

2. 함수형 컴포넌트 (Stateless Functional Component)

- 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다.

- state, lifeCycle 관련 기능사용이 불가능하다. (hook을 통해 해결 됨)

- 함수형 컴포넌트에서만 사용가능한 hook 기능 = useState, useEffect 등이 있다.

 

[예제]

- App.js 파일

import React from 'react';
import MyComponent from './mycomponent';

const App = () => {
	const name = '김철수'
	return 
    	<>
    		<MyComponent name = {name} />
        </>
}

export default App;

- mycomponent.js파일

import React from 'react';

const MyComponent = (props) => {
	return <div>hi { props.name }!</div>
}

export default MyComponenet;