리액트로 작성된 화면은 component로 구성되어 있기 때문에, 해당 개념은 매우 중요하다.
이를 정확하게 알아보자.
✨ Component
React로 이루어진 앱을 이루는
최소한의 단위
기존의 웹 프레임워크는 MVC 방식으로 분리하여 관리하기에 각 요소의 의존성이 높았다.
때문에, 재활용성이 어렵다는 단점이 발생하였다.
하지만, Component가 등장한 이후로는 MVC의 뷰를 독립적으로 구성하는 것이 가능해졌다.
재사용이 가능하여 새로운 컴포넌트 또한 쉽게 만들 수 잇게 되었다.
따라서, Component는 데이터를 props로 입력받아, state 상태를 비교하여 DOM Node를 출력하는 함수이다.
특징
-
이름은 항상
대문자로 시작해야 한다.
리액트에서 소문자로 시작하는 component는 DOM태그로 취급하기 때문이다. -
UI를 구성할 때,
재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각별로 코딩하는 것이 바람직하다. -
props라고 하는 임의의 데이터를 입력 받은 후, 화면에 어떻게 표시되는지를 기술하는 React Element를 반환한다.
✨ Component의 종류
리액트에서 정의하고 있는 컴포넌트의 종류는 크게 클래스형과 함수형 컴포넌트 2가지로 나타낸다.
Class Component
컴포넌트 구성 요소, 리액트 생명 주기를 모두 포함하고 있다.
주로 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용한다.
예제 코드를 보자.
import React from 'react';
class MyComponent extends React.Component{
constructor(props){
super(props);
}
componentDidMount(){
}
render(){
return <div>My name is {this.props.name}</div>;
}
}
export default MyComponent;생성자 함수로 props를 생성하고, 상속받은 생명주기 함수를 사용할 수 있다.
클래스형 컴포넌트는 render( ) 함수를 통해 UI를 보여준다.
클래스 컴포넌트의 핵심은
class키워드와Component의 상속이 필요하며, 반드시render()함수가 사용되어야 한다는 것이다.
Stateless Functional Component
가장 간단하게 컴포넌트를 정의하는 방식으로 자바스크립트 함수를 작성한다.
주로 props에만 의존하는 UI를 렌더링하는데 선호되는 방식이다.
예제코드를 보자.
import React from 'react';
function MyComponent(props){
return <div>My name is {props.name}</div>;
}
export default MyComponent;마지막 export구문을 통해, 다른 파일에서 MyComponent를 import할 수 있도록 한다.
이 두가지 방식의 차이는 무엇일까?
Class vs Function
👉 일반적 차이
클래스형
- state, lifeCycle 관련 기능 사용이 가능하다.
- 메모리 자원을 함수형 컴포넌트보다 더 사용한다.
- 임의 메서드를 정의할 수 있다.
함수형
- state, lifeCycle 관련 기능 사용이 불가능하여 Hook을 사용해야 한다.
- 메모리 자원을 덜 사용한다.
- 컴포넌트 선언이 편하다
클래스 이후에 나온 것이 함수형이기에 코드적으로 편한 것은 사실이다. 하지만, 클래스 컴포넌트를 사용한 프로젝트가 여전히 많기에 우리는 유지보수를 위해서라면 알아야할 필요성이 존재한다.
👉 기능 : state 사용차이
여기서 state란 컴포넌트 내부에서 바뀔 수 있는 값을 말한다.
클래스형
- constructor 안에서 this.state로 초기 값을 설정할 수 있다.
constructor(props){
super(props);
this.state = {
name : "seohee",
age : 12,
};
}- constructor가 없다면, 바로 state 초기 값을 설정할 수 있다.
class MyComponent extends React.Component{
state = {
name : "seohee",
age : 12,
};
};- state는 객체 형식으로 작성해야 한다.
this.state = { name : "seohee", age : 12 };- this.setState()로 state의 값을 변경할 수 있다.
onClick = {()=>{
this.setState({ name : "SEOHEE"});
}};함수형
- useState( )로 state값을 사용/변경한다.
const [name, setName] = useState("seohee");- useState함수를 호출하면 배열이 반환된다.
이때, 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꾸어주는 함수를 인자로 갖는다.
👉 props 사용 차이
props는 component의 속성을 설정 할 때 사용하는 요소이며 오로지 읽기 전용이다.
때문에, 컴포넌트 자체 props를 수정해서는 안되며 모든 React component가 자신의 props를 다룰 때, 반드시순수함수처럼 작동해야 한다.
수정되는 것은 state라는 것을 잊지말자.
클래스형
- this.props로 값을 읽는다.
class Child extends React.Component{
render(){
const {name, age } = this.props;
return (
<div>
<div> NAME : { name }</div>
<div> AGE : { age }</div>
</div>
);
}
}- 부모 객체의 키 값을 지정하면, 자식이 props로 활용할 수 있다.
import Child from '/Child';
class Parent extends React.Component{
state = {
name : "seohee",
age : 12,
}
render(){
return(
<div>
<Child name={this.state.name} age={this.state.age}/>
</div>
)
}함수형
- props를 바로 호출할 수 있다.
const MyComponent = ({name, age}){
return(
<div>
<div> NAME : {name}</div>
<div> AGE : {age} </div>
</div>
);
};👉 이벤트 핸들링
클래스형
- 함수 선언시, 화살표 함수로 선언이 가능하며, 요소에 적용시키기 위해서는 this를 붙여야 한다.
class MyComponent extends React.Component{
state = {
name = '',
age = 0,
}
handleChange = e =>{
this.setState({name : e.target.value});
}
handleClick = () => {
this.setState({ name : ''});
}
render(){
return(
<div>
<input type="text" name="name" value={this.state.name} onChange={this.handleChange}/>
<button onClick ={this.handleClick}>확인</button>
</div>
)
}
}함수형
- const 키워드 + 함수 형태로 선언해야 하며, this가 필요없다.
function MyComponent(props){
let [name, setName ] = useState('');
const onChangeName = e => {
setName(e.target.value);
};
const onClick = () => {
setName('');
};
const onKeyPress = e => {
if(e.key === 'Enter'){
onClick();
}
};
return(
<div>
<input type="text" name="name" value={name} onChange={onChangeName} onKeyPress={onKeyPress}/>
<button onClick={onClick}>확인</button>
</div>
)
}📚 학습할 때, 참고한 자료 📚
