[React] 컴포넌트(component)와 속성(props)

정지우·2021년 7월 9일

keyword.zip

목록 보기

29/40

<컴포넌트를 정의하는 방법 두 가지>

함수 컴포넌트

JavaScript 함수를 작성하는 것
(1) “props”라고 하는 임의의 입력을 받은 후,
(2) 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

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

props

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 전달하는 단일 객체

클래스 컴포넌트

ES6 class를 사용하여 컴포넌트를 정의할 수 있습니다.

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

React의 관점에서 볼 때 위 두 가지 유형의 컴포넌트는 동일합니다.

class는 몇 가지 추가 기능이 있으며 이에 대해서는 다음 장에서 설명합니다.
그때까지는 간결성을 위해 함수 컴포넌트를 사용하겠습니다.
함수 컴포넌트와 클래스 컴포넌트 둘 다 몇 가지 추가 기능이 있으며 이에 대해서는 다음 장에서 설명합니다.

컴포넌트 렌더링

<React 엘리먼트를 나타내는 방법 두 가지>

DOM 태그

const element = <h1>Hello, world</h1>

사용자 정의 컴포넌트

const element = <Welcome name="Sara" />

React가
사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면
JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다.
이 객체를 “props”라고 합니다.

사용자 정의 컴포넌트 예시

CodePen에서 시험해보기

<Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출합니다.
React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출합니다.
Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환합니다.
React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트합니다.

컴포넌트 추출

컴포넌트를 여러 개의 작은 컴포넌트로 나누는 것을 두려워하지 마세요.

다음 Comment 컴포넌트를 살펴봅시다
CodePen에서 시험해보기

이 컴포넌트는 author(객체), text(문자열) 및 date(날짜)를 props로 받은 후 소셜 미디어 웹 사이트의 코멘트를 나타냅니다.

이 컴포넌트는 구성요소들이 모두 중첩 구조로 이루어져 있어서 변경하기 어려울 수 있으며, 각 구성요소를 개별적으로 재사용하기도 힘듭니다.
이 컴포넌트에서 몇 가지 컴포넌트를 추출하겠습니다.

먼저 Avatar를 추출하겠습니다.

Avatar 는 자신이 Comment 내에서 렌더링 된다는 것을 알 필요가 없습니다.
따라서 props의 이름을 author에서 더욱 일반화된 user로 변경하였습니다.

props의 이름은 사용될 context가 아닌 컴포넌트 자체의 관점에서 짓는 것을 권장합니다.

이제 Comment 가 살짝 단순해졌습니다.

처음에는 컴포넌트를 추출하는 작업이 지루해 보일 수 있습니다.
하지만 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타냅니다.
UI 일부가 여러 번 사용되거나 (Button, Panel, Avatar),
UI 일부가 자체적으로 복잡한 (App, FeedStory, Comment) 경우에는
별도의 컴포넌트로 만드는 게 좋습니다.