리액트와 컴포넌트
리액트는 컴포넌트 기반으로 구성되어 있다. 앞에서 언급했듯이 <nav>나 <footer>처럼 반복적으로 사용되는 영역을 컴포넌트로 작성하면 코드를 재사용할 수 있어 효과적인 작업이 가능하다.
리액트의 컴포넌트에는 클래스 컴포넌트, 함수형 컴포넌트 두 가지 종류가 있다. 그럼 각 컴포넌트를 만드는 방법과 주요 특징을 알아보자.
클래스 컴포넌트
클래스 컴포넌트는 ES6에 도입된 class 문법을 사용한다. 클래스 컴포넌트를 생성하는 방법은 간단하다. 앞에서 봤던 것처럼 "class App extends Component"라고 입력하고 해당 컴포넌트 안에 구체적인 내용물을 작성하면 된다. 주의해야 될 점은 클래스 컴포넌트 안에는 반드시 render() 메서드가 필요하다. 그리고 return() 안에는 한 개의 자식만 반환된다.
App.js
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
보통 클래스 컴포넌트는 리액트 생명주기 API를 사용하거나 state로 값을 전달할 때, 그리고 컴포넌트 내에서 주요 기능(버튼 이벤트 등)을 구현할 때 사용 가능하다. ( 생명주기와 state 내용은 추후 자세히 살펴보도록 하겠다. )
함수형 컴포넌트
자바스크립트에서 함수를 만드는 방식으로 리액트 컴포넌트를 생성할 수 있다. 이를 함수형 컴포넌트라고 얘기한다. 위 코드를 함수형 컴포넌트로 변경을 하면 아래 코드처럼 변경이 가능하다. 본 예제 코드에서는 ES6 문법으로 함수를 생성했다. return() 안에는 클래스 컴포넌트와 동일하게 한 개의 자식만 반환된다.
App.js
const App = () => {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo"/>
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
)
};
리액트 생명주기 API를 사용하지 않고, state로 값을 전달하지 않으며, 컴포넌트 내에서 기능이 없는 순수한 뷰의 목적으로만 사용될 때는 함수형 컴포넌트로 만드는 것이 성능상 좋다.
컴포넌트의 매력
App.js 파일 안에 메뉴 버튼을 담고 있는 컴포넌트를 생성하여 코드를 다음과 같이 변경해 보자. ( 브런치 에디터는 개발 코드를 작성하는데 최적화되어있지 않아 이후부터는 스크린샷으로 대체하겠다. 언제쯤 베타는 끝날 것인가...? )
Nav 컴포넌트를 생성하고 해당 컴포넌트 안에는 메뉴 버튼을 만들 때 사용되는 HTML 태그들을 작성한다. ( 여기서 작성된 HTML 태그들은 JSX 문법으로 작성되어 있다. 이와 관련해서는 다음 장에서 자세히 알아보겠다. )
App 컴포넌트 안에 Nav 컴포넌트를 HTML 태그처럼 작성한다. 그럼 <ul>, <li>, <a> 태그가 적용된 결과가 출력된다. 이처럼 웹 서비스를 제작할 때는 특정 요소를 따로 분리하여 컴포넌트로 작업하고, 이를 합체 로봇처럼 조립해 나가는 방식으로 만든다면 보다 효율적으로 코드를 관리할 수 있다.
이와 같은 방식으로 Header 컴포넌트, Main 컴포넌트, Footer 컴포넌트 등을 만들 수 있다. 참고로 컴포넌트를 만들 때는 함수명과 구분하기 위해 첫 글자는 대문자로 작성한다.
그리고 다시 한번 강조하지만 함수형 & 클래스 컴포넌트의 return() 안에는 한 개의 자식만 존재한다는 것을 꼭 기억하자. 만약 복수의 자식이 있다면 에러가 발생한다.
클래스 & 함수형 컴포넌트 모두 하나의 자식만 존재해야 한다.구글 크롬 확장 프로그램
리액트로 작성되는 코드를 크롬 개발자 도구에서 확인하면 우리가 알고 있는 HTML 태그 형태로 출력된다. 만약 컴포넌트 구조로 보고 싶다면, 크롬 확장 프로그램인 "React Developer Tools"를 설치하면 된다.
설치를 마치면 개발자 도구에 React 탭이 생성이 되고, 해당 탭을 클릭하면 위에서 만든 컴포넌트 구조를 파악할 수 있다. 리액트 개발을 한다면 해당 플러그인은 필수에 가깝기 때문에 꼭 설치해 두자.
