컴포넌트란 ?
리액트는 컴포넌트 기반의 구조이다.
리액트 공식 문서에 따르면
컴포넌트는 UI를 독립적이고 개별적으로 관리할 수 있는
재사용 가능한 조각으로 나누어 준다고 설명한다.
Components let you split the UI
into independent, reusable pieces, and think about each piece in isolation.
컴포넌트의 개념을 쉽게 생각한다면
웹페이지의 메뉴바, 버튼, 모달 창 같은 UI 요소들이
레고 한 블록, 부품과 같이 구조화한 것으로 간주할 수 있다.
컴포넌트 구조의 경우 유지 보수가 편리하다.
예를 들어 아래와 같은 html의 코드가 있다고 가정하자.
<header>, <section>, <footer>를 구성하는 많은 코드들이 내부에 존재할 텐데
더 많은 섹션을 가지게 된다면 이것들을 한 번에 관리하기란 복잡할 수밖에 없다 ㅠㅠ
<body>
<header>
<!-- header 코드 -->
<header>
<section>
<!-- section 코드 -->
</section>
<footer>
<!-- footer 코드 -->
</footer>
</body>
하지만,
컴포넌트 구조를 사용하게 되면
이런 코드들을 개별적으로 분리하여 관리하는 것이 가능하다.
function App() {
return (
<div className="APP">
<header></header>
<section></section>
<footer></footer>
<!-- 실제는 기존의 html 태그가 아닌 직접 정의한 이름으로 컴포넌트를 사용! -->
</div>
);
}
또한 리액트 공식 문서에서는 컴포넌트를 자바스크립트 함수에 비유하는데
Conceptually, components are like JavaScript functions.
They accept arbitrary inputs (called “props”)
and return React elements describing what should appear on the screen.
매개변수(parameter)를 가지는 plus 함수가 A와 B라는 인자(argument)를 받아 그에 따른 결과를 반환하듯
컴포넌트 또한 props라고 불리는 인풋을 받아 결과를 리턴하고 화면에 표시해주는 기능을 하기 때문이다.
이렇듯 큰 틀은 유지한 채 props에 따라 상황에 맞는 개별적인 내용을 표시할 수 있어
결론적으로 코드의 재사용성을 높여주기 때문에 경제적이고 효율적인 코드 사용이 가능하다.!!
🥲
이해한 바에 따르면 이렇게 정리할 수 있을 것 같다,,,,!!!!! 다음
컴포넌트 선언
컴포넌트로 사용하기 위해서는 선언 과정이 필요하다.
리액트에서 컴포넌트를 선언할 수 있는 방식은
클래스 형식과 함수 형식 두 가지가 있는데 선언 형식이 조금씩 다르다.
클래스 컴포넌트
함수 컴포넌트
같은 이름의 Welcom이라는 컴포넌트를 선언해도
클래스형 컴포넌트의 경우,
class 컴포넌트 명 extends React.Component { 를 적어준 뒤,
reder() 함수 { 내부에 return을 작성해주어야 한다.
+)
찾아보니 함수형 컴포넌트가 클래스형 컴포넌트의 장단점을
잘 설명해주시는 글들이 많았다 참고하자,,!
컴포넌트 예제
위의 <h3> 태그로 문자열을 적어내는 Welcome이라는 컴포넌트를 사용해보자.
사용법은 html 태그와 비슷하게 사용한다.. (사용자 정의 태그 너낌!)
이렇게 👇🏻
function App() {
return (
<div className="App">
<Welcome name="Kim" age="11"></Welcome>
<Welcome name="Choi" age="12"></Welcome>
<Welcome name="Lim" age="13"></Welcome>
</div>
);
}
여기서 name과 age가 props이며
Welcome의 경우 {props.name}을 이용해
Hello, Kim
Hello, Choi
Hello, Lim
이렇게 화면에 리턴하게 된다!!
이후 다른 포스팅에서 조금 더 자세히 알아보자!
Components and Props – React
A JavaScript library for building user interfaces
reactjs.org
⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :) ⚠️
*** 혹시라도 잘못된 정보가 있다면 언제든지 알려주시면 감사하겠습니다 ! ***
'JS > React' 카테고리의 다른 글
| [React] #6 리액트에서 Element 생성하기 : createElement() (0) | 2021.08.28 |
|---|---|
| [React] 리액트 : #5 props와 state의 차이점 ? (0) | 2021.08.24 |
| [React] 리액트 : #4 싱글 페이지 어플리케이션(SPA) (0) | 2021.08.12 |
| [React] 리액트 : #2 npm (node package manager) (0) | 2021.08.04 |
| [React] 리액트 : #1 React ? (0) | 2021.07.27 |