함수형 컴포넌트와 클래스 컴포넌트 리마인드

목차

· 왜 함수형 컴포넌트를 선호할까?

· 컴포넌트 목적에 따른 종류 (컨테이너 컴포넌트, 프레젠테이셔널 컴포넌트)

· 컴포넌트의 차이 (State, Props, 이벤트 핸들링)

· Life Cycle

---

현재 리액트 공식문서에서는 함수형 컴포넌트와 훅(hook)을 함께 사용하는 것을 권장하고 있다. 

왜 함수형 컴포넌트를 선호할까?

요즘은 많은 개발자들이 클래스형 컴포넌트보다 함수형 컴포넌트 + Hook을 사용한다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에, 상대적으로 복잡한 UI 로직을 갖고 있는 반면 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점이 있어 함수형 컴포넌트 + Hook을 주로 사용한다고 한다.

 

클래스형 컴포넌트는 로직과 상태롤 컴포넌트 내에서 구현하기 때문에 stateful이라고 불리며, 상대적으로 복잡한 UI 로직을 가지고 있다. 반면 함수형 컴포넌트는 state를 사용하지 않고 단순하게 props를 통해 데이터를 받아 UI에 뿌려주기 때문에 stateless라고 불린다.

 

컴포넌트는 단순한 템플릿 이상의 기능을 수행한다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들을 수행할 수 있다.

 

컴포넌트 목적에 따라 프레젠테이셔널(Presentational) 컴포넌트와 컨테이너(Container) 컴포넌트로 나누기도 한다.

컴포넌트 목적에 따른 종류

· 프레젠테이셔널 컴포넌트

· View 만을 담당하는 컴포넌트이다. (UI를 작성하는 컴포넌트)

· 이 컴포넌트 안에서는 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 둘 다 사용할 수 있다.

· Redux Store에 직접적으로 접근하지 않고 props로만 데이터, 함수를 가져온다.

· 순수한 컴포넌트로 state를 사용하지 않으며 state가 있을 경우 데이터가 아닌 UI에 대한 state여야한다.

· 주로 함수형 컴포넌트로 작성된다.

· 컴테이너 컴포넌트

· 다른 프레젠테이션 컴포넌트나 컨테이너 컴포넌트를 관리한다.

· 내부에 DOM 엘리먼트(UI)를 작성하지 않는다.

· 스타일을 가지고 있지 않는다.

· 스타일은 모두 프레젠테이셔널 컴포넌트 내부에 정의되어야 한다.

· 상태를 가지고 있고 리덕스에 직접 접근하여 데이터를 가져온다.

· dispatch를 하는 함수를 여기서 구현한다.

컴포넌트의 차이

· 선언 방식

클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일하다.

· 클래스형 컴포넌트

class App extends Component {
	render() {
    	const name = "Class Component"
        return <div> {name} </div>
    }
}

export default App;

1. class 키워드 필요

2. Component로 상속을 받아야한다.

3. render() 메소드가 반드시 필요하다.

4. state, lifeCycle() 관련 기능 사용이 가능하다.

5. 함수형보다 메모리 자원을 더 사용한다.

6. 임의 메소드를 정의할 수 있다.

 

· 함수형 컴포넌트

function App() {
	const name = "Function Component"
    return <div> {name} </div>
};

export default App;

1. state, lifeCycle 관련 기능 사용이 불가능하다. (하지만 Hook의 등장으로 Hook을 통해 해결 가능하다)

2. 클래스형보다 메모리 자원을 덜 사용한다.

3. 컴포넌트 선언이 편하다.

· State

state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

· 클래스형 컴포넌트

class App extends Components {
	constructor(props) {
    	super(props)
        this.state = {
        	test1: [],
            test2: '',
            number: 1
        }
    }
    testFunction = () => {
    	this.setState({number : number + 1})
    }
    render() {
    	const name = "Class Component";
        return <div> name </div>
    }
}

export default App;

1. constructor 안에서 this.state 초기 값 설정 가능

2. constructore 없이도 바로 state 초기 값을 설정 가능

3. this.setState()를 통해 state 값을 변경

4. 클래스형의 state는 객체 형식

 

· 함수형 컴포넌트

function App() {
	const [test1, setTest1] = useState([]);
    const [test2, setTest2] = useState('');
    const [number, setNumber] = useState(1);
    
    const testFunction = () => {
    	setNumber(number + 1);
    }
    const name = "Function Component";
    return <div> {name} </div>
}

export default App;

1. useState 함수로 state를 사용한다.

2. useState 함수를 호출하면 배열이 반환되는데, 첫 번째 원소는 현재 상태 그리고 두번째 원소는 상태를 바꿔주는 함수이다.

· Props

Props는 컴포넌트의 속성을 설정을 할 수 있으며, 컴포넌트 자체의 props를 변경할 수 없기 때문에 읽기 전용이다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야하며, 수정되는 값은 state 값이다.

· 클래스형 컴포넌트

class App extends Component {
	render() {
    	const {number, testName} = this.props;
        const title = "Class Component";
        return <div> {testName}의 나이는 {number}살 입니다. </div>
    }
}

export default App;

1. this.props를 통해 값을 불러올 수 있다.

 

· 함수형 컴포넌트

function App({number, testName}) {
	return <div> {testName}의 나이는 {number}살 이다. </div>
}

export default App;

1. props를 불러올 필요 없이 바로 호출이 가능하다.

이벤트 핸들링

· 클래스형 컴포넌트

class App extends Component {
	constructor(props) {
    	super(props)
        this.state = {
        	number: 1
        }
    }
    
    onClickFunc = () => {
    	this.setState({number : number + 1})
    }
    
    render() {
    	const title = "Class Component";
        return (
        	<div>
            	<button onClick={this.onClickFunc}>숫자 증가 버튼</button>
            </div>
        );
    }
}

export default App;

1. 함수 선언시 화살표 함수로 바로 선언 가능하다.

2. 요서에 적용할 때 this.를 붙여줘야한다.

 

· 함수형 컴포넌트

function App() {
	const [number, setNumber] = useState('');
    
    const onClickFunc = () => {
    	setNumber(number + 1);
    }
    
    const name = "Function Component";
    
    return (
    	<div>
        	<button onClick={onClickFunc}> 숫자 증가 버튼 </button>
        </div>
    );
}

export default App;

1. const 의 함수 형태로 선언을 해야한다.

2. 요소에 적용할 때 클래스 컴포넌트와 달리 this가 필요 없다.

Life Cycle

Life Cycle이란 React에서 컴포넌트는 여러 종류의 `생명주기 메서드`를 가지며 이 메서드를 오버라이딩(상속하여 재정의)하여 특정 시점에 코드가 실행되도록 설정한다. 클래스 컴포넌트에만 해당되는 내용이며, 함수형 컴포넌트는 Hook을 사용하여 생명주기에 원하는 동작을 한다. 함수형 컴포넌트를 주로 사용해왔기 때문에, 클래스 컴포넌트에 대한 부분은 레퍼런스를 통해 자세히 볼 수 있다.

 

간단히 요약을 하자면, Mounting(생성 · componentDidMount) · Updating(업데이트 · componentDidUpdate) · Unmounting(제거 · componentWillUnmount) · 컴포넌트 에러가 발생했을 경우에 대한 여러 종류의 생명 주기 메서드를 가진다. 

---

레퍼런스

함수형 컴포넌트와 클래스형 컴포넌트의 차이

[React] 클래스형 컴포넌트 vs 함수형 컴포넌트

[React] 클래스 컴포넌트 vs 함수 컴포넌트 (hook) - Dongki's Blog