React - component , props

어느새 3주차를 달리고 있다.

그동안 개발물들은 직접적으로 HTML이나 CSS에 손을 대서 작업을 했었지만, 페이스북에서 '너넨 코딩이나 해' 라며 프론트엔드에 적합한 언어를 개발했는데, 그것이 바로 오늘부터 4일간 나와 동고동락할 "React"이다.

잠깐 만져봤지만 참 유용하고 재미난 친구이다. 하지만, 프로그래밍 언어를 처음 배울때의 기분이 새록새록 나고 있다.

(어려워...)

 

숙제 겸 복습 겸, React의 중요 키워드인 component, props, state, life-cycle에 대해서 간단히 알아보자.

1. 컴포넌트

컴포넌트는 하나의 "커스터 마이징 된 HTML태그"이다.

보통 HTML문서는 아래와 같이 사용한다.

<h1>Hello</h1>

 

하지만 저걸 Hello라는 태그로 만들고 싶으면 React에서는 다음과 같이 하면 된다.

const Hello = () => (
    <h1>Hello</h1>;
)

//다음과 같이 사용가능 하다.
<Hello />

 

컴포넌트는 functional한 방법과, class를 이용한 방법이 있는데

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

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

두 개모두 같은 기능을 하지만 class를 이용한 방법에서는 rendering과 life cycle 이라는 기능이 추가 된다.

다시말해, 컴포넌트는  React에서 제공하는 HTML 커스터마이징 시스템이라고 간단히 이해하면 되겠다.

(사실은 더 복잡하지만..이정도만 이해하고 넘어가자..)

 

2. props 

props는 propertys 의 준말로서, 속성들을 의미한다.

강에 상류와 하류가 있을때, props는 "상류에서 하류로 전달되는 물" 에 비유할 수 있을 것이다.

상위 컴포넌트에서 하위 컴포넌트에게 전달하는 인자가 props로 정의 될 수 있을 것이다.

하류의 물을 상류로 다시 올릴 수 없는 것 처럼, props는 위에서 아래로 즉 "단방향"으로만 전달되는 특징이 있다.

(올릴 수도 있지만 지금 상태에선 가지고 있지않은 지식이라.. 추후에 학습 후 공지하겠다.)

실제 코드 예를 봐보자..

// 상위 컴포넌트
function Comment(props) {
  return (
    <div className="Comment">           
        <Avatar user={props.author} />      
    </div>
  );
}

조금 복잡해 보이겠지만 우리는 5번째줄에 위치한 Avatar태그에 주목하면 된다.

저게 바로 커스터마이징 된 React를 이용한 태그이다. 

Avatar user={prop.author}의 뜻은 풀이하자면 다음과 같다.

상위의 인자중 하나를 하위에게 user란 이름으로 전달하겠다.

 => 상위(Comment)의 인자(props)중 하나를(.autor)  하위(Avatar)에게 user라는 이름으로 전달하겠다. 

 => Comment의 props로 받은 인자중 autor을 Avatar에게 user라는 이름으로 전달하겠다.

 => <Avatar user = {props.autor} />

그럼 전달받은 인자는 어떻게 될까?

//하위 컴포넌트 구성
function Avatar(prop) {
  return (
    <img className="Avatar"
      src={prop.user.avatarUrl}
      alt={prop.user.name}
    />
  );
}

src={ prop.user.avatarUrl }

src에는 인자(prop)로받은 user라는 속성에서 avataUrl 이라는 값을 빼 넣어주고 있고

alt={ prop.user.name }

alt에는 인자(prop)로받은 user라는 속성에서 name 이라는 값을 빼고 있다.

 

처음에 봤을때는 prop? user? 왜 이름이 바뀌는데 잘먹히는거지..? 라는 생각을 가지고 있었는데

위 처럼 풀어서 해석하니 이해가 쉬워졌다.

 

요약하자면, props 는 상위 컴포넌트에서 하위 컴포넌트로 내려주는 인자로서

상 -> 하로만 전달되는 특징이 있다.(단방향)

전달할 때의 이름을 직관적으로 변경가능하므로, 신경써서 네이밍 해주는 게 좋을 것 같다.

<컴포넌트와 props 간단 그림>