[React]Components와 Props

⭐ 중요한 부분이니 완벽히 이해하고 넘어가자!

🎯 컴포넌트란(Coponent)?

컴포넌트는 독립적이고 재사용이 가능한 UI를 만들수 있는 단위 이다.

“props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

⚡ 함수형 컴포넌트와 클래스형 컴포넌트의 차이

1. 함수형 컴포넌트

function Welcome(props) {
  return <h1>Thank you, {props.name}</h1>;
}

리액트 공식문서에서 컴포넌트 새로 작성시에는 함수형 + Hooks의 조함으로 만드는것을 추천한다고 한다.
함수형 컴포넌트가 클래스형 컴포넌트보다 선언하기 편하고, 메모리도 덜 사용한다고 하지만 큰 차이는 아니라고 한다.

2. 클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

클래스형 컴포넌트에서는 render함수가 꼭 있어야 한다.
render함수 안에서 렌더링하고 싶은 JSX 를 반환해준다.

🎯 props란?

props란 컴포넌트끼리 값을 전달하는 수단이다.(=리액트 component의 속성)

• props(property)란 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성입니다.

• 상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에 단방향 데이터 흐름을 갖습니다.

• 부모 컴포넌트는 수정 가능하지만, 자식 컴포넌트는 읽기만 가능합니다.
  
  

다음 글에서 더 자세히 알아보자!