<React>
React: JavaScript Library For Building User Interfaces
Component: 사용자가 정의한 태그 (사용자가 만든 태그)
→ props를 input으로 하고 react element를 output으로 하는 함수
→ component를 작성하면,
1) 가독성을 획기적으로 높일 수 있다. (복잡한 코드를 태그만을 명시하는 것을 통해 숨길 수 있다.)
2) 한 번 정의해놓으면 여러 곳에서 재사용할 수 있다.
3) 유지보수가 쉽다. (component를 수정하면 사용하는 모든 곳에서 수정사항이 자동으로 업데이트된다.)
<component>
- 그냥 html으로 작성한다면 위와 같이 코드가 길게 늘어져 있을 것이다.
예시에서는 코드가 짧으니까 괜찮은데 코드가 많이 길어진다고 생각하면 내용을 보기도 어렵고 복잡할 것이다.
→ component를 사용해 수납상자에 정리하고 이름만 써서 코드의 내용을 불러온다고 생각하자.
- component는 정리 정돈의 도구로 생각
- 수납 상자에 물건들을 넣어 우리 눈에 보이지 않도록 하고 이름을 붙여 구분한다.
ex) <Subject></Subject>, <TOC></TOC>, <Content></Content>
- 복잡도를 획기적으로 낮출 수 있다.
- component의 이름은 대문자로 시작해야 한다.
- 해당 코드를 각각 Subject, TOC, Content라는 이름의 component에 넣어 정리하고
App class에는 우리 눈에 코드가 안 보이게 이름(<Subject></Subject>, <TOC></TOC>, <Content></Content>)
만 써준 상태다.
cf) component 만들기
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
<TOC></TOC>
<Content></Content>
</div>
);
}
}- Component라고 하는 react가 가지고 있는 class를 상속해서 새로운 class인 App이라는 class를 만든다.
- App이라는 class는 render()라는 메소드를 가지고 있다.
- component를 만들 때 반드시 단 하나의 최상위 태그로 시작해야 한다. (ex. <div className="App">)
<props>
<Subject></Subject>
- 위와 같이 쓰면 계속 같은 내용이 반복된다.("Web"과 "world wide web"을 출력)
- 코드의 내용을 조금씩 바꿔서 출력할 수는 없을까?
→ props(속성) 사용
ex1) props 사용
class Subject extends Component {
render(){
return (
<header>
<h1>{this.props.title}</h1>
{this.props.sub}
</header>
);
}
}
<Subject title="WEB" sub="world wide web!"></Subject>- Web 자리는 {this.props.title}, world wide web 자리는 {this.props.sub}로 변경 (중괄호 사용)
- 아래 <Subject> 불러올 때 원하는 속성값 부여
ex. <Subject title="WEB" sub="world wide web!"></Subject>
<Subject title="React" sub="for UI"></Subject>
ex2) props 사용
class Content extends Component{
render(){
return (
<article>
<h2>{this.props.title}</h2>
{this.props.desc}
</article>
);
}
}
<Content title="HTML" desc="HTML is HyperText Markup Language."></Content>- {this.props.title}, {this.props.desc}로 변경
- 아래 title값과 desc값 원하는 대로 부여
<Component를 별개의 파일로 분리하기>
- 만약 하나의 파일 안에 1000개의 component가 있다면
(1) 파일이 너무 복잡하고
(2) 다른 파일들에서는 이 파일 안에 있느 component를 가져다 쓰기가 어렵다.
→ 각각의 component를 별도의 파일들로 쪼갠다.
App.js에서는 component 부분을 제거해도 된다. (외부의 파일에서 불러올 수 있기 때문)
- import문으로 어느 파일에서 component를 불러왔는지 명시해준다.
ex) import TOC from "./components/TOC";
- export문으로 외부에서도 이 component를 사용할 수 있도록 명시해준다.
ex) export default TOC;
