Skip to content

React:Component

React 에서 컴포넌트 작성 방법.

함수형 컴포넌트

function 으로 정의하고 return 문에 jsx 코드를 반환합니다. 

import React from "react";
import "./App.css";

function NameBox() {
  const name = "test";
  return <div>{name}</div>;
}

export default NameBox;

이 때 함수형 컴포넌트는 function을 사용하지 않고 화살표 함수로 정의해도 됩니다. 

import React from "react";
import "./App.css";

const NameBox = () => {
  const name = "test";
  return <div>{name}</div>;
};

export default NameBox;

클래스형 컴포넌트

class로 정의하고 render() 함수에서 jsx 코드를 반환합니다. 

import React, { Component } from "react";

class NameBox extends Component {
  render() {
    const name = "react";
    return <div className="react">{name}</div>;
  }
}

export default NameBox;

Props vs State

Props in TypeScript

defaultProps

밖에서 처리하는 방법: 

import React, { Component, Fragment } from 'react'

export default class Hello extends Component {
    // ...
}

Hello.defaultProps = {
    name:"초기값"
}

안에서 처리하는 방법: 

import React, { Component, Fragment } from 'react'

export default class Hello extends Component {
    static defaultProps = {
        name:"초기값"
    }
    // ...
}

Event handling

컴포넌트에 Element 전달 방법

vue로 따지면 slot에 해당하는 내용이다. React:ReactElement 또는 React:ReactNode 타입의 children Props 를 사용하면 된다. 

import React from 'react';

type BoxProps = {
  name: string;
  country: string;
  children: React.ReactNode;
};

// 👇️ using React.FunctionComponent
const Box: React.FunctionComponent<BoxProps> = ({name, country, children}) => {
  return (
    <div>
      <h1>{name}</h1>
      <h1>{country}</h1>
      {children}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Box name="James Doe" country="Germany">
        <h1>Hello</h1>
        <h1>World</h1>
      </Box>
    </div>
  );
};

export default App;

리액트 컴포넌트의 라이프사이클

일부 라이프사이클 메서드들은 클래스형 컴포넌트에서 사용하는 것으로, 함수형 컴포넌트에서는 사용할 수 없으나 Hooks 기능으로 유사한 기능을 활용하게 됩니다.

mount

  • DOM이 생성된 후 웹 브라우저에 나타나는 것.

update

  • 컴포넌트에서 props가 바뀔 때
  • state가 바뀔 때
  • 부모 컴포넌트 리렌더링 때
  • this.forceUpdate로 강제 렌더링할 때

unmount

  • Only class component
  • 마운트의 반대 과정. DOM에서 컴포넌트를 제거하는 과정.

render

  • 마운트 이후 호출
  • 이 메서드는 컴포넌트 모양을 정의하는 함수로 클래스형 컴포넌트에서 항상 빠지지 않고 나왔던 메서드입니다. 라이프사이클 메서드들 중에 유일하게 필수 메서드입니다. 준비한 UI를 렌더링합니다.

주의점

  • 이 메서드 내부에서 this.props, this.state에 접근 가능, 리액트 요소를 반환
  • 이 메서드 내부에서는 이벤트 설정이 아닌 곳에서 setState를 사용하면 안 됨
  • 브라우저의 DOM에 직접 접근하면 안 되고, DOM 정보를 가져오거나 state를 변화시키고 싶다면 componentDidMount 메서드에서 처리해야 함

getDerivedStateFromProps

  • 리액트 버전 16.3 이후 새로 만들어진 메서드
  • props로 받아온 값을 state에 동기화시키는 용도로 사용합니다.
  • 컴포넌트 마운트 및 업데이트시 호출됩니다.

componentDidMount 메서드

  • componentDidMount 와 useEffect
  • 컴포넌트를 만들고 첫 렌더링을 마친 후에 실행하는 메서드
  • 다른 자바스크립트 라이브러리, 프레임워크 함수를 호출하거나 setInterval, 이벤트 등록, 네트워크 요청 같은 비동기 작업을 이 메서드로 처리합니다.

shouldComponentUpdate

  • props 혹은 state를 변경 시 컴포넌트의 리렌더링을 시작할지 여부를 지정합니다.
  • 이 메서드는 반드시 true 혹은 false를 반환해야 합니다.
  • 컴포넌트 생성 시 이 메서드를 따로 생성하지 않을 경우 기본적으로 true 값이 반환되게 설정되어 있습니다.
  • 이 메서드 내부에서 현재 props, state는 this.props, this.state로 접근 가능합니다.
  • 새로 설정될 props, state는 각각 nextProps, nextState로 접근 가능합니다.
  • 전체 프로젝트의 성능을 최적화하는 부분에 있어 상황에 맞게 리렌더링을 방지할 때, false값을 반환하게 할 수 있습니다.
  • 즉 이 메서드는 성능 최적화 부분에서 활용될 수 있습니다.

getSnapshotBeforeUpdate

  • 리액트 버전 16.3 이후 새로 만들어진 메서드
  • render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전 호출됩니다.
  • 이 메서드가 반환하는 값은 후술할 #componentDidUpdate 메서드의 세 번째 파라미터인 snapshot 값으로 전달받을 수 있으며,
  • 주로 업데이트 직전 값을 참고해야 할 때 사용합니다. (EX: 스크롤바 위치 유지 등)

componentDidUpdate

  • 리렌더링을 완료한 후 실행하는 메서드로, 업데이트가 끝난 직후라서 DOM 관련 처리를 해도 무방합니다.
  • 여기서 prevProps, prevState 를 사용해서 컴포넌트가 이전에 가진 데이터에 접근이 가능하며, 위에서 서술한 #getSnapshotBeforeUpdate 메서드에서 반환한 값을 이 메서드가 전달받을 수 있습니다.
  • componentDidUpdate(prevProps, prevStae, snapshot) { … }

componentWillUnmount

  • 컴포넌트를 DOM에서 제거할 때 실행하는 메서드로
  • #componentDidMount 에서 등록한 이벤트, 타이머, 직접 생성한 DOM 등을 여기서 제거 작업해야 합니다.

componentDidCatch

  • 리액트 버전 16에서 새로 만들어진 메서드로,
  • 컴포넌트 렌더링 도중에 에러가 발생하면 먹통이 되지 않고 오류 UI를 보여주게 합니다. 
componentDidCatch(error, info) {
    this.setState({
        error: true
    });
    console.log({error, info});
}
  • error 에는 어떤 에러가 발생했는지 넘겨받게 되고,
  • info 에는 어디의 코드가 오류가 발생했는지 정보를 넘겨받게 됩니다.

이 메서드는 자신의 컴포넌트 에러는 잡아내지 못하며 자신의 this.props.children 으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있습니다.

See also

Favorite site