3. 컴포넌트
리액트를 사용하여 애플리케이션의 인터페이스를 설계 할 때 사용자가 보는 요소는 여러 가지 컴포넌트로 구성되어 있다. 컴포넌트의 기능은 단순한 템플릿 이상이다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 것은 물론이고, 라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메소드를 만들어 특별한 기능을 붙여 줄 수 있다.
👀라이프사이클API?
**컴포넌트가 브라우저 상에서 나타나거나, 업데이트되거나, 사라지는 과정에서 어떠한 작업을 하고 싶을 때
LifeCycleAPI를 사용한다. 자세한 내용은 이 뒤로 포스팅하는 과정에서 기록할 예정이다😃3-1. 클래스형 컴포넌트
컴포넌트를 선언하는 방식에는 두 가지가 있다. 하나는 함수컴포넌트, 그리고 또 하나는 클래스형 컴포넌트가 있다. 클래스형 컴포넌트는 아래와 같이 생겼다.
import React, { Component } from 'react';
class App extends Components {
render() {
const name = 'react';
return <div className="react">{name}</div>;
}
}
export default App;클래스형 컴포넌트에서는 render함수가 꼭 있어야 하고, 그 안에서 보여줘야할 JSX를 반환해야 한다.
👀클래스형 컴포넌트?
**클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수
있다는 장점이 있다.👀함수 컴포넌트?
**함수 컴포넌트는 클래스형 컴포넌트보다 가볍고 선언하기가 편하다는 장점이 있지만, state와 라이프사이클 API
사용이 불가능 하다는 단점이 있다. 하지만 이 단점은 리액트 버전 업데이트 이후 Hooks라는 기능이 도입되면서
해결되었다. 클래스형 컴포넌트와 완전이 똑같은것은 아디지만 조금 다른 방식으로 비슷하게 작업할 수 있다.리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성 할 때 함수컴포넌트와 Hooks를 사용하도록 권장하고 있지만 클래스형 컴포넌트가 사라지는 것은 아니므로 클래스형 컴포넌트의 기능도 알아두자.
1. 모듈 내보내기와 불러오기
1-1. 모듈 내보내기(export)
export default MyComponent;위 코드는 다른 파일에서 이 파일을 import할 때, MyComponent 클래스를 불러오도록 설정한다.
1-2. 모듈 불러오기(import)
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent />;
};
export default App;3-2. props
props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. 클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 조회하면 된다.
import React, { Component } from 'react';
import PropsTypes from 'prop-types';
class MyComponent extends Component {
render() {
const { name, children } = this.props //비구조화 할당
return (
<div>
안녕하세요 제 이름은 {name}입니다.
children 값은 {children}입니다.
</div>
)
}
}
MyComponent.defaultProps = {
//name props에 값이 없을 때 설정하는 기본 값
name: '기본 이름'
};
MyComponent.propTypes = {
//컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용하는 방법, 사용시 위와같이
//prop-types를 import해놔야 한다
name: PropTypes.string
}
3-3. state
리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 한다.
리액트에는 두 가지 종류의 state가 있다. 하나는 클래스형 컴포넌트의 state이고, 다른 하나는 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state이다.
1. 클래스형 컴포넌트의 state
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
//state의 초기값 설정
this.state = {
number: 0
};
}
render() {
const { number } = this.state;
return (
<div>
<h1>{number}</h1>
<button
onClick={() => {
//this.setState를 사용하여 state에 새로운 값을 넣을 수 있다.
this.setState({ number: number + 1 });
}}
>
+1
</button>
</div>
)
}
}
export default Counter;클래스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해 주어야 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출해준다. 그리고 컴포넌트의 state는 객체 형식 이어야 한다. 또한 this.setState 함수는 인자로 전달된 객체 안에 들어 있는 값만 바꾸어준다.
👀state를 constructor에서 꺼내기?
import React, { Component } from 'react';
class Counter extends Component {
state = {
number: 0,
}
render() {
const { number } = this.state;
return (
<div>
<h1>{number}</h1>
<button
onClick={() => {
//this.setState를 사용하여 state에 새로운 값을 넣을 수 있다.
this.setState({ number: number + 1 });
}}
>
+1
</button>
</div>
)
}
}
export default Counter;위와같이 constructor 메서드를 선언하지 않고도 state초기값을 설정할 수 있다. 그리고 setState를 사용하여 값을 업데이트 하고 난 다음에 특정 작업을 하고싶을 때에는 setState의 두 번째 파라미터로 콜백 함수를 넣어주면된다.
import React, { Component } from 'react';
class Counter extends Component {
state = {
number: 0,
}
render() {
const { number } = this.state;
return (
<div>
<h1>{number}</h1>
<button
onClick={() => {
this.setState(
{ number: number + 1 },
() => {console.log('setState가 호출되었습니다.');}
);
}}
>
+1
</button>
</div>
)
}
}
export default Counter;2. 함수형 컴포넌트의 useState
import React, { useState } from 'react';
const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('안녕하세요');
const onClickLeave = () => setMessage('안녕히 가세요');
return (
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>퇴장</button>
<h1>{message}</h1>
</div>
)
};
export default Say;useState 함수의 인자에는 상태의 초기값을 넣어준다. 클래스형 컴포넌트에서는 state의 초기값은 객체형태여야 하지만 useState에서는 객체가 아니어도 상관없다. 값의 형태는 숫자, 문자, 객체, 배열과같이 자유롭다. 그리고 배열의 첫 번째 원소는 현재 상태이고, 두 번째 원소는 상태를 바꾸어 주는 함수를 뜻한다. 이 함수를 세터함수라고 부른다. 이름은 위와같이 배열 비구조화 할당을 통해 자유롭게 정할수 있다.
3-4. 주의사항과 정리
어떤 컴포넌트를 사용하든 state 값을 바꾸어야 할 때는 setState 혹은 useState를 통해 전달받은 세터 함수를 사용해야 한다.
props와 state는 둘 다 컴포넌트에서 아용하거나 렌더링할 데이터를 담고 있으므로 비슷해 보일 수 있지만 역할은 매우 다르다. props는 부모 컴포넌트가 설정하고, state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 없데이트할 수 있다는 것이다.
리액트를 다루는 기술을 읽고 요약한 글 입니다😊
