반응형
Component
- React로 만들어진 앱을 이루는 최소한의 단위로 화면에 출력되는 요소
- 자바스크립트 함수와 유사하며, UI를 재사용 가능한 개별적인 단위로 나누어 활용
- 컴포넌트는 데이터를 다루며 그 결과로 UI를 렌더링
- 데이터(props)를 입력 받아, View(State) 상태에 따라 DOM 노트를 출력, React 엘리먼트를 반환
- 기존의 웹프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었으나 컴포넌트는 MVC의 View를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 생성가능
- 컴포넌트는 자체 props를 수정하면 안됨
// [형식] 컴포넌트 생성
<컴포넌트 이름></컴포넌트 이름>
// [형식] 컴포넌트 출력
ReactDOM.render(컴포넌트, 컨테이너)
Component 종류
1. Function Component
- 컴포넌트 정의에 가장 간단한 사용방법은 Javascript 함수를 작성하는 것
- 클래스 컴포넌트에 비해 메모리 자원 절약
- State와 라이프 사이클 API 사용이 불가하나, v16.8이상부터 Hooks 기능이 도입되어 대체 가능
- 공식 api에서는 함수형 컴포넌트와 Hooks 사용을 권장
// 데이터를 가진 하나의 props 객체 인자를 받은 후 React 엘립먼트를 반환
function 컴포넌트명() {
return <dv></div
}
2. Class Component
- ES6 클래스를 사용하여 컴포넌트 정의
- state와 라이프 사이클 기능을 사용 할 수 있고, 임의 메서드 정의 가능
- render 함수가 반드시 있어야 하고, 그 안에서 보여줄 JSX를 반환해야 함
- component Import
class 컴포넌트명 extends React.Component {
render() {
return <div></div>
}
}
// [Component import 시 문법]
import { Component } from 'react'
class 컴포넌트명 extends Component {
render() {
return <div></div>
}
}
Component 작성 규칙
- 첫글자는 대문자로 시작 (React는 소문자로 시작하는 컴포넌트는 DOM 태그로 취급)
- 컴포넌트 생성 시 동사 단위로 나누어 주는게 좋다.
<div /> // HTML div 태그로 처리
<Welcome /> // 컴포넌트로 처리
Component 기본 사용방법
// [Exam]
<div id="root"></div>
<script type="text/babel">
// 컴포넌트, 컨테이너 생성
const component = <h1>리액트</h1>
const container = document.getElementById('root')
// 출력
ReactDOM.render(component, container)
</script>
컴포넌트 생성 순서
- 컴포넌트 파일 생성
- 코드 작성
- 모듈 Import/Export (App.js)
Component의 props 사용
- 모든 컴포넌트 는 자신의 props를 다를 떄 반드시 순수함수처럼 동작하도록 해야 함
// 순수 함수 : 입력값을 바꾸려 하지 않고 항상 동일한 일력에 대한 동일한 출력 반환
function pureFunc(a,b){
return a+b
}
// 입력값을 변경하는 함수는 수수 함수가 아님
function notPureFunc(a, b){
a.total -=b
}
기본 형태
const 함수명= ()=> {
const 변수선언
return (
<>
{* / HTML 표시 부분/ *}
</>
)
}
Component 렌더링
- 리액트 엘리먼트는 DOM 태그 이외에 사용자 정의 컴포넌틀 나타낼 수 있음
- 리액트가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 속성과 자식을 해당 컴포넌트에 단일 객체로 전달하는데 이 객체를 'props' 라고 함
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);
- <Welcome name="Sara" /> 엘리먼트로 root.render()를 호출합니다.
- React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출합니다.
- Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환합니다.
- React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트합니다.
Component 합성
- 컴포넌트는 자신의 출력에 다른 컴포넌트 참조 가능한데 이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미
- 리액트 앱에서는 버튼, 폼, 다이얼로그, 화면등의 모든 것을 컴포넌트로 표현
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// Welcome을 여러 번 렌더링하는 App 컴포넌트 생성
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
Component 추출
function formatDate(date) {
return date.toLocaleDateString();
}
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name} />
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
avatarUrl: 'http://placekitten.com/g/64/64'
}
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Comment
date={comment.date}
text={comment.text}
author={comment.author} />
);
key 활용
- 리액트의 배열 렌더링 시 변화된 위치를 알기 위해 key가 필요
- map함수 활용 시 고유 인자가 없을 경우 인덱스를 활용
const ArrayDup = () => {
const char = ['a', 'b', 'c'];
const charList = char.map((c, index) => <li key={index}>{c}</li>);
return <ul>{charList}</ul>;
};
export default ArrayDup;
Component Sources
- 기본 컴포넌트 생성 방식
// ----- [App.js]
const App = () => {
return <Korean />;
};
const Korean = () => {
return <h1>korean</h1>;
};
export default App;
- 구구단 계산
// ----- [App.js]
const App = () => {
return (
<>
<MulFor />
<MulMap />
<MulMap2 />
</>
);
};
// for문을 활용한 구구단 계산
const MulFor = () => {
const calc = () => {
const result = [];
for (let i = 2; i <= 9; i++) {
result.push(<h2>{i}단</h2>);
for (let j = 1; j <= 9; j++) {
result.push(
<p key={j}>
{i} * {j} = {i * j}
</p>
);
}
}
return result;
};
return calc();
};
// Map을 활용한 구구단
const MulMap = () => {
const numChar = '23456789';
const numList = [...numChar];
return (
<>
{numList.map(function (dan) {
return (
<>
<h2>{dan}</h2>
{calc2(dan)}
</>
);
})}
</>
);
};
const calc2 = (dan) => {
const numChar = '123456789';
const numList = [...numChar];
return (
<>
{numList.map((num) => (
<p>
{dan} * {num} = {dan * num}
</p>
))}
</>
);
};
// 중첨 Map 및 New Array 생성 사용
const MulMap2 = () => {
const numList1 = [...new Array(8)].map((_, i) => i + 2);
const numList2 = [...new Array(9)].map((_, i) => i + 1);
return (
<>
{numList1.map(function (dan) {
return (
<>
{numList2.map((num) => (
<p>
{dan} *{num} = {dan * num}
</p>
))}
</>
);
})}
</>
);
};
export default App;
반응형
'React' 카테고리의 다른 글
[React] React Props (1) | 2023.10.20 |
---|---|
[React] React Hook (0) | 2023.10.18 |
[React] React Element (0) | 2023.10.15 |
[React] React 기초 (0) | 2023.10.13 |
[React] JSX (0) | 2023.10.13 |