component
01_class-type-component
클래스형 컴포넌트
ES6에서 제공되는 클래스 문법을 이용해 랜더링될 컴포넌트를 정의하는 방법을 제공한다.
render() 함수는 반드시 작성되어야하며 반환 값으로는 랜더링될 리액트 엘리먼트를 정의한다.(일반적으로 JSX를 사용한다.)
중복되는 엘리먼트를 추상화해서 컴포넌트로 작성하고 재사용하는 것이 리액트가 추구하는 방향이다.
함수형 컴포넌트의 쪽이 문법적으로 더 간결하고 메모리도 덜 사용하기에 권장되는 방식이다.
하지만 유상태 컴포넌트 사용 및 라이프 사이클 기능, 임의의 메소드 정의 등은 클래스형 컴포넌트에서만 사용가능한 방식이다.
이러한 함수형 컴포넌트의 기능적 한계로 훅스(hooks)를 제공하고 있으며, 이 부분은 뒤에서 다루게 된다.
클래스형 컴포넌트는 React.Component 클래스를 상속받는다.
<div id="root"></div>
<script type="text/babel">
class Title extends React.Component {
render() {
return (
<h1>Class Component</h1>
);
}
}
ReactDOM.createRoot(document.getElementById('root')).render(<Title/>);
</script> 02_function-type-component
함수형 컴포넌트
함수의 반환 값으로 리액ㅇ트 엘리먼트만 정의해서 반환하면된다.(일반적으로 JSX를 사용한다.)
유의사항은 앞글자를 대문자로 정의해야한다는 것이다.
사용자 정의 엘리먼트를 이용할 시 과 같은 형식으로 사용하는데 앞글자가 소문자이면 HTML로 인식하게되고 존재하지 않는 HTML 태그 엘리먼트이기 때문에 에러가 발생한다.
<div id="root"></div>
<script type="text/babel">
function Title() {
return (
<h1>Function Component</h1>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Title/>);
</script>03_component-composition
컴포넌트 합성
컴포넌트는 자신의 출력에 다른 컴포넌트를 참조 할 수 있다.
컴포넌트는 재사용 가능한 크기로 작게 유지해야하며, 순수함수처럼 작성되어야한다.
<div id="root"></div>
<script type="text/babel">
const user = {
name: '홍길동',
age: 20,
phone: '010-1234-2354',
email: 'hong123@gmail.com'
};
function NameCard() {
return <h1>{user.name}</h1>
}
function AgeCard() {
return <h2 style={{color : 'oranged'}}>{user.age}</h2>
}
function PhoneCard() {
return <h2 style={{color : 'red'}}>{user.phone}</h2>
}
function EmailCard() {
return <h3 style={{backgroundColor: 'yellow'}}>{user.email}</h3>
}
function UserInfo(){
return (
<div style={{width: 300, border: '1px solid black'}}>
<NameCard/>
<AgeCard/>
<PhoneCard/>
<EmailCard/>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<UserInfo/>);
</script>