Component
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. - from React Docs
컴포넌트란 무엇일까? 다시 사용할 수 있고, 서로 독립적이고, 쪼개질 수 있는 UI
우리가 Javascript를 할때, 특히 인스타그램을 만들때 메인 페이지를 만들고 있다면, 그 각각의 항목들
위에 올라가는 메뉴. 실시간 피드들. 스토리들. 추천들 모두 하나의 html에서 하드코딩을 했어야 합니다.
간단한 페이지라면 그렇게 하드 코딩을 해도 괜찮은 수준이라고 하지만 만약 우리가 수만명의 사용자들을 가지고 있고 그들이 게시물을 업로드 한다면....?
우리가 어떤 사이트를 만드는데 수많은 게시판과 섹션들을 만들어야 한다면요?
정말 상상도 하기 힘듭니다.
우리가 컴포넌트를 만들면, 그 컴포넌트를 가지고 메인페이지에도 넣을 수 있고, 로그인 페이지에도 넣을 수 있고. 만약 그 컴포넌트만 따로 바꾸고 싶다면 그것 또한 가능합니다.
컴포넌트는 함수처럼 독립적이며 재사용이 가능합니다. input을 받고 return을 할 수 있습니다.
여기서 중요한 단어가 등장하는데요, React 컴포넌트에서 input 을 props
return은 화면에 보여지는 React 요소 입니다.
컴포넌트 만들기
리액트에서는 컴포넌트를 만드는 방법은 두 가지. 함수로 만드는 것, Class로 만드는 것이 있습니다.
함수로 만들어봅시다.
리액트왈, 컴포넌트를 정의하는 가장 간단한 방법은 자바스크립트 함수처럼 쓰는 것이라네요.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}