Component
사전적 정의
명사 (구성) 요소, 부품
React
React에서 구성 요소는 앱의 일부를 렌더링하는 재사용 가능한 모듈입니다. 이러한 부분은 크거나 작을 수 있지만 대개 명확하게 정의됩니다. 단일한 분명한 목적을 위해 사용됩니다.
예시
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
위의 Welcome Component는 name을 props로 받고 해당 이름과 함께 <h1>Hello, {props.name}</h1>을 나타낸다.
만약에 Component없는 상태에서 인사할 인원이 많고 매번 명단이 바뀐다면 어떻게 될까? 우리는 명단 하나하나를 보면서 <h1>Hello, {name}</h1>을 써야할 것이다. 따라서 이를 효율적으로 설계하기위해 Component를 사용하는 것이다.
Component의 정의를 연결해 설명하자면 사용자 Welcome Component를 설계하여 더 이상 명단을 확인할 필요없이 <Welcome>안에 name props를 넣어주면 끝이다. 위의 예시에서는 인원수가 적어 이름을 하나씩 집어 넣었지만 명단이 많을 경우 list변수로 명단을 만들고 map함수를 이용해 설계하면 될 일이다.
사용 조건
- 하나의 최상위 태그만 써야한다.
- 컴포넌트의 이름은 항상 대문자로 시작합니다.
- 컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있습니다.
props
React
props은 Component로 전달되는 모든 데이터입니다. props은 HTML attribute와 비슷합니다. props은 Component 호출 내에 작성되며, HTML attribute와 동일한 구문(prop="value")을 사용합니다.
사용 조건
- React에서 데이터 흐름은 단방향입니다. props은 상위 Component에서 하위 Component로만 전달할 수 있으며 읽기 전용입니다.
- 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.
출처
https://ko.reactjs.org/docs/components-and-props.html
'개발 공부 > React, React Redux' 카테고리의 다른 글
State (0) | 2021.06.21 |
---|---|
비동기 처리 (async, await) (0) | 2021.06.17 |
semantic UI 설치 실패 - Creating src/theme.config (LESS config) C:\Users\miladild\semantic\src\theme.config (0) | 2021.06.03 |
ReferenceError: primordials is not defined (0) | 2021.06.03 |