🌙 [React] 컴포넌트

🌊 컴포넌트

 

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

클래스형 컴포넌트

• 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다.
• 임의의 메서드를 정의할 수 있다.

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    const name = 'ogu';
    return <div className="react">{name}</div>;
  }
}

 

함수형 컴포넌트

• 클래스형 컴포넌트보다 선언하기 훨씬 편하다.
• 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다.
• 결과물의 파일 크기가 더 작다
• state와 라이프사이클 API사용이 불가능하다는 단점이 있었으나 v16.8 업데이트 이후 Hooks 기능이 도입되면서 해결되었다.

import React from 'react';

export default function App() {
  const name = 'ogu';
  return <div className="react">{name}</div>;
}

 

props

: 컴포넌트 속성을 설정할 때 사용하는 요소. 

 

props 기본값 설정 : defaultProps

import React from 'react';

export default function MyComponent(props) {
  return (
    <div>안녕, 내 이름은 {props.name}이야</div>
  );
};

MyComponent.defaultProps = {
 name : '기본 이름 '
}

 

비구조화 할당 문법을 통해 props 내부 값 추출

import React from 'react';

export default function MyComponent(props) {
  const {name} = props;
  // 변수 선언을 하여 객체에 props를 할당해주어 props.name을 호출하지 않고 name만 호출되게 한다.
  return (
    <div>안녕, 내 이름은 {name}이야</div>
  );
};


import React from 'react';

export default function MyComponent({name}) {
// 매개변수에 props 대신 객체를 넣어 props.name을 호출하지 않고 name만 호출되게 한다.
  return (
    <div>안녕, 내 이름은 {name}이야</div>
  );
};

 

 

state

: 컴포넌트 내부에서 변할 수 있는 값. 

props는 컴포넌트가 사용 되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. 

 

함수형 컴포넌트에선 useState를 사용한다.

useState 함수를 호출하면 배열이 반한돠며, 배열의 첫 번쨰 요소는 현재 상태이며 두 번쨰 요소는 상태를 바꿔 주는 함수(세터 함수)이다.

 

state 사용시 주의사항

state 값을 업데이트 할 때는 꼭 세터 함수를 사용한다.