3장. 컴포넌트

안녕하세요. 맹정입니다! 

오늘은 컴포넌트에 대해서 알아볼 예정입니다. 

 

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

다음 코드는 함수 컴포넌트 입니다.

import './App.css';

function App(){
	const name = '리액트';
    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;

클래스형 컴포넌트와 함수 컴포넌트의 차이점

1. 클래스형 컴포넌트의 경우, 이후 배울 state 기능 및 라이프 사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의 할 수 있다는 것입니다.

2. 컴포넌트에서는 render() 함수가 반드시 있어야하고, 그 안에서 보여주는 JSX 를 반환해야 합니다.

 

함수 컴포넌트의 장점

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

2. 프로젝트를 완성후 빌드 한 후 배포할때도 함수 컴포넌트를 사용하는것이 결과물의 파일 크기가 작다.

 

함수 컴포넌트의 단점

1. state 와 라이프사이클 API 의 사용이 불가능하다.

-> 리액트 v16.8 업데이 트 이후 Hooks 라는 기능 도입으로 해결

---

화살표 함수?
화살표 함수는 ES6 문법에서 함수를 표현하는 새로운 방식이다. 기존의 function을 이용한 함수 선언 방식을 아예 대체 하지는 않지만, 사용 용도가 조금 다르다. 이 문법은 주로 함수를 파라미터로 전달할때 유용하다.

function BlackDog() {
	this.name = '흰둥이';
    return {
    	name : '검둥이',
        bark : function() {
        	console.log(this.name + ': 멍멍!');
            }
      }
}
const blackDog = new BlackDog();
blackDog.bark(); // 검둥이 : 멍멍

function WhiteDog() {
	this.name = '흰둥이';
    return {
    	name : '검둥이',
        bark : function() {
        	console.log(this.name + ': 멍멍!');
            }
      }
}
const whiteDog = new WhiteDog();
whiteDog.bark(); // 흰둥이 : 멍멍

function() 을 사용했을때는 검둥이가 나오고, () => 를 사용했을 경우에는 흰둥이가 나타납니다.

일반 함수는 자신이 종속된 객체를 this 로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킵니다. 

화살표 함수는 값을 연산하여, 바로 반환할때 사용하면 가독성을 높일 수 있습니다. 

따로 ()=> 함수를 사용할경우, {} 을 열지 않으면 연산한 값을 그대로 반환한다는 의미입니다.

---

# 모듈 내보내기 및 모듈 불러오기

export default MyComponent; // 모듈 내보내기
import MyComponent from './MyComponent'; // 모듈 불러오기

const App = () => {
	return <MyComponent />
    };
    
export default App;

# props 란?

props 는 properties 를 줄인 표현으로 컴포넌트 속성을 설정할때 사용하는 요소입니다.

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 할 수 있습니다.

 

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

export default MyComponent;

import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent name ="React" />; //props 값 지정
    };
export default App;

# props 기본값 설정 : defaultProps

props값을 따로 지정하지 않을 경우, 보여 줄 기본 값을 설정하는 것이 defaultProps  입니다.

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

export default MyComponent;

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

리액트 컴포넌트를 사용시 컴포넌트 태그 사이의 내용을 보여주는 props가, childern 입니다.

import MyComponent from './MyComponent';

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

export default App;

 

 

위 코드의 MyComponent 태그 사이에 작성한 리액트라는 문자열을 MyComponent 내부에서 보여주려면, props.children 값을 보여줘야 합니다.

const MyComponent = props => {
return(
<div>
	안녕하세요. 제 이름은{props.name} 입니다. <br/>
   	childern 값은 {props.children} 입니다.
</div>
	);
}; 
export default MyComponent;

# 비구조화 할당 문법을 통해 props 내부 값 추출

객체에서 값을 추출하는 문법을 비구조화 할당이라고 부릅니다.
이 문법은 구조 분해 문법이라고도 부르며, 함수의 파라미터 부분에서도 사용 가능합니다.

만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화하여 사용하는 것입니다.

const MyComponent = props => {
	const { name, childern } = props;
}
// 위 코드와 동일하지만, 아래가 더 편함 
const MyComponent = ({ name, children}) => {
}

# propTypes 를 통한 props 검증

컴포넌트의 필수 props 를 지정하거나 props 타입을 지정할때는, propTypes 를 사용합니다. 

컴포넌트의 propTypes 를 지정하는 방법은 defaultProp을 설정하는것과 비슷합니다.

우선 propTypes 를 사용하려면, 코드 상단에 import 구문을 사용하여 불러옵니다.

import PropTypes from 'prop-types';

const MyComponent =({ name, childern }) => {
	MyComponent.propTypes = {
    	name: PropTypes.string // 이렇게 설정하면 무조건 문자열 형태로 전달
	};
}
export default MyComponent;

# isRequired 를 사용하여 필수 propTypes 설정

propTypes 를 지정하지 않았을때 경고 메세지를 띄어주는 작업을 합니다. 

 

import PropTypes from 'prop-types';

const MyComponent =({ name, childern }) => {
	MyComponent.propTypes = {
    	name: PropTypes.string.isRequired //필수 지정
	};
}
export default MyComponent;

# propTypes 종류

array : 배열

arrayOf(다른 PropType) :  특정 PropType으로 이루어진 배열을 의미합니다.

예를 들어 arrayOf(PropType.number)는 숫자로 이루어진 배열 입니다.

bool :  true, false

func : 함수

number  : 숫자

object : 객체

string : 문자열

symbol ES6의 Symbol

node : 렌더링 할 수 있는 모든 것 (숫자, 문자열, 혹은 JSX코드, children도 node PropsType 입니다.)

instanceOf(클래스) : 특정 클래스의 인스턴스

OneOf(['dog', 'cat']) :  주어진 배열 요소 중 하나

OneOfType([React.PropTypes.string, PropsTypes.number]) : 주어진 배열 안의 종류중 하나

objectOf(React.PropTypes.number) : 객체의 모든 키 값이 인자로 주어진 PropType인 객체

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

클래스형 컴포넌트에서 props를 사용할때마다 render 함수에서 this.props 를 조회하면 됩니다.
그리고 defaultProps 와 propTypes 는 똑같은 방식으로 설정할 수 있습니다.

또한, class 내부에서 저장하는 방법도 있습니다.

 

# state 란?

리액트에서 state란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. props는 컴포넌트가 사용되는 과정에서

부모 컴포넌트가  설정하는 값이며, 컴포넌트 자신은 해당 props 를 읽기 전용으로만 사용 할 수 있습니다.

props를 바꾸려면 부모 컴포넌트에서 바꿔줘야합니다. 

 

리액트에는 두가지 state가 있습니다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수 컴포넌트에서 useState 라는 함수를 통해 사용하는 state 입니다.

import { Component } from 'react';

class Counter extends Component {
	constructor(props) {
    	super(props);
        //state 초기값 설정
        this.state = {
        number : 0
        };
       }
      render() {
      const { number } = this.state; //state를 조회할땐 this.state로 조회
      return(
      <div>
      	<h1>{number}</h1>
        <button
        //onClick을 통해 버튼이 클릭 되었을 경우, 호출할 함수를 지정
        onClick = {() => {
        	//this.setState를 사용하여 state에 새로운 값을 삽입
            this.setState({ number : number + 1});
            }}
           >
           +1
          </button>
         </div>
        );
       }
      }
      
      export default Counter;