Component
리액트는 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 분리해서 생각해 볼 수 있게 해준다.
component 를 정의하는 방법은 이전 포스팅에서 설명했던 것과 같이 함수형과 클래스형이 있다.
주의: 컴포넌트의 이름은 항상 대문자로 시작
React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다. 예를 들어 <div />는 HTML div 태그를 나타내지만, <Welcome />은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 한다.
1) 함수형
function Welcome (){
return <h1>Happy Coding!</h1>
}
function App() {
return (
<div className="App">
<Welcome></Welcome> // 위의 웰컴함수의 내용 <h1>Happy Coding!</h1>이 나타남
</div>
);
}
2) 클래스형
class Subject extends Component {
render () {
return (
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
}
class TOC extends Component {
render () {
return (
<nav>
<ul>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ul>
</nav>
);
}
}
class Content extends Component {
render () {
return (
<article>
<h2>HTML</h2>
HTML is HyperText Markup Language.
</article>
);
}
}
class App extends Component {
render () {
return (
<div className="App">
<Subject></Subject> // 리액트가 위에 적어준 헤더 클래스 내용을 가져옴 => 결과 : <h1>WEB</h1> World wide web이 나타남
<TOC></TOC> // 리액트가 위에 적어준 TOC클래스 내용을 가져옴 => 결과 : HTML, CSS, JavaScript a link가 생김
<Content></Content> // 리액트가 위에 적어준 Content클래스 내용을 가져옴 => 결과 : <h2>HTML</h2> HTML is HyperText Markup Language.가 나타남
</div>
);
}
}
이렇게 함으로써 개발자는 컴포넌트 이름에만 집중하면 되기 때문에 코드의 복잡도가 현저하게 줄었다. 하지만 만약 클래스가 많고 같은 내용이 반복된다면.. 즉 자식클래스 급일때도 그 때마다 새로운 클래스를 선언하고 이름도 새로 지어줘야되나? 라는 생각이 든다.
Props
프로퍼티(properties)의 줄임말로 React에서 props는 사용자가 컴포넌트에 전달해서 보관하길 원하는 데이터이다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되는데, 이 props는 컴포넌트에서 사용하는 데이터의 변경이 불가능하다. 즉, 컴포넌트 내에서 데이터가 보관되면, 이 데이터는 수정되지 않고 보존되어야 한다.
1)함수형
function App() {
return (
<div className="App">
<Intro name="Yuni" subname="everyone"></Intro>
<Intro name="LiveCoding" subname="Thank you"></Intro>
<Welcome></Welcome>
</div>
);
}
function Intro (props) {
return <h2>Hello, {props.name} and {props.subname}.</h2>
}
function Welcome (){
return <h1>Happy Coding!</h1>
}
결과화면
2)클래스형
<div className="App">
<Subject title="WEB" sub="world wide web!"></Subject>
<Subject title="React" sub="For UI"></Subject>
<TOC></TOC>
<Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
<Welcome></Welcome>
<Intro name="yuni"></Intro> //여기서 subname을 설정하지 않으면 어떻게 될까?
</div>
);
}
}
class Intro extends Component {
render () {
return (
<h2>Hello, {this.props.name} and {this.props.subname}.</h2>
);
}
}
class Welcome extends Component {
render () {
return (
<h1>Happy Coding!</h1>
);
}
}
결과화면
props 렌더링 과정
- <Intro name="yuni" /> 엘리먼트로 ReactDOM.render()를 호출한다.
- React는 {name: 'yuni'}를 props로 하여 Intro 컴포넌트를 호출한다.
- Intro 컴포넌트는 결과적으로 <h1>Hello, yuni and {props.subname}.</h1> 엘리먼트를 반환한다.
- React DOM은 <h1>Hello, yuni and {props.subname}.</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트한다.
좋다. props를 이용하니까 클래스 이름을 매번 새로 정의해주고 코드를 새로 쓸 필요가 없다. 근데 그래도 클래스들이 많아지면 App.js에서 그 클래스를 유지보수 하는 것도 힘들 것 같다. 좀 더 쪼갤 수 있을까? 있다. 더 쪼개서 관리할 수 있다. 자바에서 썼던 방법과 굉장히 유사하다.
directory(=folder)이용해서 Component 파일로 분리하기
src에서 디렉토리를 생성한후 그 디렉토리에 해당 컴포넌트를 파일별로 정리해주면 된다. 위의 클래스형으로 예시를 들어보겠다. 사실 저 코드가 이미 반정도는 분리가 된 상황이긴 하다.
Intro, Welcome 클래스를 App.js에서 분리해 새로 생성한 디렉토리로 옮겨주기.
이렇게 생성해주고 아래와 같이 구성해주면 된다. 틀은 똑같다.
import { Component } from 'react';
class 내용
export default class이름;
1) Welcome.js
import { Component } from 'react';
class Welcome extends Component {
render () {
return (
<h1>Happy Coding!</h1>
);
}
}
export default Welcome;
2)Intro.js
import { Component } from 'react';
class Intro extends Component {
render () {
return (
<h2>Hello, {this.props.name} and {this.props.subname}.</h2>
);
}
}
export default Intro;
3) App.js
import { Component } from 'react';
import TOC from './components/TOC';
import Content from './components/Content';
import Subject from './components/Subject';
import Intro from './components/Intro';
import Welcome from './components/Welcome';
class App extends Component {
render () {
return (
<div className="App">
<Subject title="WEB" sub="world wide web!"></Subject>
<Subject title="React" sub="For UI"></Subject>
<TOC></TOC>
<Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
<Welcome></Welcome>
<Intro name="yuni"></Intro>
</div>
);
}
}
export default App;
이렇게나 깔끔해진 모습을 볼수가 있다. 주의해야할 것은 import를 해와야 쓸 수 있으므로 클래스 import 해주는 것 잊지말기!
번외)
Chrome 개발자 도구로 볼때 리액트의 컴포넌트들은 나오지 않고 그냥 html 태그로만 나와 불편했었는데.. React Developer Tools라는게 있었다. 사용하면 이렇게 컴포넌트를 볼 수 있다. 리액트는 배우면 배울수록 와.. 혁명이네.. 라는 감탄을 금치못함.
chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
참고
생활코딩 React 11-14
www.youtube.com/watch?v=FWVnIe_9-1w&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=14
ko.reactjs.org/docs/components-and-props.html
trustyoo86.github.io/react/2017/11/18/props-state-react.html
'Frontend > React' 카테고리의 다른 글
2. React의 구조 그리고 샘플 웹 앱 실행, 코딩, 배포 (0) | 2020.11.30 |
---|---|
1. React란? 앞으로 공부전략 그리고 React 설치하기 (0) | 2020.11.28 |