[React] 리액트 - 4 (컴포넌트)

리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러 가지 컴포넌트로 구성되어 있습니다.

컴포넌트의 기능은 단순한 템플릿 이상입니다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것은 물론이고, 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있습니다.

 

함수형 컴포넌트와 클래스형 컴포넌트

import './App.css';

function App() {
    const name = 'react';
    return <div className="react">{name}</div>
}

export default App;

<↑함수형 컴포넌트>

import { Component } from 'react';

class App extends Component {
	render() {
    	const name = 'react';
        return <div className="react">{name}</div>
    }
}

export default App;

<↑클래스형 컴포넌트>

 

클래스형 컴포넌트는 함수형 컴포넌트와 다르게 보이지만 역할은 똑같습니다. 차이점은 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것입니다.

클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 합니다.

 

컴포넌트를 선언할 수 있는 두가지 방법 중 어느 상황에 어떤 컴포넌트를 사용해야 할까요?

함수 컴포넌트의 장점은 다음과 같습니다.

1. 클래스형 컴포넌트보다 선언하기가 훨씬 편합니다.

2. 메모리 자원을 클래스형 컴포넌트보다 덜 사용합니다.

3. 프로젝트를 완성하여 빌드한 후 배포할 때도 함수 컴포넌트는 결과물의 파일 크기가 더 작습니다.

 

단점은 state와 라이프사이클 API의 사용이 불가능하다는 점인데요. 이 단점은 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었습니다.

 

컴포넌트 생성

컴포넌트를 만들려면 컴포넌트 코드를 선언해야 합니다. 먼저 src 디렉토리에 MyComponnent.js 파일을 생성합니다.

그 다음 아래의 코드를 작성해보세요.

const MyComponent = () => {
    return <div>새로운 컴포넌트</div>;
}

export default MyComponent;

이번에 작성한 코드는 함수형 컴포넌트지만 형태가 조금 다릅니다. function 키워드를 사용하는 대신에 () => {}를 사용하여 함수를 만들어 주었습니다. 이는 ES6에 도입된 화살표 함수 문법입니다. 두 방법에는 큰 차이는 없지만 화살표 함수를 사용하는 것이 좀 더 간결하기 때문에 이 방법으로 진행하도록 하겠습니다.

 

방금 작성한 컴포넌트에서 export default MyComponent; 코드는 다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정합니다.

 

다른 컴포넌트에서 MyComponent 컴포넌트를 불러와서 사용하려면,

import MyComponent from './MyComponent'; 코드를 추가해주면 됩니다. (경로는 다를 수 있습니다.)

 

props

pros는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소 입니다. 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.

 

우선 MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정해봅시다.

const MyComponent = props => {
    return <div>안녕하세요. 제 이름은 {props.name}입니다.</div>;
}

export default MyComponent;

 

이제는 MyComponents의 부모 컴포넌트로부터 props의 값을 지정해보겠습니다.

import MyComponent from './MyComponent';

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

export default App();

 

코드를 저장하고 브라우저를 확인해 보면, props값이 성공적으로 렌더링 된 것을 확인할 수 있습니다.

 

1. defaultProps

만약 부모 컴포넌트로부터 props값이 지정되지 않았다면, 해당 props 부분이 비어서 렌더링이 되게 되는데요.

따로 지정하지 않았을 때 보여줄 defaultProps를 설정하는 방법은 다음과 같습니다.

const MyComponent = props => {
    return <div>안녕하세요. 제 이름은 {props.name}입니다.</div>;
};
MyComponent.defaultProps = {
	name: '기본 이름'
};

export default MyComponent;

 

2. 태그 사이의 내용을 보여주는 children

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props가 있는데요, 바로 children입니다.

import MyComponent from './MyComponent';

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

export default App();

const MyComponent = props => {
    return 
    <div>
    안녕하세요. 제 이름은 {props.name}입니다. <br />
    children 값은 {props.children}입니다.
    </div>;
};
MyComponent.defaultProps = {
	name: '기본 이름'
};

export default MyComponent;

App 컴포넌트에서 MyComponent태그 사이에 작성한 리액트라는 문자열을 MyComponent 내부에서 보여 주려면

props.children 값을 사용하면 됩니다.

 

3. 비구조화 할당 문법을 통해 props 내부 값 추출하기

4. propsTypes를 통한 props 검증

5. isRequired를 사용하여 필수 propsTypes 설정

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

 

state