React. 컴포넌트

컴포넌트

<컴포넌트명 속성명 = "값" />

• 컴포넌트는 리액트에서 UI를 구성하는 기본 단위이다.
• 속성, 상태, 메소드를 포함한다.
  • 속성 : 컴포넌트에 전달되는 속성값으로 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는데 사용된다.
  • 상태 : 컴포넌트의 내부데이터를 나타낸다. 컴포넌트가 동적으로 변할 수 있도록 한다.
  • 메소드 : 컴포넌트 내에서 정의된 함수. 주로 이벤트 처리나 비즈니스 로직을 담당한다.
• 재용성과 가독성을 높이기 위한 도구이다.
• 가능한 순수함수로 실행되도록 작성한다.
• 데이터 영역과 UI를 분리한다.

종류

클래스형 컴포넌트 (soft-deprecated)

• React.Component 클래스를 확장하여 만든다. (과거에는 createClass 사용)
• 상태와 생명주기 관리가 쉽다.
• constructor :상태 및 속성 초기설정, this.state : 상태 정의, render() : UI생성

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 상태 초기화
    };
  }
  // UI 생성
  render() {
    return (
      <div className='App'>
        Class Component
      </div>
    );
  }
}

함수형 컴포넌트

• import React from 'react' 모듈에서 필요기능을 가져와서 만든다.(17버전 이후는 필요없음)
• 상태과 생명주기가 없다. (그러나 16.8 이후 Hooks이 생겨서 상태 및 생명주기 관리가 가능해짐)
• 직관적이고 가벼우며 번들크기가 더 작다.

`props` : 속성을 받아오는 부분, `useState` : 상태관리, `userEffect`: 생명주기 관리, `return JSX` : UI 생성

Props : 컴포넌트에 전달되는 속성값으로 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는데 사용된다.

• 타입정의 : propTypes 속성 사용, 타입스크립트 (권장)
• defaultProps : 기본속성값 설정 가능
• 렌더링시 한번만 설정된다. (렌더링 후에는 바뀌지 않는다.)
  

상태 : 컴포넌트 자체에서 관리하는 데이터이다.

• 상태변경 :useState()
• 부모 컴포넌트의 상태가 변경되면 그 상태를 참조하는 모든 자식 컴포넌트가 리렌더링된다.
• 상태는 성격에 맞게 분리하여 사용할 것 (필요한 부분만 업데이트되어 성능이 향상된다. 분리되지 않으면 불필요한 리렌더링 수가 증가한다. 참고로, Real Active DOM은 해당 상태를 참조하는 부분만 다시 그린다.(paint & display))

function MyFunctionalComponent(props) { // props: 속성을 받아오는 부분
  // useState, useEffect 등을 사용하여 상태 및 생명주기 관리
  // JSX 반환
  return (
    <div className='App'>
      Function Component
    </div>
  );
}

컴포넌트의 생명주기

클래스형 컴포넌트

1. constructor (this.state, this.props) : 컴포넌트 생성 (초기상태, 속성 설정)
2. componentWillMount : 컴포넌트가 화면에 올라가기 직전 호출 (현재는 거의 사용되지 않음)
   • componetWillReceiveProps (getDerivedStateFromProps)
   • shouldComponentUpdate
   • ComponentWillUpdate
3. render : UI 렌더링
4. componentDidMount : 컴포넌트가 화면에 올라간 뒤 호출 (getSnapshotBeforeUpdate)
   • componetDidUpdate : 컴포넌트의 값이 업데이트될 때마다 호출
5. componentWillUnmount : 컴포넌트가 소멸하기 전에 호출
6. destory : 메모리에서 소멸
7. componentDidCatch : 자식 컴포넌트에서 발생한 예외처리

함수형 컴포넌트 (Hooks 이용)

1. 선언 (declarative area - variables / functions) : 함수 내에서 const로 가볍게 선언
2. 상태 초기화 : useState()
3. return JSX : UI 렌더링
4. useEffect, useLayoutEffect : 생명주기 관리(마운트, 업데이트, 언마운트)

• useEffect : (비동기적 동작) 컴포넌트가 마운트, 업데이트, 언마운트될 때의 부작용을 처리. componentDidMount, componetDidUpdate, componentWillUnmount에 대응한다.
• useLayoutEffect : (동기적 동작) 주로 렌더링 후에 동기적으로 발생하는 작업 처리. componentDidMount, componentDidUpdate에 대응한다.

5. return of useEffect, useLayoutEffect : 정리작업 처리. (useEffect내에서 반환된 함수는 언마운트, 업데이트시에 정리작업을 처리한다.)

함수형 컴포넌트 생명주기 2번 호출

• index.tsx에서 React.StrictMode로 App이 감싸져 있으면 생명주기를 2번 호출한다. (componentDidMount, componentWillUnmount)
• React.StrictMode가 없으면 생명주기를 1번만 호출한다. (componentDidMount)

<React.StrictMode>
  <App />
</React.StrictMode>

컴포넌트 설계(Atomic Design)

설계는 큰 단위부터 작은 단위로 하고, 구현은 작은 단위부터 큰 단위로 한다.

단위별 컴포넌트 종류

• Atoms : UI의 최소 단위. 단일한 역할 수행하며 독립적으로 사용가능하다. [ex] Input, Button 등
• Molecules : 한 개 이상의 Atoms 구성하여 단일한 역할을 수행한다. [ex] LoginForm, SearchForm 등
• Organisms
  • 한 개 이상의 Molecules를 조합한다. [ex] NavBar(Nav + SearchForm), Header 등
  • Presentation와 Container Components로 구성한다.
    • Presentation: 상태나 데이터 없이 HTML, CSS만 정의
    • Container Components : 데이터 및 로직처리. Presentation를 관리하고 제어
• Templates
  • Organisms를 조합해서 만든 화면 레이아웃(CSS)이다.
  • CSS 스타일링이 추가되어 전체적인 디자인이 구성된다.
• Pages : Templates에 Data를 포함하여 완성된 최상위 컴포넌트. 최종적으로 완성된 페이지이다.

정리

• 컴포넌트는 최대한 독립적으로 작성한다.
  • 결합도(coupling)를 최소화하여 재사용성을 높인다.
• 함수형 컴포넌트는 순수 함수형 컴포넌트로 작성한다.
• 컨테이너 컴포넌트를 적절히 활용합니다.
  • 데이터를 가져오는 부분과 화면을 그리는 부분은 분리하여 작성합니다.
  • 상태공유 단위로 분리한다.(useContext)
  • 단순 담는 용도의 아주 깊은 컨테이너 금지(즉, container(context) 남발 금지)