드디어 찾아왔다. 함수형 컴포넌트..!
기능이 궁금해서 구글링을 하면 열에 아홉은 함수형 컴포넌트를 활용한 예시가 나왔는데, 대체 정체가 뭐고 어떻게 쓰는걸까?!
React를 처음 공부할 때, React 안에서 컴포넌트를 정의할 수 있는 방법으로 클래스형 컴포넌트와 함수형 컴포넌트가 있다고 했다. 클래스형 컴포넌트는 지금까지 내가 익숙하게 써왔던 방식으로 아래와 같은 형태를 지니고 있다.
import React from 'react';
import './Component.scss';
class Component extends React.Component {
constructor() {
super();
this.state = {
//state값 관리하는 곳
};
}
//기능 구현을 위한 function이 있다면 이 자리에 작성
render() {
return(//HTML 코드가 들어오는 자리)
}
}
export default Component;클래스형 컴포넌트의 특징은,
constructor()내에서 state값 관리componentDidMount(),componentDidUpdate(),componentWillUnmount()등 컴포넌트 라이프사이클을 관리해주는 메소드가 별도로 존재render안에서 화면에 그려져야 하는 값이 return 됨
About function component
함수형 컴포넌트는 데이터를 가진 props 객체 인자를 받은 후 React 엘리먼트(UI로 그려져야 하는 내용)을 반환하는 함수다. 우리가 일반적으로 생각하는 함수와 동일하게 작동하므로 함수형 컴포넌트라고 부른다.
input(state & props)에 따라 다른 output(UI)를 표현하는 함수
import React from 'react';
export default function Component() {
//기능 구현을 위한 function이 있다면 이 자리에 작성
return (
//HTML 코드가 들어오는 자리
);
}함수형 컴포넌트의 특징을 간단하게 말하면,
- 클래스형 컴포넌트와 달리 state값을 관리해주는
constructor()가 없음. 대신Hooks라는 걸 통해 동일한 기능을 구현 - 라이프사이클을 관리해주는 메소드가 별도로 구분되어 있지 않음. 이것도 마찬가지로
Hooks를 활용하여 해결 render가 없이 return만으로 작동
What is Hooks
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을
"연동(hook into)" 할 수 있게 해주는 함수입니다.
함수형 컴포넌트에서 중요한 부분 중 하나인 Hook은, 함수형 컴포넌트 내에서도
클래스형 컴포넌트와 비슷한 방식으로 React를 활용할 수 있도록 도와준다.
클래스형 컴포넌트 대비 Hook의 장점이라고 한다면, 각각의 Hook이 기능별로 분리가 가능하여 가독성을 높인 것이라고 할 수 있다.
예를 들면, componentDidMount()는 중복 사용이 불가능하지만 useEffect는 가능하다. 그래서 클래스형 컴포넌트에서는 componentDidMount()에서 한번에 처리해야했던 함수들을 해당 기능을 대체하는 useEffect를 중복 사용하여 분리할 수 있다.
State Hook (useState)
const [state, setState] = useState(initialState);State Hook은 클래스형 컴포넌트의 state와 setState를 대체한다.
Effect Hook (useEffect)
함수가 어떤 동작을 할 때, input & output 이외의 다른 값을 조작한다면 이 함수에는 Side Effect(부수 효과)가 있다고 표현한다. 즉 Data Fetching이나 Counter, 구독 등 직접적으로 UI 구현과 관련이 없는 행위는 모두 side effect라고 볼 수 있는 것이다.
하지만 side effect는 함수의 body 자리(render)에서 실행시키면 안된다. 매 렌더링 마다 실행되어 성능에 영향을 끼칠 수 있기 때문이다. 이 때 함수형 컴포넌트에서는 useEffect 내에서 side effect를 처리하여 문제를 해결한다.
import { useEffect } from "react"
// 사용법
useEffect( 실행시킬 동작, [ 타이밍 ] )
// 매 렌더링마다 Side Effect가 실행되어야 하는 경우
useEffect(() => {
// Side Effect
})
// Side Effect가 첫 번째 렌더링 이후 한번 실행 되고,
// 이후 특정 값의 업데이트를 감지했을 때마다 실행되어야 하는 경우
useEffect(() => {
// Side Effect
}, [value])
// Side Effect가 첫 번째 렌더링 이후 한번 실행 되고,
// 이후 어떤 값의 업데이트도 감지하지 않도록 해야 하는 경우
useEffect(() => {
// Side Effect
}, [])일단 개념 정리를 위해 함수형 컴포넌트에 대한 이론적인 내용을 정리해보았다.
그저 이론만 정리하는 건 큰 의미가 없으므로 직접 프로젝트에 개념을 적용하면서 사용방법을 익히고 실제 사용 예시를 추가하도록 하자 :)
