[React] Function Component

https://ko.legacy.reactjs.org/docs/components-and-props.html

 

React 컴포넌트를 작성하는 방법중 흔히 사용하는 것이 Function Component 입니다.

 

기본적인 구현 방법은 아래와 같습니다.

 

 

const UserNameDisplay = ({userName}: { userName:string })=>{

   return <div>{userName}</div>

}

 

 

결국 함수라는 것은 아래와 같은 특징을 가지며, React Function Component도 동일한 특징을 가집니다.

1. 재사용이 가능하며,
2. Props를 전달할 수 있고
3. Return 값을 반환할 수 있다.

 

즉, 컴포넌트 단위가 묶여 페이지를 형성하고, 각 상황에 맞는 Props를 전달하고, JSX를 Return 함으로서 화면을 Rendering 하게 됩니다.

---

 

그렇다면 성능적으로 우리가 고민해야 할 요소는,

“Rendering 최적화 : Function Component의 최소한 호출” 입니다.

 

React 는 State(상태)기반의 컴포넌트 입니다.

따라서 State가 가장 중요한 관리 포인트가 됩니다.

 

상태가 바뀌면 해당 Component는 재호출 되고,

Function Component state를 제외한 내부 함수, 변수 값을 재 정의 합니다.

따라서, 이러한 최적화를 위해 

useCallback, useMemo 와 같은 Hook을 제공합니다.

 

다시 정리하자면,

 

React의 핵심은 Function Component

Rendering 최적화를 위해서는 아래와 같은 요소들을 고민해야합니다.

1. State 설계
2. useEffect 를 이용한 State 관리
3. useRef 사용
4. useCallback, useMemo 이용한 함수 Cache

 

다시 말하지만, React Component는 “Function” 입니다.