반응형
Component
- Component는 클래스형과 함수형이 있다.
- 생김새와 용도가 다른데, React가 발전을 거듭하며 이젠 생김새만 다르다고 봐도 무방하다.
- 리액트는 함수형 사용을 권장한다.
- 리액트는 레고이고, 컴포넌트는 레고의 블럭이라고 생각하면 쉽다.
Component란?
- 컴포넌트를 이해하고 잘 써먹으려면 웹 사이트를 잘 조각낼 줄 알아야 한다.
- Component는 웹 사이트의 조각이고, 우리는 이 조각을 모아서 웹사이트에 뿌려준다.
- 웹 사이트를 잘 조각낼 줄 아는 사람 = 리액트를 잘 쓰는 사람
아래와 같은 html이 있다.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
...
</header>
<div class="container">
<div id="image-banner">
...
</div>
<div id="contents-1">
...
</div>
</div>
<footer>
...
</footer>
</body>
</html>위는 아래와 같이 컴포넌트로 쪼갤 수 있다.
- <header/>
- <container/>
- <imagebanner/>
- <contents1/>
- <footer/>
즉, 이 웹 사이트는, 크게 <header/>, <container/>, <footer/> 세 개의 컴포넌트가 있고, <container/> 컴포넌트는, <imagebanner/>, <contents1/> 컴포넌트로 이루어져 있는 것이다.
State와 Props
- Component의 데이터 관리법.
State
- <header/> 컴포넌트를 예를 들겠다.
- 이 헤더에 들어갈 데이터는 로고 이미지 경로, 메뉴 이름(온라인, 오프라인, 기업교육, 내 강의실)이 있을 것이다.
- 이 데이터는 <container/>나 <footer/> 컴포넌트에서는 쓰지 않는다..
- state는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터.
- 생성도 수정도 오직 해당 컴포넌트 내에서만 이뤄진다 -> 생성도 수정도 자유롭다.
Props
- 이번엔 <container/> 컴포넌트를 예로 들겠다.
- <container> <imagebanner/> <contents1/> </container><container/> 컴포넌트는 두 개의 자식 컴포넌트를 가지고 있다.
- <container/> 컴포넌트만 <imangebanner/> 컴포넌트한테 필요한 이미지 경로를 가지고 있다고 가정.
(state로 가지고 있다고 가정)
- 이 때 <imagebanner/> 컴포넌트는 자신의 부모인 <container/>컴포넌트로부터 이미지 경로를 전달받아서 사용해야 한다.
- <container/>가 가지고 있는 이미지 경로를 <imagebanner/>에게 전달해주면, 이 이미지 경로가 <imagebanner/> 컴포넌트의 props가 됩니다.
- 위의 말은 부모 컴포넌트로부터 전달 받은 데이터를 props라고 한다.
- 그럼 부모 컴포넌트가 가지고 있는 데이터를 <imagebanner/> 컴포넌트가 추가 하거나 수정할 수 없다.
반응형
'리액트 (React) > React 기초' 카테고리의 다른 글
| Component - 클래스형 & state 넘겨주기 (0) | 2021.08.30 |
|---|---|
| Component - 함수형 (0) | 2021.08.30 |
| JSX 사용하기 (0) | 2021.08.30 |
| React 개발환경 설정 및 프로젝트 생성, 코딩 룰 (0) | 2021.08.26 |
댓글