안녕하세요 효그니입니다! 꽤나 빠르게 새 글을 올리네요! 하핳!
오늘은 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에서도 사용할 수 있게 되었습니다!
차후에 조금씩 다뤄보도록 하죠!
아 맞다! 페이스북은 함수형을 더 선호하는 것 같네요 하핳!!
오늘도 열심히 하는 여러분이 멋있습니다!
'JavaScript > React.js Lecture' 카테고리의 다른 글
6. React View, Component 반복, 조건부 랜더링 (0) | 2020.11.19 |
---|---|
5. React Router (0) | 2020.11.19 |
4. React 생명주기 (0) | 2020.11.16 |
3. React State (0) | 2020.11.16 |
1. React란? 그리고 CRA 설정 (0) | 2020.11.15 |