[React] 02. 리액트 컴포넌트(Component)

오늘은 리액트 컴포넌트에 대해 공부해보려고 합니다.
컴포넌트(Component)를 다루기 전에 state와 props개념만 간단히 정리해보려고 합니다.

💚 state와 props

리액트(React)는 state와 props를 사용하여 데이터를 저장하거나 처리하는 작업을 간단하게 수행할 수 있는데요.

state : 동적인 데이터를 다룰 때 사용
props : 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터

💚컴포넌트(Component)

리액트(React)에서 컴포넌트를 선언하는 방법은 두가지가 있습니다.

함수형 컴포넌트
클래스형 컴포넌트

💛함수형 컴포넌트

함수형 컴포넌트는 아래와 같은 방법으로 선언할 수 있습니다.

function App() {
  return (
    <div>
      <h1>안녕하세요!</h1>
      <h2>우든이 블로그입니다.</h2>
    </div>
  );
}

또는, 앞에서 다루었던 화살표 함수를 통해 선언할 수 있어요!

const App = () => {
  return (
    <div>
      <h1>안녕하세요!</h1>
      <h2>우든이 블로그입니다.</h2>
    </div>
  );
}

함수형 컴포넌트를 사용하면 클래스형 컴포넌트를 사용하는 것보다 선언이 편하고 메모리 낭비가 적다는 장점이 있지만, state와 라이프사이클기능 사용이 불가능하다는 단점이 존재합니다.

하지만, 위와 같은 문제는 Hooks가 도입되면서 해결될 수 있었는데요. 이부분은 뒤에서 좀 더 자세히 공부해보려고 합니다.

✔ 리액트 공식문서에는 함수형 컴포넌트와 Hooks사용을 권장한다고 합니다.

💛클래스형 컴포넌트

클래스형 컴포넌트에는 render() 함수가 필요한데요!
클래스형 컴포넌트를 사용하면 state와 라이프사이클을 사용할 수 있고 임의의 메서드를 정의할 수 있다는 장점이 있습니다.

class App extends React.Component {

    render(){
        return(
            <div>
            <h1>안녕하세요!</h1>
            <h2>우든이 블로그입니다.</h2>
            </div>
        );
    }
}

참고 자료 및 사이트

React 공식문서
벨로피트와 함께하는 모던 리액트