Minwoo Dev.
[React] 컴포넌트 (Components) 본문
728x90
반응형
SMALL
컴포넌트란 ?
사용자 정의 태그를 의미한다.
컴포넌트 사용의 장점
- 코드 양의 간소화
- 같은 기능의 재사용으로 인한 효율성 증가
<html>
<header>
<h1><a href="/">web</a></h1>
</header>
</html>
위와 같은 html 태그에서, header 부분을 우리가 임의로 함수처럼 정의하여 사용하고 싶을 때, 우리는 컴포넌트를 생성한다.
function Header(props) {
return (
<header>
<h1><a href="/">{props.title}</a></h1>
</header>
);
}
위와 같이 Header라는 컴포넌트를 만들었고, return 값으로 우리가 묶고 싶은 태그들을 넣었다.
이로써 우리는 Header라는 태그만 작성하면 3줄의 태그들이 담긴 코드를 사용할 수 있는 것이다.
위와 같이 사용자가 정의하여 코드들을 기능별로 묶어둔 것을 컴포넌트(Components)라고 한다.
강의들에서 다들 복잡하게 설명하여 어렵게 느껴졌는데, 일반적인 프로그래밍 언어의 "함수(function)"을 사용하는 이유와 비슷한 목적이라고 생각하면 쉬울 거 같다.
컴포넌트를 생성할 때 주의할 점
- 컴포넌트 이름의 첫 글자는 대문자로 설정한다.
- App 컴포넌트 내부가 아닌 외부에서 생성해야한다.
728x90
반응형
LIST
'React' 카테고리의 다른 글
| [React] Props (0) | 2024.02.12 |
|---|
'React' Related Articles
more
