아래 내용은 생활코딩님 강의를 듣고 이해한 내용을 기반으로 작성하였습니다.
React에서는 다음과 같은 방식으로 컴포넌트를 정의합니다.
import { Component } from 'react'
class Comp1(컴포넌트명) extends Component {
render() {
return(
//최상위 container안에 들어있는 html 작성
<div class="greeting">
Hello!!
</div>
);
}
}
위의 코드는 정확히 말하자면 html도, javascript도 아닙니다. React를 만든 페이스북이 개발한 jsx라는 구문 확장 문법입니다.
컴포넌트의 첫 글자는 대문자이어야 하는데, 이를 소문자로 한다면 React는 컴포넌트를 HTML태그로 착각할 가능성이 높기 때문입니다.
위와 같이 정의한다면 create-react-app에서 만든 App
클래스에서 컴포넌트들을 보기쉽게 사용할 수 있습니다.
class App extends Component {
render() {
return (
<div className="App">
<Comp1></Comp1>
<Comp2></Comp2>
</div>
);
}
}
React 공식 문서에서는 props(properties, 특징)
를 Arbitrary Input
이라고 말합니다.
위의 코드들을 props를 이용하도록 변형시켜 보자면
import { Component } from 'react'
class Comp1(컴포넌트명) extends Component {
render() {
return(
//최상위 container안에 들어있는 html 작성
<div class="greeting">
Hello!! {this.props.name}
</div>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Comp1 name="JW"></Comp1>
<Comp2></Comp2>
</div>
);
}
}
즉, html의 속성처럼 컴포넌트를 사용할 때 props로 무언가를 정의해준다면 해당 컴포넌트에서 this.props.props이름
을 통해 받아와서 사용할 수 있게 됩니다.
즉, 컴포넌트의 재사용성을 늘리기 위해 리팩토링을 한 것입니다.
React는 어떤 props에 어떤 형태가 와야하는지 알 수 없습니다. 따라서 문법에만 맞다면 에러를 출력하지 않습니다. 그래서 예를들어 특정 props에 대해 문자열을 받고싶다, 숫자를 받고싶다고 지정하려면 propTypes를 사용하면 됩니다.
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
함수명.propTypes = {
prop명: PropTypes.string
prop명: PropTypes.number
}
PropTypes로 사용할 수 있는 종류는 React 공식 문서에서 확인할 수 있습니다.
크롬 확장자 중 React Developer Tools를 통해 html로 분리된 elements가 아니라 components로 분리된 웹페이지를 확인할 수 있습니다.
오른쪽에는 각 컴포넌트의 props도 확인할 수 있습니다.
참고
JSX: https://reactjs.org/docs/introducing-jsx.html
PropTypes: https://reactjs.org/docs/typechecking-with-proptypes.html
Dev Tools: https://reactjs.org/tutorial/tutorial.html#developer-tools