[React] Component와 Props

https://ko.reactjs.org/

 

공식 사이트가 설명이 잘 되어 있어서 이걸로 공부를 하기로 했다. 다행히 한국어로 잘 번역되어 있다.

우선은 주요개념 파트를 마스터하는 것이 중요하다.

 

1. Hello World
2. JSX 소개
3. 엘리먼트 렌더링
4. Component와 Props
5. State와 생명주기
6. 이벤트 처리하기
7. 조건부 렌더링
8. 리스트와 Key
9. 폼
10. State 끌어올리기
11. 합성 vs 상속
12. React로 생각하기

 

총 12가지 문서로 되어 있고 이 12가지 개념을 익히면 리액트의 큰 줄기는 다 훑는 것이라고 한다. 물론 이것 또한 초보자에게 친절하다고는 말하긴 힘들다. 차근차근 설명하다가 어느 순간 "예시를 보여줄테니까 나머지는 니가 혼자 이해해봐" 라는 느낌이라 혼자 머리 싸매고 연구를 해봐야 한다.

 

지금 공부중인 것은 4강 Component와 Props.

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

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

ReactDOM.render(
  element,
  document.getElementById('root')
);

컴포넌트는 개념적으로는 Javascript의 함수와 유사하며 Props라는 임의의 값을 받은 엘리먼트나 Javascript의 실행 결과를 반환한다. 예시처럼 HTML과 Javascript를 혼합한 것 같이 생긴 코드를 JSX라고 한다. 리액트에 반드시 JSX를 써야하는 건 아니지만 권장한다. XSS 같은 주입공격을 예방할 수 있는 게 가장 큰 장점이라고 한다.

 

위 예제에서 Welcome 컴포넌트는 구조만을 정의하고 Sara라는 이름은 element 변수에 정의되었다. props는 자바스크립트의 변수의 역할 중 데이터를 전달하는 매개 역할을 한다.

---

최종 예제 정리

자습서에 있는 최종예제는 너무 현란해서 개념 정리에 혼란을 주는 불필요한 요소는 제거했다. 그리고 변수명 바꿔가며 이 변수가 어떻게 작동하는지를 파악하기로 했다. 소스 하나 가지고 이틀쯤 고민해보니 대략적인 구조 파악이 가능해졌다.

function formatDate(date) {
  return date.toLocaleDateString();
}

function Avatar(props) {
  return <img src={props.user.avatarUrl} alt={props.user.name} />
}

function UserInfo(props) {
  return (
    <div>
      <Avatar user={props.user} />
      <div>{props.user.name}</div>
    </div>
  );
}

function Comment(props) {
  return (
    <div>
      <UserInfo user={props.XXXauthor} />
      <div>{props.XXXtext}</div>
      <div>{formatDate(props.XXXdate)}</div>
    </div>
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'https://placekitten.com/g/64/64',
  }
}

ReactDOM.render(
  <Comment
    XXXdate={comment.date}
    XXXtext={comment.text}
    XXXauthor={comment.author}
  />,
  document.getElementById('root')
);

※ 이해하기 쉽게 일부러 어트리뷰트를 XXX 이런 식으로 만들었다.

 

 

[결과화면]

 

[소스 해석]

1. 최종 조립본인 Comment 컴포넌트는 comment 객체에 정의된 데이터값을 받아온다.

2. Avatar 컴포넌트는 사용자 프로필사진을 생성하는 부품이며, 이 소스의 가장 작은 단위이다.

3. UserInfo 컴포넌트에 name 값을 추가하고 Avatar 컴포넌트를 조립한다.

4. Comment 컴포넌트에 text 값을 추가하고 UserInfo 컴포넌트를 조립한다.

5. Comment 컴포넌트를 render 한다.

 

구조는 Avatar -> UserInfo -> Comment 순으로 조립이 되고, 데이터의 흐름은 Comment -> UserInfo -> Avatar 순으로 렌더된다. 

---

캡슐화와 조립

컴포넌트를 이해할 때 캡슐화 개념을 이해하는 것이 중요하다. 캡슐화는 객체지향개발에서 나온 개념인데 객체지향의 핵심이다. 

우리같이 개발알못의 눈높이로 보자면, 포켓몬스터의 포켓볼과 흡사하다. 피카츄든 꼬부기든 종류, 크기, 특징에 상관없이 모든 몬스터는 캡슐 안에 들어간다. 그래서 가지고 다니거나 보관하기 편리하다.

 

캡슐화는 이처럼 작은 하나의 프로그램을 포장(추상화)한 것을 말하며, 포장되어 있기 때문에 취급이 쉽고 외부로부터 독립성이 보장된다. 이렇게 캡슐화된 작은 프로그램을 필요에 따라 조립해서 쓰는 것을 컴포넌트 베이스 개발 (CBD : Component Based Development)이라고 한다.

 

기존에 다른 객체지향 언어를 공부해본 적이 없다면 이 개념을 이해하지 않고서는 앞길을 헤쳐나갈 수 없으니 꼭 이해하고 넘어가자. 누가 리액트 쉽다고 했냐