2. React Component (props, state, Class Component, Functional Component)

안녕하세요 효그니입니다! 꽤나 빠르게 새 글을 올리네요! 하핳!

오늘은 React에서의 Component에 대해 강의를 할 생각입니다! 자 시작해볼까요!

우선 Component란?

React의 component란 상태 ( state ) 를 갖고 있고, 인자 값으로 Props 를 가지며,

반환 값으로 Element를 반환하는 "함수" 입니다! 

 

**** 이름의 첫 글자는 반드시 대문자여야합니다! ****

{function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

CRA를 사용하면 기본적으로 나오는 App Component 입니다!

반환 값을 어디서 보신 것 같다구요? 맞습니다. html 태그를 반환하죠!!!

JSX라는 기법입니다! 랜더링 할 UI를 반환하는 겁니다!!

Component는 크게 클래스형, 함수형 컴포넌트로 나눠집니다!

상태와 생명주기에 관한 글은 분량이 너무 길어져 나눠서 작성하려 합니다!

Props

함수의 인자 값입니다!

부모 Component 에서 자식 Component로 데이터를 넘길 때 사용합니다!

{function App() {
	return (
		<div className='App'>
			<h2>안녕 친구야! 너의 이름은 뭐니?</h2>
			<Friend name='한 시간에 커피 3병' />
		</div>
	);
}

function Friend(props) {
	return <h2>친구 : 내 이름은 {props.name}이야!</h2>;
}

간단한 예제입니다.

Friend Component 를 만들고, name 이라는 값을 Props로 전달했습니다.

Props는 Json 형태로 { key : value } 형태를 띕니다!

{function Friend({ name }) {
	return <h2>친구 : 내 이름은 {name}이야!</h2>;
}

이런 식으로도 사용할 수 있습니다. 가독성이 증가했죠?

결과 화면입니다!

Class Component

{import React from 'react';

class App extends React.Component {
	constructor() {
		super();
	}
	render() {
		return (
			<div>
				<h2>안녕 친구야!</h2>
				<Me name='맥북' />
			</div>
		);
	}
}

class Me extends React.Component {
	render() {
		const { name } = this.props;
		return <h2>내 이름은 {name}이야!</h2>;
	}
}

export default App;

클래스형 컴포넌트입니다! 와 클래스! 

React.Component를 상속 받아 생성합니다!

생명주기에 있어 함수형과는 다른 방식으로 접근할 수 있습니다!

Functional Component

props 항목의 예제에서 사용한 것이 Functional Component 입니다.

Class Component와 Functional Component 를 비교했을 때,

복잡한 Component는 클래스로, 간단한 Component는 함수형으로 라고 했었습니다.

하지만 Functional Component에 hooks api가 등장하며,

https://ko.reactjs.org/docs/hooks-intro.html

Class Component의 생명주기, 상태 변경, 이벤트 핸들링 등의 기능을 Functioanl Component에서도 사용할 수 있게 되었습니다!

 

차후에 조금씩 다뤄보도록 하죠!

 

아 맞다! 페이스북은 함수형을 더 선호하는 것 같네요 하핳!!

페이스북 Reactjs.org에서 참조

오늘도 열심히 하는 여러분이 멋있습니다!