what is component?
하나의 의미를 가진 독립적인 단위 모듈,
재사용할수 있는 범용성을 위해 개발된 소프트웨어 구성 요소,
잘 정의된 아키텍쳐 상에서 어떠한 기능을 수행하는 시스템의 독립적이면서 교체가능한 부품
컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음..
...
이정도가 인터넷에서 REACT COMPONENT를 검색하면 흔히 볼수 있는 정의이지만
개발공부를 시작한지 얼마 안된 나에게 저런 단어들은 너무 어렵지만
지금은 일단
컴포넌트란 자바스크립트의 변수처럼 많은 양의 데이터를 갖고있는 태그 정도로 이해하고 있다.
익숙해지면 더 이해가 가겠지..한다.
- 특징(출처)
그래도 특징들 정도는 체크하고 넘어가자
-
재사용할 수 있도록 이미 구현이 완료되어 있어야만 한다
-
해당 컴포넌트의 용도, 유형, 기술표준과 인터페이스등에 대한 정보들에 대해서 명세화 되어 있어야만 한다
-
교체가능한 컴포넌트를 개발하기 위해서는 표준을 준수하여 개발해야 한다
-
컴포넌트가 개발되어 배포될 때 관련 문서와 코드들이 독립적인 단위로 패키지화되어 있어야만 한다
-
컴포넌트는 독립적인 업무단위로 개발된 것이므로 사용자가 필요한 기능만을 패키지한 컴포넌트를 재사용할 수 있도록 독립적으로 배포 가능해야만 한다
함수 컴포넌트, 클래스 컴포넌트
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
그런데 "나는 뭐가 컴포넌트라는거지?" 라는 의문이 있었다.
위의것을 함수 컴포넌트,
아래것을 클래스 컴포넌트라 한다.
저 하나하나가 컴포넌트 였었다... 두개다 동일한 컴포넌트이다. what is props?
props설명을위해 HTML 태그부터 먼저 설명하자면
<div><a href=""></div>
// a는 태그의 이름이고 href="" 는 태그의 속성이다props는 attribute와 동일한 뜻을 갖고있다.
둘다 속성이란 뜻인데, 용어상의 충돌때문에
html에선 attribute, react에선 props라고 한다
마치 class가 className 이 된것처럼..
react에서 component의 태그에 props을 부여해준다
=> 태그에 속성을 추가해서 사용하겠다
=> 그렇게 속성을 부여해서 편리하게 사용할거다
=> 결론은 props는 마치 CSS의 class를 통해 한꺼번에 효과를 준것처럼 사용하겠다 이말인거 같다.
const element = <div /> //이전에 설명했듯이 이런식으로 태그를 변수에 할당해줬는데
const element = <Welcome name="Sara" />; //태그대신 함수를 넣어준다?가 맞는거 같다
이렇게 태그 자체를 내 마음대로 정의할수 있다는 것을 공식문서에서는
"React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있습니다."
엘리먼트는 저 const element일테고,
사용자 정의 컴포넌트는 <welcome name="sara"/>이 부분일것이다.
결론
- component와 props는 효율적으로 사용하기위해 바늘과 실같은 존재이다
마치 CSS를 통해 효율적으로 효과를 주려고하는데 class를통해 한번에 일괄적으로 적용할수 있는
그런!
아직 사용해보진 않아 사용법에 대해 낯설지만 이것도 차차 익숙해지겠지 싶다.
