컴포넌트의 기능은 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것은 물론이고, 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여 줄 수 있다.
3.1 클래스형 컴포넌트
컴포넌트를 선언하는 방식은 두 가지이다. 하나는 함수형 컴포넌트이며, 다른 하나는 클래스형 컴포넌트이다. 아래의 코드는 클래스형 컴포넌트이다. 클래스형 컴포넌트가 어떻게 이루어졌는지 살펴보자
import React, {Component} form 'react';
class App extends Component {
render() {
const name = 'react';
return <div className="react">{name}</div>
}
}
export default App;2장에서 보았던 함수형 컴포넌트에서 클래스형 컴포넌트로 바꿔준 코드이며 역할은 기존과 동일하다. 함수형과 클래스형의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 점과 임의 메서드를 정의할 수 있다는 것이다.
💡 es6의 클래스 문법
es6 이전에는 자바스크립트에 class가 없었다. 개념 자체는 있지만 대신 prototype이라는 문법을 사용해 다음과 같이 작업해야했다.
function Dog(name){
this.name = name;
}
Dog.prototype.say = function() {
console.log(this.name + ': 멍멍');
}
var dog = new Dog('검둥이');
dog.say(); // 검둥이: 멍멍
//es6 문법부터는 class를 사용하여 다음과 같이 작성할 수 있다.
class Dog {
constructor(name){
this.name = name;
}
say(){
console.log(this.name + ': 멍멍');
}
}
const dog = new Dog('흰둥이');
dog.say(); // 흰둥이: 멍멍클래스형 컴포넌트에서는 render 함수가 필수이며, 그 안에서 보여 주어야 할 JSX를 반환해야한다.
컴포넌트를 선언할 수 있는 두 가지 방법 중 어느 상황에서 함수형을 사용해야할까?
함수형의 장점
1. 클래스형 컴포넌트보다 선언하기가 편하다.
2. 메모리 자원을 클래스형 컴포넌트보다 덜 사용한다.
3. 프로젝트를 완성해 빌드한 후 배포할 때도 함수형의 파일 크기가 더 작다.(이 부분은 너무 중요하게 여기지 않아도 된다.)
함수형의 단점
1. state와 라이프사이클 API의 사용이 불가능하다.
함수형의 단점으로 언급한 내용은 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었다. 완전히 클래스형 컴포넌트와 똑같이 사용할 수 있진 않지만 비슷하게 작업을 할 수 있게 되었다.
리액트 공식 매뉴얼에서도 함수형 + Hooks를 사용하도록 권장하지만 클래스형 컴포넌트가 사라지는 것은 아니므로 둘의 기능을 꼭 알아두어야한다.
3.2 첫 컴포넌트 생성
컴포넌트는 다음과 같은 순으로 만들어진다
파일 만들기 > 코드 작성하기 > 모듈 내보내기 및 불러오기
3.2.1 src 디렉터리에 MyComponent.js 파일 생성
컴포넌트를 만드려면 컴포넌트 코드를 선언해야 한다. 컴포넌트 코드를 선언할 파일의 이름을 MyComponent.js라고 입력하자
3.2.2 코드 작성하기
MyComponent.js 파일을 열고 새 컴포넌트의 코드를 작성해 보자. 먼저 함수형 컴포넌트로 작성하고, 나중에 클래스형 컴포넌트로 작성하겠다.
import React from 'react';
const MyComponent = () => {
return <div>내 컴포넌트 </div>
};
export default MyComponent;function 대신 () => {}를 사용해서 함수를 만들어 주었는데, es6에서 도입된 화살표 함수 문법이다.
💡 es6의 화살표 함수
화살표 함수(arrow function)는 es6 문법에서 함수를 표현하는 새로운 방식이다. 이 문법은 주로 함수를 파라미터로 전달할 때 유용하다.
setTimeout(function(){
console.log('hello world');
}, 1000);
setTimeout(() => {
console.log('hello world')
}), 1000);
//이 문법은 기존 function을 대체할 수 없는 이유는 용도가 다르기 때문이며, this의 값도 다르다.
function BlackDog(){
this.name = '흰둥이';
return {
name: '검둥이',
bark: function(){
console.log(this.name + ': 멍멍!');
}
}
}
const blackDog = new BlackDog();
blackDog.bark(); // 검둥이: 멍멍!
function WhiteDog(){
this.name = '흰둥이';
return {
name: '검둥이',
bark: () => {
console.log(this.name + ': 멍멍!');
}
}
}
const whiteDog = new WhiteDog();
whiteDog.bark(); // 흰둥이: 멍멍!
// function()을 사용했을 때는 검둥이고, () =>를 사용했을 때는 흰둥이이다.
// 일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가르킨다.
///화살표 함수는 값을 연산하여 바로 반환해야 할 때 사용하면 가독성을 높일 수 있다.
function twice(value){
return value * 2;
}
const triple = (value) => value * 3;
//따로 {}를 열어 주지 않으면 연산한 값 그대로 반환한다는 뜻함수형 컴포넌트를 선언할 때 function과 화살표 함수 문법을 사용하는건 크게 차이가 없으므로 화살표 함수를 사용하는것도 나쁘지않다.
3.2.3 모듈 내보내기 및 불러오기
3.2.3.1 모듈 내보내기(export)
//맨 밑의 코드이다.
export default MyComponent;이 코드는 다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정한다.
3.2.3.2 모듈 불러오기(import)
App 컴포넌트에서 MyComponent 컴포넌트를 불러와서 사용해보자
import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent />;
};
export default App;
위의 코드에서 import 구문을 사용하는 두 번째 줄은 우리가 만든 MyComponent를 불러온다. 코드를 저장하고 브라우저에서 렌더링이 됐는지 확인해보자
3.3 props
props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(지금은 App 컴포넌트가 부모 컴포넌트)에서 설정할 수 있다.
3.3.1 JSX 내부에서 props 렌더링
MyComponent 컴포넌트를 수정해 해당 컴포넌트에서 name이라는 props를 렌더링 하도록 설정하자. props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다. props를 렌더링할 때 JSX 내부에서 {} 기호로 감싸주면 된다.
import React from 'react';
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>
}
export default MyComponent;3.3.2 컴포넌트를 사용할 때 props 값 지정하기
App 컴포넌트에서 MyComponent의 props 값을 지정해 보자
//App.js이다
import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent name="React" />;
};
export defalut App;
3.3.3 props 기본값 설정: defaultProps
name 값을 지우고 다시 저장해보자
내일 다시..😊
